https://dhruba-datta.netlify.app/assets/AquaPage-CKn1LH5-.js

1import{j as e}from"./vendor-motion-C0Ykwh7C.js";import{f as s,S as t,h as a,U as o,e as i}from"./index-DQYSP24l.js";import{P as l}from"./ProjectPageTemplate-BukZfH_t.js";import{a8 as n,ag as r,g as d,a7 as h,f as p,Z as u}from"./vendor-icons-CZ0fHw8h.js";import"./vendor-react-D8ZVE-1i.js";import"./index-tD3BwZqC.js";import"./index-B32Yb0IV.js";import"./index-C9VRkwIY.js";import"./index-CMnRXDm6.js";import"./Footer-ClRpSHv8.js";import"./ProjectCard-BwLNlIzs.js";import"./projects-Clb5hPl-.js";import"./Seo-D8Plyq5-.js";const P=({isDark:m,toggleTheme:c})=>e.jsx(l,{isDark:m,toggleTheme:c,title:"Aqua Innovations",description:"I built a modern agency website for Aqua that combines smooth scrolling with GSAP animations and a slide-out navigation menu. The site uses modular page sections so the layout can be recomposed for different pitches and case studies, responsive typography for any screen size, and Lenis smooth scroll with GSAP entrance animations for a polished feel.",coverSrc:"/images/projects/Aqua.webp",chips:[{name:"React 19",icon:e.jsx(s,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Vite 7",icon:e.jsx(t,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Tailwind 4",icon:e.jsx(a,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"GSAP",icon:e.jsx(o,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Lenis",icon:e.jsx(n,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})},{name:"Netlify",icon:e.jsx(i,{className:"w-3 sm:w-3.5 h-3 sm:h-3.5"})}],githubUrl:"https://github.com/dhruba-datta/Aqua",secondaryUrl:"https://www.aquabd.pro/",secondaryLabel:"Check it out",features:[{id:"scroll-animation",icon:e.jsx(d,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Smooth Scroll & Entrance Animations",summary:"Momentum-based scrolling with GSAP-driven reveals",details:["Lenis smooth scroll providing momentum-based scrolling across the site","GSAP animations for hero headings, section reveals, and element entrances","Mouse trail on the hero section that disables on touch devices","Staggered animations across Statement, Industries, and Approach sections"]},{id:"navigation",icon:e.jsx(r,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Slide-Out Navigation Menu",summary:"Custom menu using transform-origin for the opening animation",details:["Slide-out menu triggered from the top-right, with a custom transform-origin animation","Route transitions across Home, Privacy, Terms, and Legal pages","Sticky GET STARTED CTA button in the top-right corner","Responsive design with mobile-optimized touch interactions"]},{id:"section-system",icon:e.jsx(h,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Modular Section Components",summary:"Pre-built sections that compose the page",details:["Reusable sections: Statement, Industries, Approach, Portfolio, Testimonials, Team, and Contact","Each section is self-contained so the page can be recomposed by changing section order","Consistent typography system with fluid sizing across all screen sizes","Unified color and spacing system across sections"]},{id:"responsive",icon:e.jsx(p,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Responsive Across Devices",summary:"Works on mobile, tablet, and desktop screens",details:["Mobile-first layout with the slide-out menu collapsing to a drawer on small screens","Fluid typography using CSS clamp so text scales smoothly from 360px phones to 4K displays","Touch-optimized buttons and CTAs with appropriate spacing for thumb reach","Mouse trail disabled on touch devices to avoid layout shifts"]},{id:"performance",icon:e.jsx(u,{className:"w-4 sm:w-5 h-4 sm:h-5"}),title:"Fast Load Performance",summary:"Optimized bundle and rendering",details:["React 19 with concurrent rendering for smooth animations","Vite 7 build pipeline with tree-shaking for a minimal bundle size","Background blur and overlays handled in CSS, not JavaScript","Lazy initialization of animations and interactive elements"]}],techSectionTitle:"Stack",techItems:[{icon:e.jsx(s,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"React 19",description:"Component framework with concurrent rendering for smooth animations and transitions."},{icon:e.jsx(t,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Vite 7",description:"Build tool for fast development and optimized production bundles."},{icon:e.jsx(a,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Tailwind CSS 4",description:"Utility-first CSS framework for responsive design and fluid typography."},{icon:e.jsx(o,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"GSAP",description:"Animation library for entrance effects and section reveals."},{icon:e.jsx(n,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Lenis",description:"Smooth scroll library with momentum-based scrolling."},{icon:e.jsx(r,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"React Router 7",description:"Client-side routing for page navigation."},{icon:e.jsx(i,{className:"w-3.5 h-3.5 sm:w-4 sm:h-4"}),label:"Netlify",description:"Hosting with continuous deployment and global CDN."}],useCases:["Digital agencies and creative studios wanting a portfolio site with custom animations","Freelancers needing a modular section-based homepage they can quickly adapt","Teams that want smooth scroll and entrance animations without building from scratch"],howToSectionTitle:"Deploy It",howToSteps:[e.jsxs(e.Fragment,{children:["Clone: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"git clone https://github.com/dhruba-datta/Aqua"})]}),e.jsxs(e.Fragment,{children:["Install: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm install"})]}),e.jsxs(e.Fragment,{children:["Run dev: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run dev"})," at ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"localhost:5173"})]}),e.jsxs(e.Fragment,{children:["Build & deploy: ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1.5 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"npm run build"})," then push ",e.jsx("code",{className:"text-xs sm:text-sm bg-gray-200 dark:bg-gray-700 px-1 py-0.5 rounded border border-blue-200 dark:border-gray-600",children:"dist"})," to Netlify"]})],contactCTA:{title:"Need a site with smooth animations and custom interactions?",description:"I build portfolio and marketing sites with GSAP, Lenis, and modular components that you can customize.",primaryButtonText:"Get Started",secondaryButtonText:"View All Projects"}});export{P as default};