1 - Beginner
Productivity App Landing Page
Sleek and modern landing page for a productivity app with responsive design.
- š Writing proper HTML with semantic tags for better accessibility and SEO
- š± Making fully responsive designs using modern CSS techniques
- š¦ Implementing modern layouts like bento grids for feature sections
- šØ Positioning and styling SVGs for decorative and functional use
- š Maintaining a consistent design system with reusable colors and components
Navbar includes logo, section links, and a CTA button.
Navbar contains a hamburger menu in mobile screens.
Section links navigate user to section when clicked.
Hero section features an app image and CTA buttons for iOS and Android downloads.
Social proof section displays three key metrics.
Social proof section displays slider with logos.
Features section is structured using a bento grid layout to showcase app capabilities.
Testimonials section presents three user reviews, each with a photo and role.
Footer contains page links, social media icons, and a CTA button.
Design is fully responsive for both desktop and mobile.
- š Writing proper HTML with semantic tags for better accessibility and SEO
- š± Making fully responsive designs using modern CSS techniques
- š¦ Implementing modern layouts like bento grids for feature sections
- šØ Positioning and styling SVGs for decorative and functional use
- š Maintaining a consistent design system with reusable colors and components
Implement infinite scrolling logo slider in the social proof section
Add smooth scroll animations for section transitions
Enhance mobile menu with animated open/close interactions
Lazy load images for better performance
Add dark mode toggle and set default based on user preferences
- 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!