ADmyBRAND AI Suite – Modern SaaS Landing Page 🌐🚀

A beautifully crafted, responsive, and animated landing page built for the fictional ADmyBRAND AI Suite – an AI-powered marketing tool. This project demonstrates advanced frontend development using AI-assisted tools combined with custom design, component architecture, and modern development practices.

✨ Live Demo

👉 View on Vercel

---

📌 Features

• 🎯 Hero Section with headline, subtext, CTA, and image
• ✅ Features Section with 6+ feature cards and icons
• 💰 Pricing Section with 3 tier cards and comparisons
• 🌟 Testimonials Carousel with avatar images
• ❓ FAQ Accordion Section
• 📩 Contact Form with validation (React Hook Form + Zod)
• 👇 Smooth Scrolling Animations (Framer Motion)
• 🌘 Dark/Light Mode Toggle (via next-themes)
• 📱 Mobile-first Responsive Design
• 🧩 Reusable Component Library (10+ components)
• ⚡ Fast Loading, optimized images and clean code
• 🎥 Optional Demo Video/Animation Block (custom layout)

---

🛠️ Tech Stack

• Framework: Next.js 15 (App Router, TypeScript)
• Styling: Tailwind CSS + tailwindcss-animate + clsx
• Animations: Framer Motion
• Form Validation: React Hook Form + Zod
• Component Libraries: Radix UI, Lucide Icons, Shadcn-Style System
• Theme Management: next-themes
• Carousel: Embla Carousel
• Design Trends: Glassmorphism, Smooth Micro-interactions, Subtle Depth

---

📁 Folder Structure

my-landing-page/
│
├── app/                  # Next.js app directory
│   ├── page.tsx         # Main landing page
│   └── layout.tsx       # Layout wrapper
│
├── components/          # Reusable UI components
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   ├── Toggle.tsx       # Theme toggle button
│   └── MotionWrapper.tsx
│
├── public/              # Static assets like images
│   └── img/
│
├── styles/              # Global styles
│   └── globals.css
│
├── tailwind.config.ts   # Tailwind CSS config
├── postcss.config.js
├── tsconfig.json
├── package.json
└── README.md            # Project instructions

---

⚙️ How to Setup Locally

1. 📦 Prerequisites

• Install latest Node.js: https://nodejs.org
• Update npm to the latest version:

npm install -g npm@latest

---

2. 🚀 Clone & Install

git clone https://github.com/your-username/my-landing-page.git
cd my-landing-page
npm install

---

3. 🧪 Run Locally

npm run dev

Visit: http://localhost:3000

---

🚀 Deploy to Vercel

1. Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/my-landing-page.git
git push -u origin main

2. Deploy on Vercel

• Go to https://vercel.com
• Click “New Project”
• Import your GitHub repo
• Click “Deploy”

---

💡 Features

• ✅ Light/Dark toggle with modern UI
• ✅ Scroll motion effects (up/down)
• ✅ Auto-focus & responsive navbar
• ✅ Animated dashboard opening
• ✅ No content hidden—every word is visible
• ✅ Fully mobile responsive

---

📸 Preview

*

---

🛠 Tech Stack

• React (Next.js)
• Tailwind CSS
• TypeScript
• Framer Motion

---

📬 Contact

Created by Ashwini Tripathi – feel free to contact me on [LinkedIn](https://linkedin.com/) or [[email@example.com](tripathiashwin2004@gmail.com].

📄 License
This project is licensed under the MIT License - see the LICENSE file for details.