Skip to content

Commit 164cda1

Browse files
tdwhite0tdwhite0
committed
update footer
1 parent 43ca59f commit 164cda1

File tree

2 files changed

+170
-87
lines changed

2 files changed

+170
-87
lines changed

‎blocks/footer/footer.css‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
footer {
2-
background-color: #1a1a1a;
2+
background-color: #3c3c3c;
33
color: #fff;
44
font-size: var(--body-font-size-s);
55
}
@@ -14,8 +14,22 @@ footer .footer p {
1414
margin: 0;
1515
}
1616

17-
/* Footer wrapper layout */
17+
/* Footer wrapper - two column layout */
1818
footer .footer-wrapper {
19+
display: grid;
20+
grid-template-columns: 1fr;
21+
gap: 32px;
22+
}
23+
24+
@media (min-width: 768px) {
25+
footer .footer-wrapper {
26+
grid-template-columns: auto 1fr;
27+
gap: 48px;
28+
}
29+
}
30+
31+
/* Left column - logo, social, copyright */
32+
footer .footer-left {
1933
display: flex;
2034
flex-direction: column;
2135
gap: 24px;
@@ -28,30 +42,41 @@ footer .footer-logo {
2842
gap: 16px;
2943
}
3044

31-
footer .footer-logo img {
45+
footer .footer-logo a {
46+
display: flex;
47+
align-items: center;
48+
}
49+
50+
footer .footer-logo img,
51+
footer .footer-logo svg {
3252
height: 48px;
3353
width: auto;
3454
}
3555

3656
footer .footer-logo .tagline {
3757
font-style: italic;
38-
font-size: 1.25rem;
58+
font-size: 1.5rem;
59+
font-weight: 500;
3960
color: #fff;
40-
border-left: 1px solid #666;
61+
border-left: 2px solid #666;
4162
padding-left: 16px;
63+
margin-left: 4px;
4264
}
4365

4466
/* Social media icons */
4567
footer .footer-social {
4668
display: flex;
47-
gap: 16px;
69+
gap: 12px;
4870
align-items: center;
4971
}
5072

5173
footer .footer-social a {
5274
color: #fff;
5375
text-decoration: none;
5476
transition: color 0.2s ease;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
5580
}
5681

5782
footer .footer-social a:hover {
@@ -60,15 +85,29 @@ footer .footer-social a:hover {
6085

6186
footer .footer-social svg,
6287
footer .footer-social img {
63-
width: 24px;
64-
height: 24px;
88+
width: 20px;
89+
height: 20px;
90+
}
91+
92+
/* Copyright text */
93+
footer .footer-copyright {
94+
color: #999;
95+
font-size: var(--body-font-size-xs);
96+
margin: 0;
97+
}
98+
99+
/* Right column - navigation */
100+
footer .footer-right {
101+
display: flex;
102+
align-items: flex-end;
103+
justify-content: flex-end;
65104
}
66105

67106
/* Footer navigation links */
68107
footer .footer-nav {
69108
display: flex;
70109
flex-wrap: wrap;
71-
gap: 24px;
110+
gap: 32px;
72111
align-items: center;
73112
}
74113

@@ -77,36 +116,19 @@ footer .footer-nav a {
77116
text-decoration: none;
78117
font-size: var(--body-font-size-s);
79118
transition: color 0.2s ease;
119+
white-space: nowrap;
80120
}
81121

82122
footer .footer-nav a:hover {
83123
color: #ff6b6b;
84124
}
85125

86-
/* Footer bottom section */
126+
/* Bottom section - deprecated, keeping for backwards compatibility */
87127
footer .footer-bottom {
88-
display: flex;
89-
flex-direction: column;
90-
gap: 16px;
91-
padding-top: 24px;
92-
border-top: 1px solid #333;
93-
}
94-
95-
footer .footer-bottom-row {
96-
display: flex;
97-
flex-wrap: wrap;
98-
justify-content: space-between;
99-
align-items: center;
100-
gap: 16px;
128+
display: none;
101129
}
102130

103-
/* Copyright text */
104-
footer .footer-copyright {
105-
color: #999;
106-
font-size: var(--body-font-size-xs);
107-
}
108-
109-
/* Default block styling from fragment */
131+
/* Default block styling from fragment - fallback */
110132
footer .footer .default-content-wrapper {
111133
display: flex;
112134
flex-direction: column;
@@ -147,21 +169,8 @@ footer .footer .icon img {
147169
height: 24px;
148170
}
149171

150-
@media (width >= 900px) {
172+
@media (min-width: 900px) {
151173
footer .footer > div {
152174
padding: 40px 32px 24px;
153175
}
154-
155-
footer .footer-wrapper {
156-
flex-direction: row;
157-
flex-wrap: wrap;
158-
justify-content: space-between;
159-
align-items: flex-start;
160-
}
161-
162-
footer .footer-bottom {
163-
flex-direction: row;
164-
justify-content: space-between;
165-
align-items: center;
166-
}
167176
}

‎blocks/footer/footer.js‎

Lines changed: 117 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,124 @@
1-
import { getMetadata } from '../../scripts/aem.js';
2-
import { loadFragment } from '../fragment/fragment.js';
3-
41
/**
5-
* loads and decorates the footer
2+
* Builds and decorates the footer with Genpact-style layout
63
* @param {Element} block The footer block element
74
*/
85
export default async function decorate(block) {
9-
// load footer as fragment
10-
const footerMeta = getMetadata('footer');
11-
const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
12-
const fragment = await loadFragment(footerPath);
13-
14-
// decorate footer DOM
156
block.textContent = '';
7+
8+
// Create main footer container
169
const footer = document.createElement('div');
17-
while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
18-
19-
// Structure the footer content
20-
const wrapper = footer.querySelector('.default-content-wrapper');
21-
if (wrapper) {
22-
// Find and style logo
23-
const logoImg = wrapper.querySelector('picture img, img');
24-
if (logoImg) {
25-
logoImg.closest('p')?.classList.add('footer-logo-row');
26-
}
27-
28-
// Find and style social links (links with icons)
29-
const socialLinks = wrapper.querySelectorAll('a .icon, a > span.icon');
30-
if (socialLinks.length > 0) {
31-
socialLinks.forEach((icon) => {
32-
const link = icon.closest('a');
33-
if (link) {
34-
link.classList.add('footer-social-link');
35-
}
36-
});
37-
}
38-
39-
// Find copyright text (usually the last paragraph)
40-
const paragraphs = wrapper.querySelectorAll('p');
41-
if (paragraphs.length > 0) {
42-
const lastP = paragraphs[paragraphs.length - 1];
43-
if (lastP.textContent.toLowerCase().includes('copyright') || lastP.textContent.includes('©')) {
44-
lastP.classList.add('footer-copyright');
45-
}
46-
}
47-
}
48-
49-
block.append(footer);
10+
footer.className = 'footer-wrapper';
11+
12+
// Left column - logo, social, copyright
13+
const leftColumn = document.createElement('div');
14+
leftColumn.className = 'footer-left';
15+
16+
// Logo section
17+
const logoSection = document.createElement('div');
18+
logoSection.className = 'footer-logo';
19+
20+
const logoLink = document.createElement('a');
21+
logoLink.href = '/';
22+
logoLink.setAttribute('aria-label', 'Genpact Home');
23+
24+
// Genpact logo SVG
25+
const logoSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
26+
logoSvg.setAttribute('viewBox', '0 0 200 50');
27+
logoSvg.setAttribute('width', '160');
28+
logoSvg.setAttribute('height', '40');
29+
logoSvg.innerHTML = `
30+
<style>
31+
.logo-text { fill: #fff; font-family: Arial, sans-serif; font-weight: bold; font-size: 24px; }
32+
.logo-icon { fill: #c9a227; }
33+
</style>
34+
<g class="logo-icon">
35+
<polygon points="20,5 35,15 35,35 20,45 5,35 5,15"/>
36+
<polygon points="20,12 28,18 28,32 20,38 12,32 12,18" fill="#3c3c3c"/>
37+
<line x1="20" y1="5" x2="20" y2="12" stroke="#c9a227" stroke-width="2"/>
38+
<line x1="35" y1="15" x2="28" y2="18" stroke="#c9a227" stroke-width="2"/>
39+
<line x1="35" y1="35" x2="28" y2="32" stroke="#c9a227" stroke-width="2"/>
40+
<line x1="20" y1="45" x2="20" y2="38" stroke="#c9a227" stroke-width="2"/>
41+
<line x1="5" y1="35" x2="12" y2="32" stroke="#c9a227" stroke-width="2"/>
42+
<line x1="5" y1="15" x2="12" y2="18" stroke="#c9a227" stroke-width="2"/>
43+
</g>
44+
<text x="45" y="32" class="logo-text">genpact</text>
45+
`;
46+
logoLink.appendChild(logoSvg);
47+
logoSection.appendChild(logoLink);
48+
49+
// Tagline
50+
const tagline = document.createElement('span');
51+
tagline.className = 'tagline';
52+
tagline.textContent = 'on it';
53+
logoSection.appendChild(tagline);
54+
55+
leftColumn.appendChild(logoSection);
56+
57+
// Social media section
58+
const socialSection = document.createElement('div');
59+
socialSection.className = 'footer-social';
60+
61+
const socialLinks = [
62+
{ name: 'X', url: 'https://x.com/genpact', icon: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z' },
63+
{ name: 'Facebook', url: 'https://www.facebook.com/ProudToBeGenpact/', icon: 'M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z' },
64+
{ name: 'LinkedIn', url: 'https://www.linkedin.com/company/210064', icon: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' },
65+
{ name: 'YouTube', url: 'https://www.youtube.com/genpactltd', icon: 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' },
66+
];
67+
68+
socialLinks.forEach((social) => {
69+
const link = document.createElement('a');
70+
link.href = social.url;
71+
link.target = '_blank';
72+
link.rel = 'noopener noreferrer';
73+
link.setAttribute('aria-label', `Visit Genpact on ${social.name}`);
74+
75+
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
76+
svg.setAttribute('viewBox', '0 0 24 24');
77+
svg.setAttribute('width', '20');
78+
svg.setAttribute('height', '20');
79+
svg.setAttribute('fill', 'currentColor');
80+
81+
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
82+
path.setAttribute('d', social.icon);
83+
svg.appendChild(path);
84+
link.appendChild(svg);
85+
socialSection.appendChild(link);
86+
});
87+
88+
leftColumn.appendChild(socialSection);
89+
90+
// Copyright
91+
const copyright = document.createElement('p');
92+
copyright.className = 'footer-copyright';
93+
copyright.textContent = `Copyright \u00A9 Genpact ${new Date().getFullYear()}. All rights reserved.`;
94+
leftColumn.appendChild(copyright);
95+
96+
footer.appendChild(leftColumn);
97+
98+
// Right column - navigation links
99+
const rightColumn = document.createElement('div');
100+
rightColumn.className = 'footer-right';
101+
102+
const navSection = document.createElement('nav');
103+
navSection.className = 'footer-nav';
104+
105+
const navLinks = [
106+
{ text: 'Contact us', url: '/contact-us' },
107+
{ text: 'Locations', url: '/about-us/locations' },
108+
{ text: 'Our Purpose', url: '/about-us/purpose' },
109+
{ text: 'Privacy', url: '/privacy' },
110+
{ text: 'Terms and conditions', url: '/terms-and-conditions' },
111+
];
112+
113+
navLinks.forEach((navItem) => {
114+
const link = document.createElement('a');
115+
link.href = navItem.url;
116+
link.textContent = navItem.text;
117+
navSection.appendChild(link);
118+
});
119+
120+
rightColumn.appendChild(navSection);
121+
footer.appendChild(rightColumn);
122+
123+
block.appendChild(footer);
50124
}

0 commit comments

Comments
 (0)