Six Seven 🎨✨

A chaotic, colorful React playground featuring the magical numbers 6 and 7!

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🎯 Features

🏠 Home Page

• Animated hero section with gradient text
• 42 interactive colored squares (6×7!)
• Feature cards showcasing the 6-7 philosophy

🎮 Playground

• Magic counter with +6 and +7 buttons
• Animation controls with toggle switch
• Like counter with smooth animations
• Color selector with live preview
• Multiple interactive tabs

🖼️ Gallery

• 9 colorful gradient cards
• Animated stats bar
• Hover effects and transitions
• Interactive like and bookmark buttons

📊 Charts

• Line charts showing 6 vs 7 trends
• Bar chart of multiplication table
• Pie chart of color distribution
• Area chart for analytics
• Powered by Recharts

📝 Forms

• Interactive form with live preview
• Range slider for score tracking
• Newsletter subscription toggle
• Real-time validation
• Quick fill buttons

✨ Widgets

• Countdown timer (resets at 0)
• Live clock with date
• Random quote generator
• Dice roller with animations
• Progress tracker
• Color picker with presets

🛠️ Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS v4 - Styling
• shadcn/ui - Component library
• Framer Motion - Animations
• React Router - Navigation
• Recharts - Data visualization
• Lucide React - Icons

☁️ Deployment

This app is ready to deploy to Cloudflare Pages!

Quick Deploy Options:

1. GitHub Integration (Recommended)

   • Connect your repo to Cloudflare Pages
   • Automatic deployments on every push
   • Free hosting with global CDN

2. CLI Deployment

   npm run pages:deploy

See CLOUDFLARE.md for detailed deployment instructions.

🎨 The 6-7 Philosophy

• 6 - The perfect number
• 7 - The lucky number
• 13 - Their sum (6+7)
• 42 - Their product (6×7) - The answer to everything!
• 67 - The magic combination

📁 Project Structure

src/
├── components/          # Reusable components
│   ├── ui/             # shadcn/ui components
│   ├── Navigation.tsx  # Main navigation
│   ├── Layout.tsx      # App layout
│   └── [widgets]       # Custom widgets
├── pages/              # Page components
│   ├── HomePage.tsx
│   ├── PlaygroundPage.tsx
│   ├── GalleryPage.tsx
│   ├── ChartsPage.tsx
│   ├── FormsPage.tsx
│   └── WidgetsPage.tsx
├── lib/                # Utilities
│   └── utils.ts
└── App.tsx             # Root component

🎭 Interactive Elements

• ✅ Animated buttons and cards
• ✅ Hover effects everywhere
• ✅ Live data updates
• ✅ Form validation
• ✅ Color theming
• ✅ Smooth transitions
• ✅ Responsive design

🌈 Color Palette

• Purple: #8b5cf6
• Pink: #ec4899
• Blue: #3b82f6
• Green: #10b981
• Yellow: #f59e0b
• Red: #ef4444

📜 License

MIT License - Feel free to use this chaotic masterpiece!

🎉 Have Fun!

Explore all the pages, click all the buttons, and enjoy the colorful chaos of Six Seven!