1037 lines
48 KiB
TypeScript
1037 lines
48 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Box, Typography, Button, Container, IconButton, Grid } from '@mui/material';
|
|
import { useInView } from 'react-intersection-observer';
|
|
import InstagramIcon from '@mui/icons-material/Instagram';
|
|
import FacebookIcon from '@mui/icons-material/Facebook';
|
|
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 = {
|
|
paper: '#F5F5EF', // Aged paper
|
|
ink: '#1A2526', // Deep charcoal
|
|
accent: '#D4A017', // Saffron gold
|
|
secondary: '#7B4F3A', // Terracotta
|
|
highlight: '#FFF4CC', // Light sandalwood
|
|
border: '#B89A6E', // Antique brass
|
|
dark: '#3A1F0F', // Rich teak
|
|
};
|
|
|
|
// Animations
|
|
const fadeIn = keyframes`
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
`;
|
|
|
|
const scaleIn = keyframes`
|
|
from { transform: scale(0.8); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
`;
|
|
|
|
const rotateIn = keyframes`
|
|
from { transform: rotate(5deg) scale(0.9); opacity: 0; }
|
|
to { transform: rotate(0deg) scale(1); opacity: 1; }
|
|
`;
|
|
|
|
const drawUnderline = keyframes`
|
|
0% { width: 0; }
|
|
100% { width: 100%; }
|
|
`;
|
|
|
|
const vintagePulse = keyframes`
|
|
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.4); }
|
|
70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(212, 160, 23, 0); }
|
|
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
|
|
`;
|
|
|
|
const float = keyframes`
|
|
0% { transform: translateY(0px); }
|
|
50% { transform: translateY(-10px); }
|
|
100% { transform: translateY(0px); }
|
|
`;
|
|
|
|
const scrollReveal = keyframes`
|
|
from { opacity: 0; transform: translateY(50px); }
|
|
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',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
background: `url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%233A1F0F' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E")`,
|
|
opacity: 0.15,
|
|
zIndex: 0,
|
|
},
|
|
});
|
|
|
|
const VintageButton = styled(Button)({
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
border: `1px solid ${colors.border}`,
|
|
color: colors.ink,
|
|
backgroundColor: colors.paper,
|
|
fontWeight: 400,
|
|
letterSpacing: '1px',
|
|
textTransform: 'uppercase',
|
|
padding: '12px 24px',
|
|
borderRadius: '0',
|
|
transition: 'all 0.3s ease',
|
|
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
|
'&:hover': {
|
|
backgroundColor: colors.highlight,
|
|
color: colors.dark,
|
|
borderColor: colors.accent,
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: '0 4px 8px rgba(0,0,0,0.2)',
|
|
},
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '1px',
|
|
backgroundColor: colors.accent,
|
|
transform: 'scaleX(0)',
|
|
transformOrigin: 'right',
|
|
transition: 'transform 0.3s ease',
|
|
},
|
|
'&:hover::after': {
|
|
transform: 'scaleX(1)',
|
|
transformOrigin: 'left',
|
|
},
|
|
});
|
|
|
|
const VintagePulseButton = styled(VintageButton)({
|
|
animation: `${vintagePulse} 2s infinite`,
|
|
'&:hover': {
|
|
animation: 'none',
|
|
},
|
|
});
|
|
|
|
const VintageUnderline = styled(Box)({
|
|
position: 'relative',
|
|
display: 'inline-block',
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
bottom: '-5px',
|
|
left: 0,
|
|
width: '0',
|
|
height: '2px',
|
|
backgroundColor: colors.accent,
|
|
animation: `${drawUnderline} 1.5s forwards`,
|
|
animationDelay: '0.5s',
|
|
},
|
|
});
|
|
|
|
const VintageImageFrame = styled(Box)({
|
|
border: `12px solid ${colors.paper}`,
|
|
boxShadow: `8px 8px 0 ${colors.secondary}80, 0 4px 8px rgba(0,0,0,0.1)`,
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '-15px',
|
|
left: '-15px',
|
|
right: '-15px',
|
|
bottom: '-15px',
|
|
border: `1px solid ${colors.border}`,
|
|
zIndex: -1,
|
|
opacity: 0.7,
|
|
},
|
|
});
|
|
|
|
const AnimatedSection = styled(Box)({
|
|
opacity: 0,
|
|
transform: 'translateY(50px)',
|
|
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 = [
|
|
{
|
|
year: '2019',
|
|
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: `${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: `${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: `${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: `${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: `${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: `${image5}`,
|
|
},
|
|
];
|
|
|
|
// Process steps with updated Pexels images
|
|
const processSteps = [
|
|
{
|
|
title: 'Design Inspiration',
|
|
description: 'Drawing from traditional Indian motifs and contemporary aesthetics',
|
|
image: `${image4}`,
|
|
},
|
|
{
|
|
title: 'Material Selection',
|
|
description: 'Choosing the finest natural fibers and dyes',
|
|
image: `${image5}`,
|
|
},
|
|
{
|
|
title: 'Artisan Crafting',
|
|
description: 'Skilled hands weaving stories into fabric',
|
|
image: `${image4}`,
|
|
},
|
|
{
|
|
title: 'Quality Assurance',
|
|
description: 'Meticulous inspection ensuring perfection',
|
|
image: `${image5}`,
|
|
},
|
|
];
|
|
|
|
export const VintageComingSoonPage: React.FC = () => {
|
|
const [days, setDays] = useState(10);
|
|
const [hours, setHours] = useState(0);
|
|
const [minutes, setMinutes] = useState(0);
|
|
const [seconds, setSeconds] = useState(0);
|
|
const [email, setEmail] = useState('');
|
|
const [subscribed, setSubscribed] = useState(false);
|
|
const [currentChapter, setCurrentChapter] = useState(0);
|
|
const [scrollPosition, setScrollPosition] = useState(0);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Intersection Observer for scroll animations
|
|
const [heroRef, heroInView] = useInView({ threshold: 0.1, triggerOnce: true });
|
|
const [storyRef, storyInView] = useInView({ threshold: 0.1, triggerOnce: true });
|
|
const [processRef, processInView] = useInView({ threshold: 0.1, triggerOnce: true });
|
|
const [footerRef, footerInView] = useInView({ threshold: 0.1, triggerOnce: true });
|
|
|
|
// Countdown timer
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
const now = new Date();
|
|
const launchDate = new Date();
|
|
launchDate.setDate(now.getDate() + 10);
|
|
launchDate.setHours(0, 0, 0, 0);
|
|
|
|
const diff = launchDate.getTime() - now.getTime();
|
|
|
|
setDays(Math.floor(diff / (1000 * 60 * 60 * 24)));
|
|
setHours(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
|
|
setMinutes(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)));
|
|
setSeconds(Math.floor((diff % (1000 * 60)) / 1000));
|
|
}, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
// Rotate story chapters for main image
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentChapter((prev) => (prev + 1) % storyChapters.length);
|
|
}, 8000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
// Scroll position for parallax effects
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const position = window.pageYOffset;
|
|
setScrollPosition(position);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const handleSubscribe = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
e.preventDefault();
|
|
if (email && email.includes('@')) {
|
|
console.log('Subscribed with email:', email);
|
|
setSubscribed(true);
|
|
setEmail('');
|
|
setTimeout(() => setSubscribed(false), 3000);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<VintageBox sx={{ minHeight: '100vh', background: colors.paper, color: colors.ink, overflow: 'hidden', position: 'relative' }}>
|
|
{/* Paper texture overlay */}
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundImage:
|
|
'url("data:image/svg+xml,%3Csvg width=\'600\' height=\'600\' viewBox=\'0 0 600 600\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noiseFilter\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.65\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noiseFilter)\' opacity=\'0.1\'/%3E%3C/svg%3E")',
|
|
opacity: 0.3,
|
|
zIndex: 0,
|
|
}}
|
|
/>
|
|
|
|
{/* Animated decorative elements */}
|
|
<Box
|
|
sx={{
|
|
position: 'fixed',
|
|
top: '10%',
|
|
right: '5%',
|
|
width: '100px',
|
|
height: '100px',
|
|
backgroundImage: `linear-gradient(90deg, ${colors.accent}20, ${colors.secondary}30, ${colors.accent}20)`,
|
|
backgroundSize: '200px 100px',
|
|
borderRadius: '50%',
|
|
animation: `${shimmer} 2s infinite linear, ${spinSlow} 20s infinite linear`,
|
|
zIndex: 0,
|
|
opacity: 0.3,
|
|
}}
|
|
/>
|
|
|
|
<Box
|
|
sx={{
|
|
position: 'fixed',
|
|
bottom: '15%',
|
|
left: '5%',
|
|
width: '80px',
|
|
height: '80px',
|
|
backgroundImage: `linear-gradient(90deg, ${colors.secondary}20, ${colors.accent}30, ${colors.secondary}20)`,
|
|
backgroundSize: '200px 100px',
|
|
borderRadius: '50%',
|
|
animation: `${shimmer} 3s infinite linear, ${spinSlow} 25s infinite linear reverse`,
|
|
zIndex: 0,
|
|
opacity: 0.3,
|
|
}}
|
|
/>
|
|
|
|
{/* Parallax background elements */}
|
|
<Box
|
|
sx={{
|
|
position: 'fixed',
|
|
top: `${scrollPosition * 0.1}px`,
|
|
right: '5%',
|
|
width: '200px',
|
|
height: '200px',
|
|
// 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
|
|
}}
|
|
/>
|
|
|
|
<Box
|
|
sx={{
|
|
position: 'fixed',
|
|
top: `${400 + scrollPosition * 0.05}px`,
|
|
left: '5%',
|
|
width: '150px',
|
|
height: '150px',
|
|
// 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
|
|
}}
|
|
/>
|
|
|
|
|
|
<Container maxWidth="lg" sx={{ position: 'relative', zIndex: 1, py: 6 }} ref={containerRef}>
|
|
{/* Header */}
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: `1px solid ${colors.border}`, py: 4, mb: 4 }}>
|
|
<AnimatedSection ref={heroRef} style={{ animationDelay: heroInView ? '0.1s' : '0s' }}>
|
|
<Typography
|
|
variant="h3"
|
|
sx={{
|
|
fontWeight: 300,
|
|
color: colors.ink,
|
|
letterSpacing: '3px',
|
|
fontFamily: '"Playfair Display", serif',
|
|
textTransform: 'uppercase',
|
|
}}
|
|
>
|
|
<VintageUnderline>The Kalawati</VintageUnderline>
|
|
</Typography>
|
|
</AnimatedSection>
|
|
<AnimatedSection ref={heroRef} style={{ animationDelay: heroInView ? '0.2s' : '0s' }}>
|
|
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
<BounceBox>
|
|
<IconButton
|
|
href="https://instagram.com"
|
|
target="_blank"
|
|
sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
|
|
>
|
|
<InstagramIcon />
|
|
</IconButton>
|
|
</BounceBox>
|
|
<BounceBox sx={{ animationDelay: '0.1s' }}>
|
|
<IconButton
|
|
href="https://facebook.com"
|
|
target="_blank"
|
|
sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
|
|
>
|
|
<FacebookIcon />
|
|
</IconButton>
|
|
</BounceBox>
|
|
<BounceBox sx={{ animationDelay: '0.2s' }}>
|
|
<IconButton
|
|
href="https://twitter.com"
|
|
target="_blank"
|
|
sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
|
|
>
|
|
<TwitterIcon />
|
|
</IconButton>
|
|
</BounceBox>
|
|
</Box>
|
|
</AnimatedSection>
|
|
</Box>
|
|
|
|
{/* Hero Section with Rotating Image */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', md: 'row-reverse' },
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
py: 8,
|
|
minHeight: '80vh',
|
|
}}
|
|
>
|
|
<AnimatedSection
|
|
ref={heroRef}
|
|
style={{
|
|
animationDelay: heroInView ? '0.3s' : '0s',
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<VintageImageFrame
|
|
sx={{
|
|
height: { xs: '400px', md: '550px' },
|
|
background: colors.dark,
|
|
backgroundImage: `url(${storyChapters[currentChapter].image})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
filter: 'sepia(0.2) contrast(1.05)',
|
|
animation: `${scaleIn} 1.5s ease, ${float} 6s ease-in-out infinite`,
|
|
transition: 'background-image 1.5s ease-in-out',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
width: '100%',
|
|
background: `linear-gradient(to top, ${colors.dark}CC, transparent)`,
|
|
color: colors.paper,
|
|
p: 5,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Typography variant="h6" sx={{ fontWeight: 300, mb: 1, letterSpacing: '2px', fontFamily: '"Playfair Display", serif' }}>
|
|
{storyChapters[currentChapter].year}
|
|
</Typography>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{ fontWeight: 400, mb: 2, textTransform: 'uppercase', letterSpacing: '2px', fontFamily: '"Playfair Display", serif' }}
|
|
>
|
|
{storyChapters[currentChapter].title}
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ opacity: 0.9, fontStyle: 'italic', fontFamily: '"Cormorant Garamond", serif', lineHeight: 1.6 }}>
|
|
{storyChapters[currentChapter].content}
|
|
</Typography>
|
|
</Box>
|
|
</VintageImageFrame>
|
|
</AnimatedSection>
|
|
|
|
<AnimatedSection
|
|
ref={heroRef}
|
|
style={{
|
|
animationDelay: heroInView ? '0.4s' : '0s',
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<GlowingText
|
|
variant="h1"
|
|
sx={{
|
|
fontWeight: 300,
|
|
mb: 4,
|
|
fontSize: { xs: '3rem', md: '4rem' },
|
|
lineHeight: 1.2,
|
|
color: colors.ink,
|
|
fontFamily: '"Playfair Display", serif',
|
|
}}
|
|
>
|
|
<span style={{ fontWeight: 400, color: colors.dark }}>A Journey</span> Woven with Stories, People & Purpose
|
|
</GlowingText>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{
|
|
mb: 6,
|
|
color: colors.secondary,
|
|
fontWeight: 300,
|
|
fontStyle: 'italic',
|
|
fontFamily: '"Cormorant Garamond", serif',
|
|
pl: 4,
|
|
position: 'relative',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
height: '100%',
|
|
width: '2px',
|
|
background: colors.accent,
|
|
},
|
|
}}
|
|
>
|
|
Preserving Indian crafts, empowering artisans, and creating timeless pieces for the modern world.
|
|
</Typography>
|
|
|
|
{/* Countdown Timer */}
|
|
<Box sx={{ mb: 6 }}>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
mb: 4,
|
|
fontWeight: 300,
|
|
color: colors.secondary,
|
|
letterSpacing: '2px',
|
|
fontFamily: '"Cormorant Garamond", serif',
|
|
textTransform: 'uppercase',
|
|
}}
|
|
>
|
|
Collection Unveiling
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', justifyContent: { xs: 'center', md: 'flex-start' } }}>
|
|
{[{ value: days, label: 'Days' }, { value: hours, label: 'Hours' }, { value: minutes, label: 'Minutes' }, { value: seconds, label: 'Seconds' }].map(
|
|
(item, index) => (
|
|
<Box
|
|
key={item.label}
|
|
sx={{
|
|
background: colors.paper,
|
|
borderRadius: '0',
|
|
p: 3,
|
|
minWidth: '90px',
|
|
border: `1px solid ${colors.border}`,
|
|
textAlign: 'center',
|
|
boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
|
|
transition: 'all 0.3s ease',
|
|
'&:hover': { transform: 'translateY(-2px)', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' },
|
|
animation: `${scaleIn} 1s ease`,
|
|
animationDelay: `${index * 0.1}s`,
|
|
}}
|
|
>
|
|
<Typography variant="h4" sx={{ fontWeight: 300, color: colors.ink, fontFamily: '"Playfair Display", serif' }}>
|
|
{item.value}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
color: colors.secondary,
|
|
letterSpacing: '1px',
|
|
textTransform: 'uppercase',
|
|
fontSize: '0.8rem',
|
|
fontFamily: '"Cormorant Garamond", serif',
|
|
}}
|
|
>
|
|
{item.label}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Email Subscription */}
|
|
<Box>
|
|
<BorderFlowBox sx={{ display: 'flex', gap: 3, mb: 3, flexDirection: { xs: 'column', sm: 'row' }, p: '1px', borderRadius: '0' }}>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Your email address"
|
|
required
|
|
style={{
|
|
flex: 1,
|
|
padding: '16px 24px',
|
|
borderRadius: '0',
|
|
border: 'none',
|
|
fontSize: '16px',
|
|
outline: 'none',
|
|
background: colors.paper,
|
|
color: colors.ink,
|
|
fontFamily: '"Cormorant Garamond", serif',
|
|
transition: 'all 0.3s ease',
|
|
}}
|
|
/>
|
|
<VintagePulseButton
|
|
onClick={handleSubscribe}
|
|
variant="contained"
|
|
sx={{
|
|
px: 5,
|
|
py: 2,
|
|
fontWeight: 300,
|
|
fontFamily: '"Cormorant Garamond", serif',
|
|
letterSpacing: '2px',
|
|
color: colors.ink,
|
|
'&:hover': { background: colors.highlight },
|
|
}}
|
|
>
|
|
Notify Me
|
|
</VintagePulseButton>
|
|
</BorderFlowBox>
|
|
{subscribed && (
|
|
<Typography
|
|
sx={{
|
|
color: colors.accent,
|
|
fontWeight: 300,
|
|
fontSize: '1rem',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 1,
|
|
fontFamily: '"Cormorant Garamond", serif',
|
|
animation: `${fadeIn} 0.5s ease`,
|
|
}}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M13.5 4L6 12L2.5 8.5" stroke={colors.accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
Thank you! We'll keep you informed.
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</AnimatedSection>
|
|
</Box>
|
|
|
|
{/* Story Timeline */}
|
|
<Box
|
|
ref={storyRef}
|
|
sx={{
|
|
my: 10,
|
|
py: 10,
|
|
position: 'relative',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: "20%",
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '1px',
|
|
height: '100%',
|
|
background: colors.border,
|
|
zIndex: 0,
|
|
},
|
|
}}
|
|
>
|
|
<Container maxWidth="lg">
|
|
<AnimatedSection style={{ animationDelay: storyInView ? '0.1s' : '0s' }}>
|
|
<Typography
|
|
variant="h3"
|
|
sx={{
|
|
mb: 8,
|
|
fontWeight: 300,
|
|
textAlign: 'center',
|
|
color: colors.ink,
|
|
fontFamily: '"Playfair Display", serif',
|
|
position: 'relative',
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
bottom: '-15px',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '150px',
|
|
height: '1px',
|
|
background: colors.accent,
|
|
},
|
|
}}
|
|
>
|
|
Our Story Woven in Time
|
|
</Typography>
|
|
</AnimatedSection>
|
|
|
|
<Grid container spacing={4}>
|
|
{storyChapters.map((chapter, index) => (
|
|
<Grid key={chapter.year}>
|
|
<AnimatedSection
|
|
style={{
|
|
animationDelay: storyInView ? `${index * 0.2}s` : '0s',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: { xs: 'column', md: index % 2 === 0 ? 'row' : 'row-reverse' },
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
p: 4,
|
|
borderRadius: '4px',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
|
|
background: `${colors.paper}ee`,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
flex: 1,
|
|
textAlign: { xs: 'center', md: index % 2 === 0 ? 'right' : 'left' },
|
|
px: { xs: 2, md: 4 },
|
|
}}
|
|
>
|
|
<Typography variant="h5" sx={{ fontWeight: 400, color: colors.dark, mb: 2, fontFamily: '"Playfair Display", serif' }}>
|
|
{chapter.year}
|
|
</Typography>
|
|
<Typography
|
|
variant="h4"
|
|
sx={{
|
|
fontWeight: 300,
|
|
color: colors.ink,
|
|
mb: 3,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '1.5px',
|
|
fontFamily: '"Playfair Display", serif',
|
|
}}
|
|
>
|
|
{chapter.title}
|
|
</Typography>
|
|
<Typography variant="body1" sx={{ color: colors.secondary, fontFamily: '"Cormorant Garamond", serif', lineHeight: 1.8, fontSize: '1.1rem' }}>
|
|
{chapter.content}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
flex: 1,
|
|
position: 'relative',
|
|
minHeight: '250px',
|
|
width: '100%',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: { xs: '50%', md: index % 2 === 0 ? '100%' : 'auto' },
|
|
right: { xs: 'auto', md: index % 2 === 0 ? 'auto' : '100%' },
|
|
transform: 'translate(-50%, -50%)',
|
|
width: '24px',
|
|
height: '24px',
|
|
borderRadius: '50%',
|
|
background: colors.accent,
|
|
border: `4px solid ${colors.paper}`,
|
|
zIndex: 1,
|
|
},
|
|
}}
|
|
>
|
|
<VintageImageFrame
|
|
sx={{
|
|
height: '250px',
|
|
width: '100%',
|
|
backgroundImage: `url(${chapter.image})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
filter: 'sepia(0.2) contrast(1.05)',
|
|
animation: `${rotateIn} 1.2s ease`,
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</AnimatedSection>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Process Section */}
|
|
<Box ref={processRef} sx={{ my: 10, py: 10, background: colors.highlight, position: 'relative', overflow: 'hidden' }}>
|
|
<Container maxWidth="lg">
|
|
<AnimatedSection style={{ animationDelay: processInView ? '0.1s' : '0s' }}>
|
|
<Typography
|
|
variant="h3"
|
|
sx={{
|
|
mb: 8,
|
|
fontWeight: 300,
|
|
textAlign: 'center',
|
|
color: colors.dark,
|
|
fontFamily: '"Playfair Display", serif',
|
|
position: 'relative',
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
bottom: '-15px',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
width: '150px',
|
|
height: '1px',
|
|
background: colors.accent,
|
|
},
|
|
}}
|
|
>
|
|
The Art of Creation
|
|
</Typography>
|
|
</AnimatedSection>
|
|
|
|
<Grid container spacing={4} justifyContent="center">
|
|
{processSteps.map((step, index) => (
|
|
<Grid key={index}>
|
|
<AnimatedSection
|
|
style={{
|
|
animationDelay: processInView ? `${index * 0.2}s` : '0s',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
textAlign: 'center',
|
|
p: 3,
|
|
borderRadius: '4px',
|
|
background: colors.paper,
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
|
transition: 'transform 0.3s ease',
|
|
'&:hover': {
|
|
transform: 'translateY(-5px)',
|
|
},
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<FlipInBox
|
|
sx={{
|
|
height: '200px',
|
|
width: '100%',
|
|
backgroundImage: `url(${step.image})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
mb: 3,
|
|
filter: 'sepia(0.2) contrast(1.05)',
|
|
}}
|
|
/>
|
|
<Typography variant="h6" sx={{ fontWeight: 400, color: colors.ink, mb: 2, fontFamily: '"Playfair Display", serif' }}>
|
|
{step.title}
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ color: colors.secondary, fontFamily: '"Cormorant Garamond", serif', lineHeight: 1.6 }}>
|
|
{step.description}
|
|
</Typography>
|
|
</Box>
|
|
</AnimatedSection>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
|
|
{/* Footer */}
|
|
<Box ref={footerRef} sx={{ py: 6, textAlign: 'center', borderTop: `1px solid ${colors.border}` }}>
|
|
<AnimatedSection style={{ animationDelay: footerInView ? '0.1s' : '0s' }}>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
mb: 3,
|
|
fontWeight: 300,
|
|
color: colors.ink,
|
|
letterSpacing: '4px',
|
|
fontFamily: '"Playfair Display", serif',
|
|
textTransform: 'uppercase',
|
|
}}
|
|
>
|
|
The Kalawati
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
color: colors.secondary,
|
|
mb: 4,
|
|
maxWidth: '600px',
|
|
margin: '0 auto',
|
|
fontSize: '1rem',
|
|
fontFamily: '"Cormorant Garamond", serif',
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
Join our journey to weave stories, empower artisans, and celebrate Indian heritage. Be the first to experience our handcrafted collections.
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 3, mb: 4 }}>
|
|
<BounceBox>
|
|
<IconButton
|
|
href="https://instagram.com"
|
|
target="_blank"
|
|
sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
|
|
>
|
|
<InstagramIcon />
|
|
</IconButton>
|
|
</BounceBox>
|
|
<BounceBox sx={{ animationDelay: '0.1s' }}>
|
|
<IconButton
|
|
href="https://facebook.com"
|
|
target="_blank"
|
|
sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
|
|
>
|
|
<FacebookIcon />
|
|
</IconButton>
|
|
</BounceBox>
|
|
<BounceBox sx={{ animationDelay: '0.2s' }}>
|
|
<IconButton
|
|
href="https://twitter.com"
|
|
target="_blank"
|
|
sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
|
|
>
|
|
<TwitterIcon />
|
|
</IconButton>
|
|
</BounceBox>
|
|
<BounceBox sx={{ animationDelay: '0.3s' }}>
|
|
<IconButton
|
|
href="mailto:contact@thekalawati.com"
|
|
sx={{ color: colors.secondary, '&:hover': { color: colors.accent, transform: 'scale(1.1)' }, transition: 'all 0.3s ease' }}
|
|
>
|
|
<EmailIcon />
|
|
</IconButton>
|
|
</BounceBox>
|
|
</Box>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{ color: colors.secondary, opacity: 0.7, fontSize: '0.8rem', fontFamily: '"Cormorant Garamond", serif' }}
|
|
>
|
|
© {new Date().getFullYear()} The Kalawati. All rights reserved.
|
|
</Typography>
|
|
</AnimatedSection>
|
|
</Box>
|
|
</Container>
|
|
</VintageBox>
|
|
);
|
|
};
|
|
|
|
export default VintageComingSoonPage; |