├── LICENSE ├── README.md ├── CONTRIBUTING.md └── tools-and-resources.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Buddhsen Tripathi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Landing Page Inspirations 2 | 3 | A curated collection of high-quality landing page designs from various industries. This repository serves as a resource for designers, developers, and product teams looking for inspiration and best practices. 4 | 5 | ## Why This Repo? 6 | - Well-organized categories: SaaS, E-commerce, AI Tools, Fintech, and more. 7 | - UI/UX breakdowns with typography, color palettes, and key features. 8 | - Code snippets and reusable UI components. 9 | - Figma and Tailwind resources to speed up design workflows. 10 | - Open for community contributions. 11 | 12 | ## Categories 13 | - SaaS 14 | - Agency 15 | - Portfolio 16 | - E-commerce 17 | - Fintech 18 | - AI Tools 19 | - More coming soon... 20 | 21 | ## Contributing 22 | We welcome contributions! If you have a great landing page to share, follow the [Contribution Guide](CONTRIBUTING.md). 23 | 24 | ### Steps: 25 | 1. Fork the repo. 26 | 2. Add a new landing page inspiration in the relevant category. 27 | 3. Submit a pull request. 28 | 29 | Top contributors will be featured in the showcase section. 30 | 31 | ## UI Components & Code Snippets 32 | This repo also includes reusable UI components such as: 33 | - Hero sections 34 | - Pricing cards 35 | - Call-to-action sections 36 | - Navigation and footers 37 | - Buttons and Other UI elements 38 | 39 | ## Resources & Tools 40 | - Figma UI kits 41 | - Tailwind CSS components 42 | - AI-powered design tools 43 | - Best practices for landing pages 44 | 45 | [Check out Resources](tools-and-resources.md) 46 | 47 | ## Get Featured 48 | Want to showcase your landing page or UI component, or Figma design to be featured? 49 | Fork the repo, submit a pull request or reach out on [𝕏](https://twitter.com/_TripathiJi). 50 | 51 | ## Connect 52 | - 𝕏: [@_TripathiJi](https://twitter.com/_TripathiJi) 53 | - Newsletter (coming soon) 54 | 55 | If you find this repo useful, consider starring it. 56 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Landing Page Inspirations 2 | 3 | Thank you for considering a contribution!
This project is a community-driven collection of landing page inspirations and UI/UX breakdowns. 4 | 5 | ## How to Contribute 6 | 7 | ### Submitting a New Landing Page 8 | 1. **Fork** this repository. 9 | 2. **Create a new markdown file** under `inspirations//`. 10 | 3. Add the following format inside the file: 11 | 12 | ```md 13 | ## [Landing Page Name](https://example.com) 14 | 15 | **Category:** SaaS / E-commerce / Portfolio / etc. 16 | **Screenshot:** ![screenshot](../assets/example.png) 17 | **Typography:** Font Name (Google Fonts / Custom) 18 | **Color Palette:** `#123456`, `#abcdef`, `#654321` 19 | **Key Features:** 20 | - Clean and minimal hero section 21 | - Smooth animations 22 | - Strong call-to-action 23 | 24 | ### Why it works? 25 | A short explanation of what makes this landing page effective. 26 | ``` 27 | 4. Add an image in `assets` with the filename matching your markdown file. 28 | 5. Submit a pull request to the main branch. 29 | 30 | ### Adding UI Components 31 | We also accept reusable UI components such as buttons, pricing cards, and navigation bars. 32 | - Add your component inside the `components` folder. 33 | - Ensure it's responsive. 34 | - If it's a Figma-based contribution, include a preview image. 35 | 36 | ### Contribution Guidelines 37 | - Keep submissions clean and well-documented. 38 | - Ensure images are compressed (<500 KB). 39 | - For animations, include a GIF preview (optional). 40 | - Use the markdown template for inspirations. 41 | - Do not submit copyrighted designs. 42 | 43 | ## Recognition 44 | - Notable contributions will be highlighted on Twitter. 45 | 46 | ## Connect 47 | - 𝕏: [@_TripathiJi](https://x.com/_TripathiJi) 48 | - Newsletter (coming soon) 49 | 50 | If you find this project useful, consider contributing and starring the repo. 51 | -------------------------------------------------------------------------------- /tools-and-resources.md: -------------------------------------------------------------------------------- 1 | # Tools & Resources for Landing Page Design 2 | 3 | This document contains useful tools, resources, and references to help you create and analyze high-quality landing pages. 4 | 5 | ## 🛠 Design & Prototyping Tools 6 | - [Figma](https://www.figma.com/) – A collaborative UI design tool. 7 | - [Sketch](https://www.sketch.com/) – A vector-based design tool for Mac users. 8 | - [Penpot](https://penpot.app/) – Open-source alternative to Figma. 9 | - [Framer](https://www.framer.com/) – Interactive design tool with built-in animations. 10 | 11 | ## 🎨 Color & Typography 12 | - [Google Fonts](https://fonts.google.com/) – Free and open-source font library. 13 | - [Fontshare](https://www.fontshare.com/) – High-quality free fonts for designers. 14 | - [Coolors](https://coolors.co/) – Color palette generator. 15 | - [Color Hunt](https://colorhunt.co/) – Curated color palettes for inspiration. 16 | 17 | ## 🎭 UI Components & Frameworks 18 | - [Tailwind UI](https://tailwindui.com/) – Pre-designed components for Tailwind CSS. 19 | - [Radix UI](https://www.radix-ui.com/) – Accessible and unstyled UI primitives. 20 | - [Chakra UI](https://chakra-ui.com/) – Simple, modern React components. 21 | 22 | ## 🚀 Inspiration & Landing Page Galleries 23 | - [Landings.dev](https://landings.dev/) – A curated list of landing pages with breakdowns. 24 | - [Lapa Ninja](https://www.lapa.ninja/) – Handpicked landing pages for inspiration. 25 | - [SaaS Landing Pages](https://saaslandingpage.com/) – Examples from SaaS startups. 26 | 27 | ## 📊 Analytics & Performance Tools 28 | - [Google PageSpeed Insights](https://pagespeed.web.dev/) – Analyze landing page speed & performance. 29 | - [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) – Open-source tool for performance audits. 30 | - [GTmetrix](https://gtmetrix.com/) – Website speed and performance testing. 31 | - [Hotjar](https://www.hotjar.com/) – Heatmaps and session recordings for user behavior analysis. 32 | 33 | ## 📏 Best Practices & Guides 34 | - [Laws of UX](https://lawsofux.com/) – Psychological principles for better design. 35 | - [Growth.Design](https://growth.design/) – Case studies on UX and conversion optimization. 36 | - [Refactoring UI](https://www.refactoringui.com/) – Practical tips for improving UI design. 37 | - [Conversion Rate Optimization Guide](https://neilpatel.com/conversion-rate-optimization/) – Tips for optimizing landing page conversions. 38 | 39 | ## Want to Suggest a Resource? 40 | If you know a great tool or resource that should be listed here, submit a **Pull Request** or open an **Issue**. 41 | 42 | ⭐ If you find this repo useful, consider **starring** it to support the project! 43 | --------------------------------------------------------------------------------