diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index d44c86a..5168102 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/index.html b/index.html index 6c54df8..f414cde 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,15 @@ - - - - Vite + React + TS - - -
- - - + + + + + The Kalawati + + + +
+ + + + \ No newline at end of file diff --git a/package.json b/package.json index e6a9853..fc29be0 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "@mui/material": "^7.3.2", "react": "^19.1.1", "react-dom": "^19.1.1", - "react-intersection-observer": "^9.16.0" + "react-intersection-observer": "^9.16.0", + "react-router-dom": "^7.8.2" }, "devDependencies": { "@eslint/js": "^9.33.0", diff --git a/src/App.tsx b/src/App.tsx index 1bb563a..7c58ace 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,23 @@ -// import { useState } from 'react' -// import reactLogo from './assets/react.svg' -// import viteLogo from '/vite.svg' -import './App.css' -// import VintageComingSoon from './comingsoon/comingsoon' -import VintageComingSoonPage from './comingsoon/comingsoon' +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import "./App.css"; +import VintageComingSoonPage from "./comingsoon/comingsoon"; +import DarkProductShowcase from "./product/product"; +// import OtherPage from "./pages/OtherPage"; // example if you add more pages function App() { - // const [count, setCount] = useState(0) - return ( + + + {/* Default route */} + } /> - - + {/* Example extra routes */} + } /> + {/* } /> */} + {/* } /> */} + + ); } -export default App +export default App; diff --git a/src/assets/bag1.jpg b/src/assets/bag1.jpg new file mode 100644 index 0000000..b2486f7 Binary files /dev/null and b/src/assets/bag1.jpg differ diff --git a/src/assets/bag2.jpg b/src/assets/bag2.jpg new file mode 100644 index 0000000..735e0bc Binary files /dev/null and b/src/assets/bag2.jpg differ diff --git a/src/assets/group1.jpg b/src/assets/group1.jpg new file mode 100644 index 0000000..5018f8d Binary files /dev/null and b/src/assets/group1.jpg differ diff --git a/src/assets/solo1.jpg b/src/assets/solo1.jpg new file mode 100644 index 0000000..a9fa7e9 Binary files /dev/null and b/src/assets/solo1.jpg differ diff --git a/src/assets/solo2.jpg b/src/assets/solo2.jpg new file mode 100644 index 0000000..7357582 Binary files /dev/null and b/src/assets/solo2.jpg differ diff --git a/src/comingsoon/comingsoon.tsx b/src/comingsoon/comingsoon.tsx index 57f1ef7..435a3d9 100644 --- a/src/comingsoon/comingsoon.tsx +++ b/src/comingsoon/comingsoon.tsx @@ -7,6 +7,12 @@ import TwitterIcon from '@mui/icons-material/Twitter'; import EmailIcon from '@mui/icons-material/Email'; import { keyframes } from '@emotion/react'; import { styled } from '@mui/system'; +import image1 from '../assets/group1.jpg' +import image2 from '../assets/solo1.jpg' +import image3 from '../assets/solo2.jpg' +import image4 from '../assets/bag1.jpg' +import image5 from '../assets/bag2.jpg' + // Color palette inspired by Indian heritage const colors = { @@ -57,6 +63,60 @@ const scrollReveal = keyframes` to { opacity: 1; transform: translateY(0); } `; +const shimmer = keyframes` + 0% { background-position: -200px 0; } + 100% { background-position: calc(200px + 100%) 0; } +`; + +const textGlow = keyframes` + 0% { text-shadow: 0 0 5px rgba(212, 160, 23, 0.3); } + 50% { text-shadow: 0 0 15px rgba(212, 160, 23, 0.6); } + 100% { text-shadow: 0 0 5px rgba(212, 160, 23, 0.3); } +`; + +const borderFlow = keyframes` + 0% { border-color: ${colors.accent}; } + 33% { border-color: ${colors.secondary}; } + 66% { border-color: ${colors.border}; } + 100% { border-color: ${colors.accent}; } +`; + +const typewriter = keyframes` + from { width: 0; } + to { width: 100%; } +`; + +const fadeInLeft = keyframes` + from { opacity: 0; transform: translateX(-50px); } + to { opacity: 1; transform: translateX(0); } +`; + +const fadeInRight = keyframes` + from { opacity: 0; transform: translateX(50px); } + to { opacity: 1; transform: translateX(0); } +`; + +const bounce = keyframes` + 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } + 40% { transform: translateY(-15px); } + 60% { transform: translateY(-7px); } +`; + +const flipIn = keyframes` + 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } + 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } +`; + +const zoomIn = keyframes` + from { transform: scale(0.95); opacity: 0; } + to { transform: scale(1); opacity: 1; } +`; + +const spinSlow = keyframes` + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +`; + // Styled components const VintageBox = styled(Box)({ position: 'relative', @@ -158,6 +218,35 @@ const AnimatedSection = styled(Box)({ animation: `${scrollReveal} 1s forwards`, }); +const GlowingText = styled(Typography)({ + animation: `${textGlow} 3s ease-in-out infinite`, +}); + +const BorderFlowBox = styled(Box)({ + border: `1px solid ${colors.accent}`, + animation: `${borderFlow} 6s infinite linear`, +}); + +const TypewriterText = styled(Typography)({ + overflow: 'hidden', + whiteSpace: 'nowrap', + margin: '0 auto', + animation: `${typewriter} 4s steps(40, end)`, +}); + +const BounceBox = styled(Box)({ + animation: `${bounce} 2s infinite`, +}); + +const FlipInBox = styled(Box)({ + animation: `${flipIn} 1s forwards`, + transformOrigin: 'center', +}); + +const ZoomInBox = styled(Box)({ + animation: `${zoomIn} 1s forwards`, +}); + // Kalawati story sections with updated Pexels images const storyChapters = [ { @@ -165,42 +254,42 @@ const storyChapters = [ title: 'Where Curiosity Met Craft', content: 'Fresh out of fashion school, I found myself drawn to looms, dye pits, and village homes. I organized workshops to listen, learn, and share space with artisans, forging a bond between design, community, and culture.', - image: 'https://images.pexels.com/photos/28382914/pexels-photo-28382914.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image1}`, }, { year: '2020', title: 'A Name Was Born', content: 'During the pandemic, I launched a campaign to highlight artisans hit by lockdowns. The Kalawati was born—named after women who hold culture in their palms and creativity in their hearts.', - image: 'https://images.pexels.com/photos/31308739/pexels-photo-31308739.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image2}`, }, { year: '2021', title: 'Strengthening the Circle', content: 'I spent the year mapping artisan strengths, connecting traditional skills to modern demand, and building trust for a long-term vision of community and craft.', - image: 'https://images.pexels.com/photos/3772504/pexels-photo-3772504.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image3}`, }, { year: '2022', title: 'Systems That Serve People', content: 'Through the JSW Foundation Fellowship, I built systems blending business and empathy—brand building for rural women, value chain development, and sustainable income pathways.', - image: 'https://images.pexels.com/photos/163064/pexels-photo-163064.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image4}`, }, { year: '2023', title: 'Quiet Creation', content: 'Working with artisan clusters, we prototyped collections with handloom, embroidery, and natural dyes—crafting stories you could wear.', - image: 'https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image1}`, }, { year: '2024', title: 'Kalawati Arrives', content: 'The Kalawati opens its doors as a brand and movement, offering ethically made handcrafted apparel and decor. Join us to co-create, support heritage, and connect to roots.', - image: 'https://images.pexels.com/photos/774859/pexels-photo-774859.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image5}`, }, ]; @@ -209,22 +298,22 @@ const processSteps = [ { title: 'Design Inspiration', description: 'Drawing from traditional Indian motifs and contemporary aesthetics', - image: 'https://images.pexels.com/photos/28382914/pexels-photo-28382914.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image4}`, }, { title: 'Material Selection', description: 'Choosing the finest natural fibers and dyes', - image: 'https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image5}`, }, { title: 'Artisan Crafting', description: 'Skilled hands weaving stories into fabric', - image: 'https://images.pexels.com/photos/163064/pexels-photo-163064.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image4}`, }, { title: 'Quality Assurance', description: 'Meticulous inspection ensuring perfection', - image: 'https://images.pexels.com/photos/3772504/pexels-photo-3772504.jpeg?auto=compress&cs=tinysrgb&w=500', + image: `${image5}`, }, ]; @@ -287,10 +376,12 @@ export const VintageComingSoonPage: React.FC = () => { const handleSubscribe = (e: React.MouseEvent) => { e.preventDefault(); - console.log('Subscribed with email:', email); - setSubscribed(true); - setEmail(''); - setTimeout(() => setSubscribed(false), 3000); + if (email && email.includes('@')) { + console.log('Subscribed with email:', email); + setSubscribed(true); + setEmail(''); + setTimeout(() => setSubscribed(false), 3000); + } }; return ( @@ -310,6 +401,39 @@ export const VintageComingSoonPage: React.FC = () => { }} /> + {/* Animated decorative elements */} + + + + {/* Parallax background elements */} { right: '5%', width: '200px', height: '200px', - backgroundImage: 'url(https://images.pexels.com/photos/28382914/pexels-photo-28382914.jpeg?auto=compress&cs=tinysrgb&w=500)', + // backgroundColor: 'black', backgroundSize: 'cover', + backgroundPosition: 'center', opacity: 0.1, zIndex: 0, transform: `rotate(${scrollPosition * 0.02}deg)`, transition: 'transform 0.3s ease-out', + borderRadius: '50%', // makes it circular + overflow: 'hidden', // ensures image stays inside the circle }} /> + { left: '5%', width: '150px', height: '150px', - backgroundImage: 'url(https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg?auto=compress&cs=tinysrgb&w=500)', + // backgroundColor: 'black', backgroundSize: 'cover', + backgroundPosition: 'center', opacity: 0.1, zIndex: 0, transform: `rotate(${-scrollPosition * 0.03}deg)`, transition: 'transform 0.3s ease-out', + borderRadius: '50%', // circular shape + overflow: 'hidden', // ensures the image fits inside the circle }} /> + {/* Header */} @@ -361,27 +493,33 @@ export const VintageComingSoonPage: React.FC = () => { - - - - - - - - - + + + + + + + + + + + + + + + @@ -450,7 +588,7 @@ export const VintageComingSoonPage: React.FC = () => { flex: 1, }} > - { }} > A Journey Woven with Stories, People & Purpose - + { {/* Email Subscription */} - + { flex: 1, padding: '16px 24px', borderRadius: '0', - border: `1px solid ${colors.border}`, + border: 'none', fontSize: '16px', outline: 'none', background: colors.paper, @@ -579,7 +717,7 @@ export const VintageComingSoonPage: React.FC = () => { > Notify Me - + {subscribed && ( { '&::before': { content: '""', position: 'absolute', - top: 0, + top: "20%", left: '50%', transform: 'translateX(-50%)', width: '1px', @@ -788,9 +926,10 @@ export const VintageComingSoonPage: React.FC = () => { '&:hover': { transform: 'translateY(-5px)', }, + height: '100%', }} > - { backgroundPosition: 'center', mb: 3, filter: 'sepia(0.2) contrast(1.05)', - animation: `${scaleIn} 1s ease`, }} /> @@ -847,33 +985,41 @@ export const VintageComingSoonPage: React.FC = () => { Join our journey to weave stories, empower artisans, and celebrate Indian heritage. Be the first to experience our handcrafted collections. - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + { + const [selectedCategory, setSelectedCategory] = useState('all'); + const [hoveredProduct, setHoveredProduct] = useState(null); + + // Intersection Observer for scroll animations + const [heroRef, heroInView] = useInView({ threshold: 0.1, triggerOnce: true }); + const [productsRef, productsInView] = useInView({ threshold: 0.1, triggerOnce: true }); + const [footerRef, footerInView] = useInView({ threshold: 0.1, triggerOnce: true }); + + const filteredProducts = selectedCategory === 'all' + ? products + : products.filter(product => product.category === selectedCategory); + + return ( + + {/* Paper texture overlay */} + + + {/* Animated decorative elements */} + + + + + + {/* Header */} + + + + The Kalawati Collection + + + + + + + + + + + + + + + + + + {/* Hero Section */} + + + + + + + + + Timeless Craftsmanship, Modern Elegance + + + Each piece tells a story of tradition, skill, and the hands that crafted it with love and dedication. + + + + Explore Collection + + + + + {/* Category Filter */} + + + + Browse Categories + + + + + {categories.map((category) => ( + setSelectedCategory(category.value)} + variant={selectedCategory === category.value ? "filled" : "outlined"} + sx={{ + color: selectedCategory === category.value ? colors.lightPaper : colors.lightInk, + backgroundColor: selectedCategory === category.value ? colors.accent : 'transparent', + borderColor: colors.border, + fontFamily: '"Cormorant Garamond", serif', + fontSize: '1rem', + padding: '8px 16px', + '&:hover': { + backgroundColor: selectedCategory === category.value ? colors.accent : colors.highlight, + }, + }} + /> + ))} + + + + {/* Products Grid */} + + + {filteredProducts.map((product, index) => ( + + + setHoveredProduct(product.id)} + onMouseLeave={() => setHoveredProduct(null)} + > + + + + + + + + + + + + + + + {product.tags.map((tag, i) => ( + + ))} + + + + + {product.name} + + + {product.description} + + + + {product.price} + + + Add to Cart + + + + + + + ))} + + + + {/* Call to Action */} + + + + + Join Our Artisan Community + + + + + By purchasing our products, you're not just buying beautiful handcrafted items—you're supporting traditional artisans and helping preserve India's rich cultural heritage for future generations. + + + + + Discover Our Story + + + + + + {/* Footer */} + + + + Handcrafted Heritage + + + Each piece tells a story of India's rich heritage and skilled artisanship. + + + + + + + + + + + + + + + + + © {new Date().getFullYear()} Handcrafted Heritage. All rights reserved. + + + + + + ); +}; + +export default LightProductShowcase; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 3426bcb..f3e8ab3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1731,6 +1731,13 @@ __metadata: languageName: node linkType: hard +"cookie@npm:^1.0.1": + version: 1.0.2 + resolution: "cookie@npm:1.0.2" + checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b + languageName: node + linkType: hard + "cosmiconfig@npm:^7.0.0": version: 7.1.0 resolution: "cosmiconfig@npm:7.1.0" @@ -3771,6 +3778,34 @@ __metadata: languageName: node linkType: hard +"react-router-dom@npm:^7.8.2": + version: 7.8.2 + resolution: "react-router-dom@npm:7.8.2" + dependencies: + react-router: "npm:7.8.2" + peerDependencies: + react: ">=18" + react-dom: ">=18" + checksum: 10c0/b285182ffa1b26df5025f6e7952edca066928d5688d3447b02e4a7e699ca16941e8a42ecad65ab505914e27fed04a2023c92ae3ebf838226b4381a2e3a69ae01 + languageName: node + linkType: hard + +"react-router@npm:7.8.2": + version: 7.8.2 + resolution: "react-router@npm:7.8.2" + dependencies: + cookie: "npm:^1.0.1" + set-cookie-parser: "npm:^2.6.0" + peerDependencies: + react: ">=18" + react-dom: ">=18" + peerDependenciesMeta: + react-dom: + optional: true + checksum: 10c0/e3122c2949bcad5e9c990cfb88e9cbd139e5a2a5c1d29664732623907a488634c0ddbf673d07af8f113d418f66270c174f014de8b885996722f431d09f5734be + languageName: node + linkType: hard + "react-transition-group@npm:^4.4.5": version: 4.4.5 resolution: "react-transition-group@npm:4.4.5" @@ -4049,6 +4084,13 @@ __metadata: languageName: node linkType: hard +"set-cookie-parser@npm:^2.6.0": + version: 2.7.1 + resolution: "set-cookie-parser@npm:2.7.1" + checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a + languageName: node + linkType: hard + "set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" @@ -4393,6 +4435,7 @@ __metadata: react: "npm:^19.1.1" react-dom: "npm:^19.1.1" react-intersection-observer: "npm:^9.16.0" + react-router-dom: "npm:^7.8.2" typescript: "npm:~5.8.3" typescript-eslint: "npm:^8.39.1" vite: "npm:^7.1.2"