feature : blogs page
This commit is contained in:
hardik
parent
2f79c22280
commit
0272d6100e
|
|
@ -1,7 +1,8 @@
|
|||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import "./App.css";
|
||||
import VintageComingSoonPage from "./comingsoon/comingsoon";
|
||||
import DarkProductShowcase from "./product/product";
|
||||
import VintageComingSoonPage from "./components/comingsoon/comingsoon";
|
||||
import DarkProductShowcase from "./components/product/product";
|
||||
import BlogPage from "./components/blogs/BlogPage";
|
||||
// import OtherPage from "./pages/OtherPage"; // example if you add more pages
|
||||
|
||||
function App() {
|
||||
|
|
@ -13,8 +14,8 @@ function App() {
|
|||
|
||||
{/* Example extra routes */}
|
||||
<Route path="/home" element={<DarkProductShowcase />} />
|
||||
{/* <Route path="/about" element={<AboutPage />} /> */}
|
||||
{/* <Route path="/contact" element={<ContactPage />} /> */}
|
||||
<Route path="/blog" element={<BlogPage />} />
|
||||
{/* <Route path="/blog" element={<BlogCard />} /> */}
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
|
|
@ -0,0 +1,359 @@
|
|||
import React from 'react';
|
||||
import { Card, CardContent, CardMedia, Typography, Box, Chip, Button, Avatar } from '@mui/material';
|
||||
import { BlogPost } from '../../types/blogs';
|
||||
import { keyframes } from '@emotion/react';
|
||||
import { styled } from '@mui/system';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
// Use your existing color palette
|
||||
const colors = {
|
||||
paper: '#F5F5EF',
|
||||
ink: '#1A2526',
|
||||
accent: '#D4A017',
|
||||
secondary: '#7B4F3A',
|
||||
highlight: '#FFF4CC',
|
||||
border: '#B89A6E',
|
||||
dark: '#3A1F0F',
|
||||
};
|
||||
|
||||
// Storytelling Animations
|
||||
const storyReveal = keyframes`
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) rotate(2deg);
|
||||
filter: blur(4px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) rotate(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
`;
|
||||
|
||||
const imageFocus = keyframes`
|
||||
0% { transform: scale(1.1); filter: brightness(0.7) sepia(0.3); }
|
||||
100% { transform: scale(1); filter: brightness(1) sepia(0); }
|
||||
`;
|
||||
|
||||
const contentAppear = keyframes`
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
`;
|
||||
|
||||
const underlineDraw = keyframes`
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
`;
|
||||
|
||||
const tagFloat = keyframes`
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-3px); }
|
||||
`;
|
||||
|
||||
// Styled Components
|
||||
const StoryCard = styled(Card)({
|
||||
animation: `${storyReveal} 1.2s forwards`,
|
||||
opacity: 0,
|
||||
transform: 'translateY(30px) rotate(2deg)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7) 100%)',
|
||||
opacity: 0,
|
||||
transition: 'opacity 0.5s ease',
|
||||
zIndex: 1,
|
||||
},
|
||||
'&:hover::before': {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const StoryImage = styled(CardMedia)({
|
||||
animation: `${imageFocus} 1.5s forwards`,
|
||||
transform: 'scale(1.1)',
|
||||
filter: 'brightness(0.7) sepia(0.3)',
|
||||
transition: 'all 0.7s ease',
|
||||
position: 'relative',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)',
|
||||
},
|
||||
});
|
||||
|
||||
const StoryContent = styled(CardContent)({
|
||||
animation: `${contentAppear} 1s forwards`,
|
||||
animationDelay: '0.5s',
|
||||
opacity: 0,
|
||||
position: 'relative',
|
||||
zIndex: 2,
|
||||
});
|
||||
|
||||
const StoryTitle = styled(Typography)({
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: '-4px',
|
||||
left: 0,
|
||||
width: 0,
|
||||
height: '2px',
|
||||
backgroundColor: colors.accent,
|
||||
animation: `${underlineDraw} 1s forwards`,
|
||||
animationDelay: '1s',
|
||||
},
|
||||
});
|
||||
|
||||
const StoryTag = styled(Chip)({
|
||||
animation: `${tagFloat} 3s ease-in-out infinite`,
|
||||
animationDelay: '0.3s',
|
||||
});
|
||||
|
||||
interface BlogCardProps {
|
||||
post: BlogPost;
|
||||
index: number;
|
||||
}
|
||||
|
||||
const BlogCard: React.FC<BlogCardProps> = ({ post, index }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleReadMore = () => {
|
||||
navigate(`/blog/${post.id}`);
|
||||
};
|
||||
|
||||
// Calculate animation delays for staggered effect
|
||||
const animationDelay = `${index * 0.15}s`;
|
||||
|
||||
return (
|
||||
<StoryCard
|
||||
sx={{
|
||||
background: colors.paper,
|
||||
border: `1px solid ${colors.border}`,
|
||||
borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
transition: 'all 0.4s ease',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
|
||||
animationDelay: animationDelay,
|
||||
'&:hover': {
|
||||
transform: 'translateY(-8px) rotate(0)',
|
||||
boxShadow: '0 12px 30px rgba(0,0,0,0.15)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: 'relative', overflow: 'hidden' }}>
|
||||
<StoryImage
|
||||
// component="img"
|
||||
// height="260"
|
||||
image={post.image}
|
||||
// alt={post.title}
|
||||
// sx={{
|
||||
// animationDelay: animationDelay,
|
||||
// }}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 16,
|
||||
right: 16,
|
||||
zIndex: 3,
|
||||
}}
|
||||
>
|
||||
<StoryTag
|
||||
label={post.category}
|
||||
size="small"
|
||||
sx={{
|
||||
background: colors.accent,
|
||||
color: colors.ink,
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 600,
|
||||
animationDelay: `${index * 0.15 + 0.2}s`,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<StoryContent
|
||||
sx={{
|
||||
p: 3,
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
animationDelay: `${index * 0.15 + 0.3}s`,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ mb: 2, display: 'flex', alignItems: 'center' }}>
|
||||
<Avatar
|
||||
src={post.author.avatar}
|
||||
alt={post.author.name}
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
mr: 1.5,
|
||||
border: `2px solid ${colors.border}`,
|
||||
}}
|
||||
/>
|
||||
<Box>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: colors.dark,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
fontWeight: 600,
|
||||
display: 'block',
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{post.author.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: colors.secondary,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
fontSize: '0.7rem',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
{post.author.role}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<StoryTitle
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
color: colors.ink,
|
||||
fontFamily: '"Playfair Display", serif',
|
||||
mb: 2,
|
||||
lineHeight: 1.3,
|
||||
fontSize: '1.25rem',
|
||||
animationDelay: `${index * 0.15 + 0.4}s`,
|
||||
}}
|
||||
>
|
||||
{post.title}
|
||||
</StoryTitle>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.secondary,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
mb: 2,
|
||||
flexGrow: 1,
|
||||
fontSize: '1rem',
|
||||
lineHeight: 1.6,
|
||||
animationDelay: `${index * 0.15 + 0.5}s`,
|
||||
}}
|
||||
>
|
||||
{post.excerpt}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mt: 'auto',
|
||||
animationDelay: `${index * 0.15 + 0.6}s`,
|
||||
}}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: colors.secondary,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: 'inline-block',
|
||||
width: '4px',
|
||||
height: '4px',
|
||||
borderRadius: '50%',
|
||||
bgcolor: colors.accent,
|
||||
mx: 1,
|
||||
}}
|
||||
/>
|
||||
{post.date} • {post.readTime}
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
onClick={handleReadMore}
|
||||
sx={{
|
||||
color: colors.accent,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.9rem',
|
||||
position: 'relative',
|
||||
padding: '4px 8px',
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: '0',
|
||||
height: '1px',
|
||||
backgroundColor: colors.accent,
|
||||
transition: 'width 0.3s ease',
|
||||
},
|
||||
'&:hover': {
|
||||
color: colors.dark,
|
||||
background: 'transparent',
|
||||
'&::after': {
|
||||
width: '100%',
|
||||
},
|
||||
}
|
||||
}}
|
||||
>
|
||||
Read Story
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
mt: 2,
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: 0.5,
|
||||
animationDelay: `${index * 0.15 + 0.7}s`,
|
||||
}}
|
||||
>
|
||||
{post.tags.map((tag, i) => (
|
||||
<Chip
|
||||
key={i}
|
||||
label={tag}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
sx={{
|
||||
color: colors.secondary,
|
||||
borderColor: colors.border,
|
||||
fontSize: '0.6rem',
|
||||
height: '20px',
|
||||
animation: `${tagFloat} 3s ease-in-out infinite`,
|
||||
animationDelay: `${i * 0.2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</StoryContent>
|
||||
</StoryCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogCard;
|
||||
|
|
@ -0,0 +1,420 @@
|
|||
import React, { useState, useMemo } from 'react';
|
||||
import { Box, Container, Grid, Typography, TextField, Chip, IconButton, InputAdornment } 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 SearchIcon from '@mui/icons-material/Search';
|
||||
import { keyframes } from '@emotion/react';
|
||||
import { styled } from '@mui/system';
|
||||
import BlogCard from '../blogs/BlogCard';
|
||||
import { BlogData, BlogPost } from '../../types/blogs';
|
||||
|
||||
// Use your existing color palette
|
||||
const colors = {
|
||||
paper: '#F5F5EF',
|
||||
ink: '#1A2526',
|
||||
accent: '#D4A017',
|
||||
secondary: '#7B4F3A',
|
||||
highlight: '#FFF4CC',
|
||||
border: '#B89A6E',
|
||||
dark: '#3A1F0F',
|
||||
};
|
||||
|
||||
// Animations
|
||||
const fadeIn = keyframes`
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
`;
|
||||
|
||||
const drawUnderline = keyframes`
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
`;
|
||||
|
||||
const VintageUnderline = styled(Box)({
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
bottom: '-4px',
|
||||
left: 0,
|
||||
width: '0',
|
||||
height: '1.5px',
|
||||
backgroundColor: colors.accent,
|
||||
animation: `${drawUnderline} 1.2s forwards`,
|
||||
animationDelay: '0.3s',
|
||||
},
|
||||
});
|
||||
|
||||
const AnimatedSection = styled(Box)({
|
||||
opacity: 0,
|
||||
transform: 'translateY(20px)',
|
||||
animation: `${fadeIn} 0.8s forwards`,
|
||||
});
|
||||
|
||||
// Mock data - in real app, this would be imported from JSON
|
||||
const blogData: BlogData = {
|
||||
posts: [
|
||||
{
|
||||
id: "1",
|
||||
title: "The Art of Hand Block Printing",
|
||||
excerpt: "Discover the ancient technique of hand block printing that has been passed down through generations of Indian artisans.",
|
||||
content: "Full content would be here...",
|
||||
image: "https://images.pexels.com/photos/6011599/pexels-photo-6011599.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
author: {
|
||||
name: "Priya Sharma",
|
||||
avatar: "https://images.pexels.com/photos/3762800/pexels-photo-3762800.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
role: "Textile Conservationist"
|
||||
},
|
||||
date: "2023-10-15",
|
||||
readTime: "5 min read",
|
||||
tags: ["Textiles", "Craft", "Heritage"],
|
||||
category: "Artisan Techniques"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Natural Dyes: Colors from Nature",
|
||||
excerpt: "Explore how traditional Indian artisans extract vibrant colors from plants, minerals, and other natural sources.",
|
||||
content: "Full content would be here...",
|
||||
image: "https://images.pexels.com/photos/1375736/pexels-photo-1375736.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
author: {
|
||||
name: "Rajiv Mehta",
|
||||
avatar: "https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
role: "Natural Dye Expert"
|
||||
},
|
||||
date: "2023-09-22",
|
||||
readTime: "7 min read",
|
||||
tags: ["Eco-friendly", "Sustainability", "Natural"],
|
||||
category: "Sustainable Practices"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "The Weavers of Varanasi",
|
||||
excerpt: "A journey into the world of Varanasi's master weavers who create the exquisite Banarasi silk sarees.",
|
||||
content: "Full content would be here...",
|
||||
image: "https://images.pexels.com/photos/942803/pexels-photo-942803.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
author: {
|
||||
name: "Anjali Patel",
|
||||
avatar: "https://images.pexels.com/photos/3785077/pexels-photo-3785077.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
role: "Textile Historian"
|
||||
},
|
||||
date: "2023-08-30",
|
||||
readTime: "8 min read",
|
||||
tags: ["Weaving", "Silk", "Heritage"],
|
||||
category: "Artisan Stories"
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Reviving Ancient Embroidery Techniques",
|
||||
excerpt: "How contemporary designers are working with artisans to preserve and modernize traditional embroidery methods.",
|
||||
content: "Full content would be here...",
|
||||
image: "https://images.pexels.com/photos/6347892/pexels-photo-6347892.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
author: {
|
||||
name: "Sanjay Kumar",
|
||||
avatar: "https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
role: "Fashion Designer"
|
||||
},
|
||||
date: "2023-08-15",
|
||||
readTime: "6 min read",
|
||||
tags: ["Embroidery", "Design", "Revival"],
|
||||
category: "Design Innovation"
|
||||
}
|
||||
],
|
||||
categories: [
|
||||
"Artisan Techniques",
|
||||
"Sustainable Practices",
|
||||
"Artisan Stories",
|
||||
"Design Innovation",
|
||||
"Cultural Heritage"
|
||||
],
|
||||
tags: [
|
||||
"Textiles",
|
||||
"Craft",
|
||||
"Heritage",
|
||||
"Eco-friendly",
|
||||
"Sustainability",
|
||||
"Natural",
|
||||
"Weaving",
|
||||
"Silk",
|
||||
"Embroidery",
|
||||
"Design",
|
||||
"Revival"
|
||||
]
|
||||
};
|
||||
|
||||
const BlogPage: React.FC = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState('all');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [heroRef, heroInView] = useInView({ threshold: 0.1, triggerOnce: true });
|
||||
|
||||
const filteredPosts = useMemo(() => {
|
||||
return blogData.posts.filter(post => {
|
||||
const matchesCategory = selectedCategory === 'all' || post.category === selectedCategory;
|
||||
const matchesSearch = searchQuery === '' ||
|
||||
post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
post.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
post.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}, [selectedCategory, searchQuery]);
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
minHeight: '100vh',
|
||||
background: colors.paper,
|
||||
color: colors.ink,
|
||||
}}>
|
||||
{/* Header Section */}
|
||||
<Box sx={{
|
||||
background: `linear-gradient(to bottom, ${colors.paper} 0%, ${colors.highlight} 100%)`,
|
||||
py: 6,
|
||||
borderBottom: `1px solid ${colors.border}`,
|
||||
}}>
|
||||
<Container maxWidth="lg">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 4 }}>
|
||||
<AnimatedSection ref={heroRef} style={{ animationDelay: heroInView ? '0.1s' : '0s' }}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: 300,
|
||||
color: colors.ink,
|
||||
letterSpacing: '2px',
|
||||
fontFamily: '"Playfair Display", serif',
|
||||
}}
|
||||
>
|
||||
<VintageUnderline>Journal</VintageUnderline>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
mt: 1,
|
||||
color: colors.secondary,
|
||||
fontWeight: 300,
|
||||
fontStyle: 'italic',
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
}}
|
||||
>
|
||||
Stories of Craft, Culture & Heritage
|
||||
</Typography>
|
||||
</AnimatedSection>
|
||||
<AnimatedSection ref={heroRef} style={{ animationDelay: heroInView ? '0.2s' : '0s' }}>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</Box>
|
||||
</AnimatedSection>
|
||||
</Box>
|
||||
|
||||
<AnimatedSection ref={heroRef} style={{ animationDelay: heroInView ? '0.3s' : '0s' }}>
|
||||
<TextField
|
||||
fullWidth
|
||||
placeholder="Search articles..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon sx={{ color: colors.secondary }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
sx: {
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'& fieldset': {
|
||||
borderColor: colors.border,
|
||||
},
|
||||
'&:hover fieldset': {
|
||||
borderColor: colors.accent,
|
||||
},
|
||||
'&.Mui-focused fieldset': {
|
||||
borderColor: colors.accent,
|
||||
},
|
||||
},
|
||||
}
|
||||
}}
|
||||
sx={{ mb: 4 }}
|
||||
/>
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection ref={heroRef} style={{ animationDelay: heroInView ? '0.4s' : '0s' }}>
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
<Chip
|
||||
label="All"
|
||||
onClick={() => setSelectedCategory('all')}
|
||||
variant={selectedCategory === 'all' ? "filled" : "outlined"}
|
||||
sx={{
|
||||
color: selectedCategory === 'all' ? colors.ink : colors.secondary,
|
||||
backgroundColor: selectedCategory === 'all' ? colors.accent : 'transparent',
|
||||
borderColor: colors.border,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
}}
|
||||
/>
|
||||
{blogData.categories.map((category) => (
|
||||
<Chip
|
||||
key={category}
|
||||
label={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
variant={selectedCategory === category ? "filled" : "outlined"}
|
||||
sx={{
|
||||
color: selectedCategory === category ? colors.ink : colors.secondary,
|
||||
backgroundColor: selectedCategory === category ? colors.accent : 'transparent',
|
||||
borderColor: colors.border,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</AnimatedSection>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Blog Posts Grid */}
|
||||
<Container maxWidth="lg" sx={{ py: 6 }}>
|
||||
<Grid container spacing={4}>
|
||||
{filteredPosts.map((post, index) => (
|
||||
<Grid key={post.id}>
|
||||
<BlogCard post={post} index={index} />
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{filteredPosts.length === 0 && (
|
||||
<Box sx={{ textAlign: 'center', py: 10 }}>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
color: colors.secondary,
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
fontStyle: 'italic',
|
||||
}}
|
||||
>
|
||||
No articles found matching your criteria
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Container>
|
||||
|
||||
{/* Footer */}
|
||||
<Box sx={{
|
||||
py: 5,
|
||||
textAlign: 'center',
|
||||
borderTop: `1px solid ${colors.border}`,
|
||||
background: colors.paper,
|
||||
}}>
|
||||
<Container maxWidth="lg">
|
||||
<AnimatedSection style={{ animationDelay: '0.1s' }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
mb: 2,
|
||||
fontWeight: 300,
|
||||
color: colors.ink,
|
||||
letterSpacing: '3px',
|
||||
fontFamily: '"Playfair Display", serif',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
The Craft Chronicle
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: colors.secondary,
|
||||
mb: 3,
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto',
|
||||
fontSize: '0.95rem',
|
||||
fontFamily: '"Cormorant Garamond", serif',
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
Celebrating the stories, techniques, and people behind traditional crafts and heritage arts.
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', gap: 2, mb: 3 }}>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: colors.secondary,
|
||||
opacity: 0.7,
|
||||
fontSize: '0.8rem',
|
||||
fontFamily: '"Cormorant Garamond", serif'
|
||||
}}
|
||||
>
|
||||
© {new Date().getFullYear()} The Craft Chronicle. All rights reserved.
|
||||
</Typography>
|
||||
</AnimatedSection>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPage;
|
||||
|
|
@ -7,11 +7,13 @@ 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'
|
||||
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'
|
||||
import logo from '../../assets/logobgremove.png'
|
||||
|
||||
|
||||
|
||||
// Color palette inspired by Indian heritage
|
||||
|
|
@ -81,20 +83,20 @@ const borderFlow = keyframes`
|
|||
100% { border-color: ${colors.accent}; }
|
||||
`;
|
||||
|
||||
const typewriter = keyframes`
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
`;
|
||||
// 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 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 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); }
|
||||
|
|
@ -107,10 +109,10 @@ const flipIn = keyframes`
|
|||
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 zoomIn = keyframes`
|
||||
// from { transform: scale(0.95); opacity: 0; }
|
||||
// to { transform: scale(1); opacity: 1; }
|
||||
// `;
|
||||
|
||||
const spinSlow = keyframes`
|
||||
from { transform: rotate(0deg); }
|
||||
|
|
@ -227,12 +229,12 @@ const BorderFlowBox = styled(Box)({
|
|||
animation: `${borderFlow} 6s infinite linear`,
|
||||
});
|
||||
|
||||
const TypewriterText = styled(Typography)({
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
margin: '0 auto',
|
||||
animation: `${typewriter} 4s steps(40, end)`,
|
||||
});
|
||||
// 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`,
|
||||
|
|
@ -243,9 +245,9 @@ const FlipInBox = styled(Box)({
|
|||
transformOrigin: 'center',
|
||||
});
|
||||
|
||||
const ZoomInBox = styled(Box)({
|
||||
animation: `${zoomIn} 1s forwards`,
|
||||
});
|
||||
// const ZoomInBox = styled(Box)({
|
||||
// animation: `${zoomIn} 1s forwards`,
|
||||
// });
|
||||
|
||||
// Kalawati story sections with updated Pexels images
|
||||
const storyChapters = [
|
||||
|
|
@ -442,10 +444,10 @@ export const VintageComingSoonPage: React.FC = () => {
|
|||
right: '5%',
|
||||
width: '200px',
|
||||
height: '200px',
|
||||
// backgroundColor: 'black',
|
||||
backgroundImage: `url(${logo})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
opacity: 0.1,
|
||||
opacity: 0.5,
|
||||
zIndex: 0,
|
||||
transform: `rotate(${scrollPosition * 0.02}deg)`,
|
||||
transition: 'transform 0.3s ease-out',
|
||||
|
|
@ -454,6 +456,7 @@ export const VintageComingSoonPage: React.FC = () => {
|
|||
}}
|
||||
/>
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
|
|
@ -461,10 +464,10 @@ export const VintageComingSoonPage: React.FC = () => {
|
|||
left: '5%',
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
// backgroundColor: 'black',
|
||||
backgroundImage: `url(${logo})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
opacity: 0.1,
|
||||
opacity: 0.4,
|
||||
zIndex: 0,
|
||||
transform: `rotate(${-scrollPosition * 0.03}deg)`,
|
||||
transition: 'transform 0.3s ease-out',
|
||||
|
|
@ -10,11 +10,11 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
|||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
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'
|
||||
// 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'
|
||||
// Lighter color palette for product showcase
|
||||
const colors = {
|
||||
lightBase: '#F8F7F4', // Very light cream
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
{
|
||||
"posts": [
|
||||
{
|
||||
"id": "1",
|
||||
"title": "The Art of Hand Block Printing",
|
||||
"excerpt": "Discover the ancient technique of hand block printing that has been passed down through generations of Indian artisans.",
|
||||
"content": "Full content would be here...",
|
||||
"image": "https://images.pexels.com/photos/6011599/pexels-photo-6011599.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"author": {
|
||||
"name": "Priya Sharma",
|
||||
"avatar": "https://images.pexels.com/photos/3762800/pexels-photo-3762800.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"role": "Textile Conservationist"
|
||||
},
|
||||
"date": "2023-10-15",
|
||||
"readTime": "5 min read",
|
||||
"tags": [
|
||||
"Textiles",
|
||||
"Craft",
|
||||
"Heritage"
|
||||
],
|
||||
"category": "Artisan Techniques"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"title": "Natural Dyes: Colors from Nature",
|
||||
"excerpt": "Explore how traditional Indian artisans extract vibrant colors from plants, minerals, and other natural sources.",
|
||||
"content": "Full content would be here...",
|
||||
"image": "https://images.pexels.com/photos/1375736/pexels-photo-1375736.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"author": {
|
||||
"name": "Rajiv Mehta",
|
||||
"avatar": "https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"role": "Natural Dye Expert"
|
||||
},
|
||||
"date": "2023-09-22",
|
||||
"readTime": "7 min read",
|
||||
"tags": [
|
||||
"Eco-friendly",
|
||||
"Sustainability",
|
||||
"Natural"
|
||||
],
|
||||
"category": "Sustainable Practices"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"title": "The Weavers of Varanasi",
|
||||
"excerpt": "A journey into the world of Varanasi's master weavers who create the exquisite Banarasi silk sarees.",
|
||||
"content": "Full content would be here...",
|
||||
"image": "https://images.pexels.com/photos/942803/pexels-photo-942803.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"author": {
|
||||
"name": "Anjali Patel",
|
||||
"avatar": "https://images.pexels.com/photos/3785077/pexels-photo-3785077.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"role": "Textile Historian"
|
||||
},
|
||||
"date": "2023-08-30",
|
||||
"readTime": "8 min read",
|
||||
"tags": [
|
||||
"Weaving",
|
||||
"Silk",
|
||||
"Heritage"
|
||||
],
|
||||
"category": "Artisan Stories"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"title": "Reviving Ancient Embroidery Techniques",
|
||||
"excerpt": "How contemporary designers are working with artisans to preserve and modernize traditional embroidery methods.",
|
||||
"content": "Full content would be here...",
|
||||
"image": "https://images.pexels.com/photos/6347892/pexels-photo-6347892.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"author": {
|
||||
"name": "Sanjay Kumar",
|
||||
"avatar": "https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=500",
|
||||
"role": "Fashion Designer"
|
||||
},
|
||||
"date": "2023-08-15",
|
||||
"readTime": "6 min read",
|
||||
"tags": [
|
||||
"Embroidery",
|
||||
"Design",
|
||||
"Revival"
|
||||
],
|
||||
"category": "Design Innovation"
|
||||
}
|
||||
],
|
||||
"categories": [
|
||||
"Artisan Techniques",
|
||||
"Sustainable Practices",
|
||||
"Artisan Stories",
|
||||
"Design Innovation",
|
||||
"Cultural Heritage"
|
||||
],
|
||||
"tags": [
|
||||
"Textiles",
|
||||
"Craft",
|
||||
"Heritage",
|
||||
"Eco-friendly",
|
||||
"Sustainability",
|
||||
"Natural",
|
||||
"Weaving",
|
||||
"Silk",
|
||||
"Embroidery",
|
||||
"Design",
|
||||
"Revival"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
export interface BlogAuthor {
|
||||
name: string;
|
||||
avatar: string;
|
||||
role: string;
|
||||
}
|
||||
|
||||
export interface BlogPost {
|
||||
id: string;
|
||||
title: string;
|
||||
excerpt: string;
|
||||
content: string;
|
||||
image: string;
|
||||
author: BlogAuthor;
|
||||
date: string;
|
||||
readTime: string;
|
||||
tags: string[];
|
||||
category: string;
|
||||
}
|
||||
|
||||
export interface BlogData {
|
||||
posts: BlogPost[];
|
||||
categories: string[];
|
||||
tags: string[];
|
||||
}
|
||||
Loading…
Reference in New Issue