{"id":27862545,"url":"https://github.com/makcoder-2004/next.js-landing-page","last_synced_at":"2026-04-12T15:43:29.079Z","repository":{"id":290394497,"uuid":"973849677","full_name":"MakCoder-2004/Next.JS-Landing-Page","owner":"MakCoder-2004","description":"A modern SaaS landing page built with Next.js, Tailwind CSS, and Framer Motion. This was my first complete frontend project, created with help from a YouTube tutorial to kickstart my journey into frontend development.","archived":false,"fork":false,"pushed_at":"2025-04-29T09:47:37.000Z","size":808,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-29T10:45:11.883Z","etag":null,"topics":["animation","css","framer-motion","frontend-web","javascript","landing-page","nextjs15","react","saas-application","tailwindcss"],"latest_commit_sha":null,"homepage":"https://next-js-landing-page-three-livid.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MakCoder-2004.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-27T21:31:17.000Z","updated_at":"2025-04-29T09:47:58.000Z","dependencies_parsed_at":"2025-04-28T16:48:13.486Z","dependency_job_id":null,"html_url":"https://github.com/MakCoder-2004/Next.JS-Landing-Page","commit_stats":null,"previous_names":["makcoder-2004/next-application","makcoder-2004/next.js-landing-page"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakCoder-2004%2FNext.JS-Landing-Page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakCoder-2004%2FNext.JS-Landing-Page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakCoder-2004%2FNext.JS-Landing-Page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakCoder-2004%2FNext.JS-Landing-Page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MakCoder-2004","download_url":"https://codeload.github.com/MakCoder-2004/Next.JS-Landing-Page/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252395097,"owners_count":21740962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","framer-motion","frontend-web","javascript","landing-page","nextjs15","react","saas-application","tailwindcss"],"created_at":"2025-05-04T20:30:26.681Z","updated_at":"2026-04-12T15:43:29.014Z","avatar_url":"https://github.com/MakCoder-2004.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SaaS Landing Page - Frontend Project\n\nThis is a modern, responsive SaaS landing page built using **Next.js**, styled with **Tailwind CSS**, and animated using **Framer Motion**. It serves as a professional landing page for a Software as a Service (SaaS) product.\n\n## 🚀 Project Purpose\n\nThe project was created as a hands-on learning experience to strengthen my frontend development skills. With guidance from a YouTube tutorial, this project represents my first complete frontend website and serves as a foundation for tackling more complex web applications in the future.\n\n## 🛠️ Tech Stack\n\n- **Framework**: [Next.js](https://nextjs.org/)\n- **Styling**: [Tailwind CSS](https://tailwindcss.com/)\n- **Animations**: [Framer Motion](https://www.framer.com/motion/)\n\n## 📁 Project Structure\n\nThe project is organized into reusable components and larger sections for maintainability:\n\n```\ncomponents/\n  ├─┐ Avatar.tsx\n  ├─┐ CustomButton.tsx\n  ├─┐ FeatureCard.tsx\n  ├─┐ IntegrationColumn.tsx\n  ├─┐ KeyboardKey.tsx\n  ├─┐ Pointers.tsx\n  └─┐ Tag.tsx\n\nsections/\n  ├─┐ CallToAction.tsx\n  ├─┐ Faqs.tsx\n  ├─┐ Features.tsx\n  ├─┐ Footer.tsx\n  ├─┐ Hero.tsx\n  ├─┐ Integrations.tsx\n  ├─┐ Introduction.tsx\n  ├─┐ LogoTicker.tsx\n  └─┐ Navbar.tsx\n```\n\n- **components/**: Small, reusable UI elements like buttons, avatars, and tags.\n- **sections/**: Larger page sections like the Hero, Features, and Footer.\n\n## ✨ Features\n\n- Fully responsive design\n- Smooth animations using Framer Motion\n- Tailwind CSS for rapid styling\n- Modular and reusable component-based structure\n\n## 📚 Learning Experience\n\nThis project helped me understand:\n- Component-based architecture with React/Next.js\n- Responsive design with Tailwind CSS\n- Animation handling with Framer Motion\n- File structure and code modularity best practices\n\n## 📸 Preview\n\n![Project Preview](./preview.png)\n\n## 🔗 Live Demo\n\n[Demo Website](https://next-js-landing-page-wheat.vercel.app/)\n\n## 🧠 Future Plans\n\n- Add form handling and validation\n- Integrate with backend or CMS\n- Explore TypeScript best practices more deeply\n- Implement dark mode\n\n---\n\nThanks for checking out my project! Feel free to leave feedback or suggestions to help me grow as a frontend developer.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakcoder-2004%2Fnext.js-landing-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakcoder-2004%2Fnext.js-landing-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakcoder-2004%2Fnext.js-landing-page/lists"}