2 - Intermediate
SaaS Landing Page
Sleek SaaS landing page with multiple sections and mobile view
- š Structuring layouts and creating a multi-sectioned landing page.
- šØ Designing visually appealing interfaces using CSS or Tailwind.
- š± Implementing fully responsive designs for mobile and desktop.
- š Organizing complex content, including grids and charts.
- š ļø Managing state for interactive elements like pricing toggles and menus.
Navbar displays the logo, navigation links, and a 'Sign Up' button.
Navbar works as a hamburger menu in mobile view.
Hero section includes a title, 3 feature bullet points, and a 3D hero image on the right.
Logos card showcases logos of companies using the SaaS.
Features section contains a title, subtitle, and a bento grid of feature cards.
Each feature card includes a name, description, and a background image.
Testimonials section has a title, subtitle, and a grid of testimonials.
Each testimonial includes a face, name, position, and testimonial description.
Pricing section includes a title, a monthly/yearly toggle, and 3 pricing cards for Standard, Premium, and Enterprise plans.
Each card has a title, subtitle, amount, a 'Get Started Now' button, and a list of features.
FAQ section contains a title, subtitle, and a grid of cards.
Each FAQ card includes an icon, question, and answer.
Get in touch section has a title, subtitle, and a 'Get In Touch' button.
Contact section contains a form on the right with an email address input, message input, and 'Send' button.
The contact section contains email, phone, address, and social link details.
Footer has a wave border on top and company logo, links, and a newsletter section.
The newsletter section has an email input and a Subscribe button.
The page works in desktop and mobile views.
- š Structuring layouts and creating a multi-sectioned landing page.
- šØ Designing visually appealing interfaces using CSS or Tailwind.
- š± Implementing fully responsive designs for mobile and desktop.
- š Organizing complex content, including grids and charts.
- š ļø Managing state for interactive elements like pricing toggles and menus.
Implement a theme toggle.
Add animations for section transitions or element loading.
Integrate form validation and error messages for the contact form.
Add a Sign Up page styled consistently with the landing page.
Convert the testimonials section into an infinite carousel.
Show currency and pricing based on the viewer's country.
Add analytics tracking to capture user interactions across the page.
- Click on the 'Download Design' button to get the .fig file.
- Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
- Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
- Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
- Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
- Submit your solution link here and try to get a perfect score!