Changes for page FirstDigital Products Home Page:

Summary

• Page properties (1 modified, 0 added, 0 removed)
• Attachments (0 modified, 0 added, 2 removed)
  • 55da30a8-a01a-4c4b-a486-a95baf3bc33b
  • firstdigitalhome_logo

Details

Page properties

Content

...	...	@@ -1,11 +1,13 @@
1		-{{html}}
	1	+{{html clean="false"}}
2	2	<div class="modern-menu-container">
3		- <div class="row">
	3	+ <div class="menu-grid">
	4	+
4	4	<!-- Card 1: Webex -->
5		- <a href="TARGET_URL_FOR_WEBEX" class="col-xs-12 col-sm-6 menu-card-link">
	6	+ <a href="TARGET_URL_FOR_WEBEX" class="menu-card-link">
6	6	<div class="menu-card">
7	7	<div class="menu-icon-container">
8		- <img src="$xwiki.getURL('Main.WebHome','download','filepath=webexbycisco-3d-vertical-color-black-text.png')" alt="Webex" class="menu-icon webex-icon" />
	9	+ <!-- Ensure 'Webex-Symbol.jpg' is attached to this page -->
	10	+ <img src="$xwiki.getURL('current','download','filepath=Webex-Symbol.jpg')" alt="Webex" class="menu-icon webex-logo" />
9	9	</div>
10	10	<div class="menu-text">
11	11	<div class="menu-title">Cloud Connected PSTN (CCP)</div>
...	...	@@ -15,10 +15,11 @@
15	15	</a>
16	16
17	17	<!-- Card 2: MS Teams -->
18		- <a href="TARGET_URL_FOR_TEAMS" class="col-xs-12 col-sm-6 menu-card-link">
	20	+ <a href="TARGET_URL_FOR_TEAMS" class="menu-card-link">
19	19	<div class="menu-card">
20	20	<div class="menu-icon-container">
21		- <img src="$xwiki.getURL('Main.WebHome','download','filepath=MS teams.webp')" alt="MS Teams" class="menu-icon teams-icon" />
	23	+ <!-- Ensure 'MS teams.webp' is attached to this page -->
	24	+ <img src="$xwiki.getURL('current','download','filepath=MS teams.webp')" alt="MS Teams" class="menu-icon teams-logo" />
22	22	</div>
23	23	<div class="menu-text">
24	24	<div class="menu-title"><strong>MS Teams</strong></div>
...	...	@@ -26,14 +26,13 @@
26	26	</div>
27	27	</div>
28	28	</a>
29		- </div>
30	30
31		- <div class="row">
32		- <!-- Card 3: FirstDigital -->
33		- <a href="TARGET_URL_FOR_SIP" class="col-xs-12 col-sm-6 menu-card-link">
	33	+ <!-- Card 3: FirstDigital SIP Trunk -->
	34	+ <a href="TARGET_URL_FOR_SIP" class="menu-card-link">
34	34	<div class="menu-card">
35	35	<div class="menu-icon-container">
36		- <img src="$xwiki.getURL('Main.WebHome','download','filepath=1784751540742-511.png')" alt="SIP Trunk" class="menu-icon sip-icon" />
	37	+ <!-- Ensure 'image_29.png' is attached to this page -->
	38	+ <img src="$xwiki.getURL('current','download','filepath=image_29.png')" alt="FirstDigital" class="menu-icon firstdigital-logo" />
37	37	</div>
38	38	<div class="menu-text">
39	39	<div class="menu-title"><strong>FirstDigital SIP trunk</strong></div>
...	...	@@ -43,10 +43,11 @@
43	43	</a>
44	44
45	45	<!-- Card 4: Support -->
46		- <a href="TARGET_URL_FOR_SUPPORT" class="col-xs-12 col-sm-6 menu-card-link">
	48	+ <a href="TARGET_URL_FOR_SUPPORT" class="menu-card-link">
47	47	<div class="menu-card">
48		- <div class="menu-icon-container">
49		- <img src="$xwiki.getURL('Main.WebHome','download','filepath=1784751495894-847.png')" alt="Support" class="menu-icon support-icon" />
	50	+ <div class="menu-icon-container icon-only-bg">
	51	+ <!-- Support Icon (using a clean vector equivalent) -->
	52	+ <svg class="menu-icon support-icon" viewBox="0 0 24 24" width="24" height="24" stroke="#0060FF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
50	50	</div>
51	51	<div class="menu-text">
52	52	<div class="menu-title"><strong>Support</strong></div>
...	...	@@ -54,107 +54,170 @@
54	54	</div>
55	55	</div>
56	56	</a>
	60	+
57	57	</div>
58	58
59	59	<!-- Partner Footer Links -->
60		- <div class="row partner-footer">
61		- <div class="col-xs-6 text-center">
62		- <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true">
63		- <img src="$xwiki.getURL('Main.WebHome','download','filepath=FirstDigital-Logo.png')" alt="FirstDigital" style="max-height:34px;" />
64		- </a>
65		- </div>
66		- <div class="col-xs-6 text-center">
67		- <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false">
68		- <img src="$xwiki.getURL('Main.WebHome','download','filepath=Microsoft_Azure-Logo.wine.png')" alt="Azure" style="max-height:50px;" />
69		- </a>
70		- </div>
	64	+ <div class="partner-footer">
	65	+ <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=true" class="footer-brand">
	66	+ First<span style="color:#004080;">Digital</span>
	67	+ </a>
	68	+ <span class="footer-divider">|</span>
	69	+ <a href="https://learn.firstdigital.com/bin/view/Main/?oidc.skipped=false" class="footer-brand azure-brand">
	70	+ Microsoft Azure
	71	+ </a>
71	71	</div>
72	72	</div>
73	73
74	74	<style>
	76	+ /* Container setup */
75	75	.modern-menu-container {
76		- max-width: 960px;
	78	+ max-width: 1000px;
77	77	margin: 0 auto;
78	78	padding: 20px;
	81	+ box-sizing: border-box;
79	79	}
80		- .modern-menu-container .row {
81		- display: flex;
82		- flex-wrap: wrap;
83		- margin-bottom: 20px;
	83	+
	84	+ /* CSS Grid Setup: 2 columns, equal width */
	85	+ .menu-grid {
	86	+ display: grid;
	87	+ grid-template-columns: repeat(2, 1fr);
	88	+ gap: 20px;
	89	+ width: 100%;
84	84	}
	91	+
	92	+ /* General Reset for links */
85	85	.menu-card-link {
	94	+ text-decoration: none !important;
86	86	display: block;
87		- text-decoration: none;
88		- margin-bottom: 15px;
	96	+ height: 100%;
89	89	}
	98	+
	99	+ /* Card Styling */
90	90	.menu-card {
91	91	background: #ffffff;
92	92	border-radius: 12px;
93		- padding: 15px;
	103	+ padding: 20px;
94	94	display: flex;
95	95	align-items: center;
96		- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	106	+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
97	97	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
98		- border: 1px solid #e0e0e0;
	108	+ border: 1px solid #eaeaea;
99	99	color: #333;
100		- height: 100%;
	110	+ height: 100%; /* Ensures cards in same row stretch to same height */
101	101	box-sizing: border-box;
102	102	}
	113	+
103	103	.menu-card-link:hover .menu-card {
104		- transform: translateY(-5px);
105		- box-shadow: 0 6px 12px rgba(0,0,0,0.15);
	115	+ transform: translateY(-3px);
	116	+ box-shadow: 0 6px 12px rgba(0,0,0,0.1);
	117	+ border-color: #c1c1c1;
106	106	}
	119	+
	120	+ /* Icon Container: Uniform circle for all icons */
107	107	.menu-icon-container {
108		- flex: 0 0 60px;
109		- height: 60px;
110		- background-color: #f8f9fa;
	122	+ flex: 0 0 56px; /* Fixed size for icon circle */
	123	+ height: 56px;
	124	+ background-color: #f4f6f8; /* Light grey background from original support icon */
111	111	border-radius: 50%;
112	112	display: flex;
113	113	align-items: center;
114	114	justify-content: center;
115		- margin-right: 15px;
116		- border: 1px solid #eaeaea;
	129	+ margin-right: 16px;
	130	+ overflow: hidden; /* Keeps logos within circle */
	131	+ border: 1px solid #e0e0e0;
117	117	}
	133	+
	134	+ /* Specific Logo Scaling */
118	118	.menu-icon {
119		- max-width: 80%;
120		- max-height: 80%;
121	121	object-fit: contain;
122	122	}
123		- .webex-icon { max-width: 90%; }
	138	+
	139	+ /* Webex (Logo is wide, fits best at 85% width) */
	140	+ .webex-logo {
	141	+ width: 85%;
	142	+ height: auto;
	143	+ }
	144	+
	145	+ /* MS Teams (Icon is square, fits best at 75% width) */
	146	+ .teams-logo {
	147	+ width: 75%;
	148	+ height: auto;
	149	+ }
	150	+
	151	+ /* FirstDigital (Logo is wide, fits best at 90% width) */
	152	+ .firstdigital-logo {
	153	+ width: 90%;
	154	+ height: auto;
	155	+ }
	156	+
	157	+ /* Support Icon (SVG styling) */
	158	+ .support-icon {
	159	+ width: 60%;
	160	+ height: 60%;
	161	+ }
	162	+
	163	+ /* Text Area */
124	124	.menu-text {
125	125	flex: 1;
126	126	display: flex;
127	127	flex-direction: column;
	168	+ justify-content: center;
128	128	}
	170	+
129	129	.menu-title {
130	130	font-size: 16px;
131	131	line-height: 1.4;
132	132	font-weight: 600;
	175	+ color: #1a1a1a;
133	133	}
	177	+
134	134	.menu-subtitle {
135	135	font-size: 13px;
136	136	color: #666;
137	137	margin-top: 4px;
	182	+ font-weight: 400;
138	138	}
	184	+
	185	+ /* Partner footer adjustments */
139	139	.partner-footer {
140	140	margin-top: 40px;
141	141	padding-top: 20px;
142	142	border-top: 1px solid #eee;
143		- justify-content: center;
144		- }
145		- .partner-footer .text-center {
146		- flex: 1;
147	147	display: flex;
148	148	justify-content: center;
149	149	align-items: center;
	193	+ gap: 15px;
	194	+ font-family: Arial, sans-serif;
150	150	}
151		- @media (min-width: 768px) {
152		- .menu-card-link {
153		- flex: 0 0 50%;
154		- max-width: 50%;
155		- padding: 0 10px;
156		- box-sizing: border-box;
	196	+
	197	+ .footer-brand {
	198	+ font-weight: 700;
	199	+ font-size: 14px;
	200	+ color: #0060ff; /* Primary brand blue */
	201	+ text-decoration: none !important;
	202	+ }
	203	+
	204	+ .azure-brand {
	205	+ color: #0078d4; /* Azure blue */
	206	+ }
	207	+
	208	+ .footer-divider {
	209	+ color: #ccc;
	210	+ font-weight: 300;
	211	+ }
	212	+
	213	+ /* Responsive Breakpoints: Mobile */
	214	+ @media (max-width: 768px) {
	215	+ .menu-grid {
	216	+ grid-template-columns: 1fr; /* Stack to 1 column on mobile */
157	157	}
	218	+ .modern-menu-container {
	219	+ padding: 10px;
	220	+ }
	221	+ .menu-card {
	222	+ padding: 15px;
	223	+ }
158	158	}
159	159	</style>
160	160	{{/html}}

55da30a8-a01a-4c4b-a486-a95baf3bc33b

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.aaronblackburnfirstdigitalcom

Size

...	...	@@ -1,1 +1,0 @@
1		-294.4 KB

Content

firstdigitalhome_logo

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.aaronblackburnfirstdigitalcom

Size

...	...	@@ -1,1 +1,0 @@
1		-12.4 KB

Content