A fully responsive, modern, and interactive landing page for CodeCraft, a next-generation online code editor. This project is designed to showcase features, performance, use cases, and user engagement for developers while providing a premium, production-level user experience.
The landing page includes the following key sections and features:
-
Navbar
- Fully responsive with desktop and mobile menus
- Smooth animations and gradient highlights
- GitHub CTA with stars counter
- Login and Launch Editor buttons
-
Hero Section
- Modern, interactive hero with gradient overlays
- Code editor illustration / preview
- Strong CTA for onboarding
-
Trusted By Section
- Showcases logos of companies or developers using CodeCraft
- Elegant gradient divider and tagline
-
Features Section
- Interactive feature cards with gradient accents
- Hover effects for “Learn more” hints
- Modern, code-editor focused design
-
Live Editor Preview Section
- Embeddable editor component demo
- Instant preview of code snippets
- Fully interactive and responsive
-
How It Works Section
- Step-by-step guide with icons
- Interactive hover effects
- Clear, user-friendly layout
-
AI / Smart Features Section
- Highlights AI-powered code suggestions
- Smart code completion, refactoring, and insights
- Gradient highlight cards with modern hover animations
-
Performance & Tech Section
- Details on framework, tech stack, and optimization
- Modern code-like visual design
-
Use Cases Section
- Developer-oriented real-world scenarios
- Highlighted with cards and gradient accents
-
Pricing Preview Section
- Clean pricing cards
- Interactive hover and active states
- Gradient accents for featured plans
-
Testimonials Section
- User reviews with profile avatars
- Smooth card hover animations
- Fully responsive layout
-
FAQ Section
- Accordion with gradient accent on open
- Code-editor style design for questions
- Fully responsive with icon containers
-
CTA Section
- Launch editor call-to-action
- Gradient buttons and keyboard hint icon
- Eye-catching, interactive design
-
Footer
- Modern footer with links, social icons, and newsletter
- Gradient highlights, rounded buttons, and hover effects
- Fully responsive and production-ready
-
Scroll to Top Button
- Floating gradient button
- Smooth scroll with icon and label
- Interactive hover and glow effects
- Next.js (App Router)
- React.js
- Tailwind CSS (fully responsive design)
- Lucide-React (icons)
- ShadcnUI
- Modern gradient overlays, hover effects, and backdrop blur for a premium UI
- Fully mobile-first and responsive
- Modern code-editor landing page UI
- Interactive animations on hover and click
- Reusable feature cards, accordions, and CTA buttons
- Smooth scroll to top functionality
- Production-ready gradient, shadow, and blur effects
- Clone the repository:
git clone https://github.com/pawantech12/codecraft.git- Install dependencies:
cd codecraft
pnpm install- Run the development server:
pnpm run dev- Open http://localhost:3000 in your browser.
- Code-Editor Inspired: Gradient cards, rounded panels, and glowing effects mimic modern IDEs.
- Interactive Animations: Hover, scale, glow, and gradient overlays create a premium feel.
- Accessibility: Keyboard navigation, semantic HTML, and ARIA attributes included.
- Designed mobile-first
- Fully responsive grids, sections, and buttons
- Mobile sheet navigation with gradient glow
- Scroll-to-top button for smooth navigation
You can view the project live here: https://codecraft-red.vercel.app/
Feel free to use, modify, and distribute.