🥭 Paper Boat Drinks Website

A modern, responsive React web application showcasing Paper Boat's traditional Indian beverages with smooth GSAP animations and an intuitive user experience.

---

🚀 Project Overview

The Paper Boat Drinks Website is a complete redesign of the official Paper Boat website, built with a modern storytelling approach for India’s most beloved traditional beverage brand.
With immersive animations, interactive product showcases, and a seamless user journey, this redesigned experience is crafted to deliver a premium and engaging digital presence.

---

✨ Features

Core Pages

• Home Page: Multi-section landing page with GSAP-powered hero animations
• About Us: Company story, founders, and brand values
• Drinks Page: Product catalog with categories and detailed views
• Contact: Interactive forms and office location info
• Login/Signup: User Can Login and Signup

Interactive Components

• GSAP-powered animated hero sections
• Filterable product categories (8+ categories)
• Product modal with detailed info
• ScrollTrigger-based smooth transitions
• Fully responsive design for all devices

---

🎨 Design System

Color Palette

@theme {
  --color-primary: #f37021; /* Paper Boat Orange */
  --color-peach: #fce3ca; /* Light Peach */
  --color-cream: #fff8f0; /* Creamy White */
  --color-softpink: #f2d0a9; /* Soft Pink */
  --color-brown: #5d4037; /* Dark Brown */
  --color-lightgrey: #ececec; /* Light Grey */
}

Typography

• Primary Font: System UI with fallbacks

• Scaling: Fluid responsive typography using clamp()

• Font Weights: Bold, Black, Regular

🛠️ Tech Stack

Frontend

• React.js – Component-based UI framework

• Tailwind CSS – Utility-first CSS

• React Router – Client-side routing

• Context Api – For Save User's Login Data

• GSAP – Animation engine

Animation Libraries

• GSAP ScrollTrigger – Scroll-based animations

• GSAP TextPlugin – Text effects

• GSAP Observer – Interaction animations

🍹 Product Categories

• Traditional Drinks (6 products – Aamras, Jaljeera, Aam Panna, etc.)

• Sip and Snack (4 products – Nata de Coco series)

• Vitamin D Drinks (5 products – Fortified juices)

• Low Sugar (2 products – Health-conscious beverages)

• Dairy (1 product – Thandai)

• Fruit Juices (6 products – Swing series)

• Other Products (2 products – Coconut Water, Jeera Soda)

• Zero Sparkling Water (8 flavored sparkling varieties)

⚙️ Installation & Setup

• Prerequisites Node.js (v16 or higher)

Clone the repository

git clone <repository-url>
cd paper-boat

Install dependencies

npm install

Start development server

npm start

🎥 Animations

• Entrance Effects: Staggered & fade-in animations

• Scroll Animations: GSAP ScrollTrigger

• Hover Effects: 3D transform and scaling

• Page Transitions: Smooth component state changes

📱Responsive Design

Optimized for touch-friendly interactions, responsive images, and performance.

🚀 Deployment

Build for production

npm run build

Preview production build

npm run preview

🔮 Future Enhancements

• Shopping cart (E-commerce features)

• User authentication

• Payment integration

• Blog section for content marketing

• PWA (Offline support)

👥 Team

Founders:

• Neeraj Kakkar: CEO & Founder (Wharton Business School, Ex-Coca-Cola)

• Neeraj Biyani: Co-founder & COO

• James Nuttall: Co-founder & Former CFO (Wharton MBA, Ex-Dow Chemicals)

• Suhas Misra: Co-founder & Director (IIM Calcutta, Ex-Coca-Cola)

📄 License

This is a redesigned version of the Paper Boat website, recreated with my own UI/UX ideas and animations for portfolio/demo purposes.

Original brand content and imagery belong to Paper Boat (Hector Beverages Pvt. Ltd.).

---

⭐ Show Some Love

If you like this redesign or found it inspiring, give a star ⭐ to my project on GitHub and share your feedback!

---

👨‍💻 About Me

I’m Divyanshu Batwal, a passionate frontend developer specializing in React.js, animations (GSAP), and UI/UX design.
I recreated the Paper Boat website to explore modern design trends, smooth animations, and storytelling UI.

---

📞 Contact

Email: divyanshubatwal67@gmail.com
Portfolio: https://devloper-divyanshu.netlify.app/
GitHub: https://github.com/code-with-divyanshu
Website: https://paper-boat-alpha.vercel.app/

---