🚀 TechFlow - Modern SaaS Website (Dark Mode Edition)

A stunning, modern SaaS website built with React, Vite, and Tailwind CSS featuring a premium dark mode design with cyberpunk aesthetics and advanced animations.

✨ Features

🎨 Design & UI

• Premium Dark Mode: Sophisticated dark theme with cyan/blue/purple accents
• Cyberpunk Aesthetics: Futuristic design with glowing effects and gradients
• Responsive Design: Fully responsive across all devices
• Modern Typography: Clean, bold fonts with gradient text effects
• Glass Morphism: Backdrop blur effects and translucent elements

🚀 Animations & Interactions

• Framer Motion: Smooth page transitions and micro-interactions
• Hover Effects: Interactive cards and buttons with scale/glow effects
• Scroll Animations: Elements animate as they come into view
• Loading States: Beautiful loading animations
• Click Effects: Ripple effects and spark animations

📱 Components

• Hero Section: Eye-catching landing area with animated elements
• Features Grid: Interactive feature cards with hover effects
• Stats Counter: Animated number counters with real-time updates
• Testimonials: Customer feedback carousel
• Pricing Cards: Subscription plans with hover animations
• Navigation: Sticky navbar with smooth scrolling
• Footer: Comprehensive site footer

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit http://localhost:5173

Build for Production

npm run build

Project Structure

src/
├── components/
│   ├── Navbar.jsx
│   ├── Hero.jsx
│   ├── Features.jsx
│   ├── Stats.jsx
│   ├── Testimonials.jsx
│   ├── Pricing.jsx
│   ├── ParallaxSection.jsx
│   ├── Footer.jsx
│   ├── Loader.jsx
│   └── ScrollToTop.jsx
├── App.jsx
├── main.jsx
└── index.css

🎨 Color Palette

The website uses a carefully crafted dark mode color palette:

• Primary: Cyan (#06B6D4) to Blue (#3B82F6)
• Secondary: Purple (#8B5CF6) to Pink (#EC4899)
• Accent: Emerald (#10B981) to Teal (#14B8A6)
• Background: Gray-900 (#111827) to Black (#000000)
• Text: White (#FFFFFF) with various opacity levels

🛠 Technologies Used

• React 18 - UI library with modern hooks
• Vite - Lightning-fast build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Advanced animation library
• Lucide React - Beautiful, consistent icon library
• React Intersection Observer - Efficient scroll-based animations

Features Implemented

Animations & Effects

• Loading screen with animated logo
• Parallax scrolling effects
• Hover animations and transitions
• Scroll-triggered animations
• Ripple effects on buttons
• Floating elements
• Gradient animations

Components

• Responsive navigation with mobile menu
• Hero section with interactive dashboard mockup
• Feature cards with hover effects
• Animated statistics counters
• Testimonials carousel
• Pricing cards with feature comparison
• Newsletter signup
• Comprehensive footer

Responsive Design

• Mobile-first approach
• Breakpoint-specific layouts
• Touch-friendly interactions
• Optimized for all screen sizes

Customization

The website is highly customizable through:

• Tailwind CSS configuration
• Color scheme variables
• Animation timing and effects
• Content and copy
• Component layouts

License

This project is open source and available under the MIT License.