🐾 CodePup

CodePup is an AI-powered, visually stunning platform crafted to empower developers and learners with tools, insights, and interactive experiences.
Built using React and Tailwind CSS CodePup blends futuristic aesthetics with clean, modular code and smooth animations.

---

🚀 Live Demo

🔗 Deployed Site: codepup-ai.vercel.app
🔗 GitHub Repository: https://github.com/Rhythm-inCode/CodePup

---

🧠 Tech Stack

Category	Technologies Used
Framework	React
Styling	Tailwind CSS
Animations	Framer Motion
Deployment	Vercel
Version Control	Git + GitHub

---

✨ Key Features

• 🌌 Animated Neon Universe Background — glowing blue particles drifting in smooth motion.
• ⚡ Techy Neon UI — futuristic look with glassmorphism and soft shadows.
• 💫 Framer Motion Effects — smooth fades, hover transitions, and scroll reveals.
• 🧩 Reusable Components — modular TypeScript-based architecture.
• 🖼️ Gallery Section — showcases visuals and mockups beautifully.
• 📱 Responsive Design — optimized across all screen sizes.
• 🔗 Instant Deployment — via Vercel CI/CD integration.

---

🧩 Project Structure

The project is organized for scalability and clarity:

• src/components/ – Reusable UI components (Navbar, Footer, PromptBox, ThemeToggle, etc.)
• src/sections/ – Main landing page sections: Hero, Gallery, FAQs, Pricing, Testimonials
• src/hooks/ – Custom hooks for theme switching and viewport tracking
• src/assets/ – Images, icons, and SVG graphics
• src/utils/ – Constants and helper files

---

💡 Key Sections

🪐 Hero Section

• Futuristic design with cosmic and neon-inspired visuals
• Smooth animations and dynamic reveal of templates & examples
• Interactive “Explore Templates” and “See Examples” buttons
• Responsive and visually captivating hero copy

🖼️ Gallery Section

• Showcases websites created using CodePup
• Engaging hover effects and subtle animations
• Responsive carousel layout optimized for performance

💬 Testimonials Section

• Clean and balanced card design with soft glow highlights
• Realistic, professional layout that adds credibility

❓ FAQs Section

• Accordion-style toggles for easy browsing
• Smooth expand/collapse animations

💰 Pricing Section

• Simple yet impactful pricing cards
• Highlighted “Best Value” plan with subtle glow animation

---

🧩 Setup & Installation

# 1️⃣ Clone the repository
git clone https://github.com/Rhythm-inCode/CodePup.git

# 2️⃣ Navigate into the folder
cd codepup-landing

# 3️⃣ Install dependencies
npm install

# 4️⃣ Start the development server
npm run dev
The app will run locally on:
🔹 http://localhost:5173/ or http://localhost:3000/ (depending on setup)

🪩 Deployment
Hosted on Vercel for lightning-fast deployment.

Each commit on main auto-triggers a rebuild.

Live link: https://codepup-ai.vercel.app

🧑‍💻 Author
👤 Rhythm
🎓 B.Tech in Computer Science Engineering — Jain University
💻 Front-End Developer | Innovating with design and code synergy
📫 Email: rhythmln1104@gmail.com

💙 Acknowledgements
Special thanks to:

React, Tailwind, and Framer Motion for powering this design.

Vercel for effortless hosting.

Everyone pushing the boundaries of creative tech.

⭐ Support
If you liked this project, don’t forget to star the repo 🌟