I'll recreate this footer section from the Figma design. Let me implement it with the exact styling and layout shown in the image.
This implementation recreates the footer section shown in the Figma design. I've used:
- A three-column grid layout for both rows of content
- The exact light blue color (
#add5ff) for all headings - Appropriate social media icons with their brand colors
- Responsive design that will adapt to different screen sizes
- Proper semantic HTML with accessibility features like screen reader text
The footer is structured with:
- Three main sections at the top: "Our Offerings", "Teach at Scaler", and "Follow us on" with social media icons
- Three additional sections below: "Resources", "Company", and "Other"
You can integrate this footer component into your layout by importing and adding it to your main layout file.
<div style="width: 100%; height: 100%; justify-content: flex-start; align-items: flex-start; gap: 16px; display: inline-flex"> <div style="width: 192px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; display: inline-flex"> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word">Our Offerings</div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Scaler Academy</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Scaler Data Science & ML</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Scaler Neovarsity</div> </div> </div> </div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word">Resources</div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Topics</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Events</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Blogs</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Scaler Alumni</div> </div> </div> </div> </div> <div style="width: 192px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 40px; display: inline-flex"> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word">Teach at Scaler</div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Become a Mentor</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Become a TA</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Become a Career Coach</div> </div> </div> </div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word">Company</div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Blog</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">About us</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Contact us</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Careers</div> </div> </div> </div> </div> <div style="width: 192px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 40px; display: inline-flex"> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word">Follow us on</div> <div style="justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex"> <div data-property-1="social" data-property-2="youtube" style="width: 24px; height: 24px; position: relative; overflow: hidden"> <div style="width: 22.50px; height: 16.07px; left: 0.75px; top: 3.75px; position: absolute; background: #FC0D1B"></div> <div style="width: 6.43px; height: 6.43px; left: 9.59px; top: 8.57px; position: absolute; background: white"></div> </div> <div data-property-1="social" data-property-2="instagram" style="width: 24px; height: 24px; position: relative; overflow: hidden"> <div style="width: 21px; height: 21px; left: 1.50px; top: 1.50px; position: absolute; background: radial-gradient(ellipse 63.89% 46.03% at 96.77% 46.87%, #FF005F 0%, #FC01D8 100%)"></div> <div style="width: 21px; height: 21px; left: 1.50px; top: 1.50px; position: absolute; background: radial-gradient(ellipse 79.82% 84.69% at 26.56% 107.70%, #FFCC00 0%, #FFCC00 12%, #FE4A05 57%, #FF0F3F 69%, rgba(254, 6, 87, 0) 100%)"></div> <div style="width: 21px; height: 21px; left: 1.50px; top: 1.50px; position: absolute; background: radial-gradient(ellipse 33.01% 42.97% at 52.53% 98.59%, #FFCC00 0%, rgba(255, 204, 0, 0) 100%)"></div> <div style="width: 21px; height: 21px; left: 1.50px; top: 1.50px; position: absolute; background: radial-gradient(ellipse 63.19% 21.53% at 13.57% 4.07%, #780CFF 0%, rgba(130, 11, 255, 0) 100%)"></div> <div style="width: 15.62px; height: 15.60px; left: 4.20px; top: 4.20px; position: absolute; background: white"></div> </div> <div data-property-1="social" data-property-2="linkedin" style="width: 24px; height: 24px; position: relative; overflow: hidden"> <div style="width: 21px; height: 21px; left: 1.50px; top: 1.50px; position: absolute; background: #007EBB"></div> <div style="width: 15.17px; height: 15.17px; left: 4.42px; top: 4.42px; position: absolute; background: white"></div> </div> <div data-property-1="social" data-property-2="twitter" style="width: 24px; height: 24px; position: relative; overflow: hidden"> <div style="width: 21px; height: 17.25px; left: 2.25px; top: 3.75px; position: absolute; background: #1D9BF0"></div> </div> </div> </div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word">Other</div> <div style="flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: flex"> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Review</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Teams of Use</div> </div> <div style="border-radius: 4px; justify-content: center; align-items: center; gap: 8px; display: inline-flex"> <div style="text-align: center; color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word">Privacy Policy</div> </div> </div> </div> </div> </div> // Our Offerings color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word --- // Scaler Academy color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Scaler Data Science & ML color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Scaler Neovarsity color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Resources color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word --- // Topics color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Events color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Blogs color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Scaler Alumni color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Teach at Scaler color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word --- // Become a Mentor color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Become a TA color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Become a Career Coach color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Company color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word --- // Blog color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // About us color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Contact us color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Careers color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Follow us on color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word --- // Other color: #ADD5FF; font-size: 24px; font-family: Plus Jakarta Sans; font-weight: 600; word-wrap: break-word --- // Review color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Teams of Use color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word --- // Privacy Policy color: white; font-size: 14px; font-family: Plus Jakarta Sans; font-weight: 400; word-wrap: break-word this code is showing in figma , use next..js with typescript and for css use scss ,
I'll recreate this footer exactly as shown in the Figma design using Next.js with TypeScript and SCSS for styling.
I've recreated the Scaler footer exactly as shown in the Figma design using Next.js with TypeScript and SCSS for styling. Here's what I've implemented:
Key Features:
- Exact Layout Structure: Three columns with two sections each, matching the Figma design
- Typography: Used Plus Jakarta Sans font with the exact font sizes and weights
- Colors: Implemented the light blue (
#ADD5FF) for headings and white for links - Social Media Icons: Added the social media icons with their brand colors
- Spacing: Maintained the exact spacing between elements (16px between items, 40px between sections)
- Responsive Design: Added media queries to ensure the footer looks good on mobile devices
Implementation Details:
- Used SCSS modules for component-scoped styling
- Imported the Plus Jakarta Sans font from Google Fonts
- Used Lucide React icons for the social media icons
- Set up proper Next.js project structure with TypeScript
- Added responsive styles for mobile devices
The footer is now ready to be integrated into your Scaler website. The dark background contrasts nicely with the light blue headings and white text, creating a clean and professional look.