🌐 QuizFlow Landing Page

The official web portal for the QuizFlow mobile application.

Features • Installation • Tech Stack • Live Demo

The QuizFlow Landing Page is a high-performance, animated marketing site designed to convert visitors into app users. It features a modern, dark-themed UI with glassmorphism effects, interactive 3D elements, and smooth scroll animations.

• Dynamic Code Terminal: A custom typewriter effect simulating a developer's environment (JS, Python, Swift).
• Responsive Layout: Adapts from mobile to full-screen desktop experiences (100vh).

• 3D Coverflow: Powered by Swiper.js, displaying app screenshots in a premium carousel.
• Autoplay: Automatically cycles through the app's key screens.

• Glassmorphism: Navbar and cards feature blurred backgrounds for depth.
• Smooth Navigation: One-click smooth scrolling to all sections.
• Global Loader: A seamless "Uploading Knowledge..." initial loading state.

• Lazy Loading: Non-critical sections (Showcase, Reviews) are code-split using React.lazy.
• Image Optimization: loading="lazy" attributes on heavy media assets.

• Framework: Vite + React 18
• Styling: Tailwind CSS
• Animations: Framer Motion
• Carousel: Swiper.js
• Icons: Lucide React

Run the landing page locally in seconds.

1. Navigate to the directory

   cd landing-page

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Build for Production

   npm run build

landing-page/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── CodeTerminal.jsx # Animated typing effect
│   │   ├── Hero.jsx      # Main landing section
│   │   ├── Showcase.jsx  # Swiper carousel
│   │   └── ...
│   ├── App.jsx           # Main layout & Lazy loading logic
│   └── main.jsx          # Entry point
├── public/               # Static assets
└── vite.config.js        # Vite configuration