🚀 Fizzi - A 3D Interactive Soda Landing Page

Welcome to Fizzi - where web development meets refreshing innovation! This project showcases a stunning 3D-animated landing page for a fictional soda brand, demonstrating the powerful combination of modern web technologies and creative design.

✨ Features

• Immersive 3D product visualization using Three.js and React Three Fiber
• Smooth scroll-based animations powered by GSAP
• Dynamic content management through Prismic CMS
• Fully responsive design with Tailwind CSS
• Built with TypeScript for enhanced code reliability
• Server-side rendering with Next.js 14
• Optimized performance and SEO

🛠️ Tech Stack

• Frontend Framework: Next.js 14
• 3D Graphics: Three.js with React Three Fiber
• Animation: GSAP (GreenSock Animation Platform)
• CMS: Prismic Headless CMS
• Styling: Tailwind CSS
• Language: TypeScript
• Deployment: Vercel

🌟 Live Demo

Experience Fizzi in action: https://fizzicodex.vercel.app/

📝 Project Structure

fizzi/
├── components/       # React components
├── models/          # 3D models and assets
├── pages/           # Next.js pages
├── prismic/         # Prismic configuration
├── public/          # Static assets
├── styles/          # Global styles
├── types/           # TypeScript types
└── utils/           # Utility functions

🎨 Design Philosophy

Fizzi combines the power of 3D web graphics with smooth animations to create an engaging product showcase. The design focuses on:

• Immersive user experience through interactive 3D elements
• Smooth scroll-based animations that tell a story
• Clean, modern UI that puts the product center stage
• Optimal performance across all devices

🔧 Development Features

• 3D Model Integration: Custom 3D soda bottle model with realistic materials and lighting
• Scroll Animations: Synchronized animations triggered by scroll events
• CMS Integration: Flexible content management through Prismic's intuitive interface
• Type Safety: Full TypeScript implementation for robust code
• Responsive Design: Seamless experience across all device sizes
• Performance Optimization: Lazy loading, code splitting, and asset optimization

📱 Responsive Design

The site is fully responsive with carefully crafted breakpoints:

• Mobile: 320px - 767px
• Tablet: 768px - 1023px
• Desktop: 1024px and above

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

🙏 Acknowledgments

Special thanks to:

• The Three.js community for amazing 3D web graphics tools
• Prismic team for their excellent CMS platform
• Vercel for their superb hosting and deployment platform