feature/coming_soon #3
|
|
@ -1,7 +1,8 @@
|
||||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
import VintageComingSoonPage from "./comingsoon/comingsoon";
|
import VintageComingSoonPage from "./components/comingsoon/comingsoon";
|
||||||
import DarkProductShowcase from "./product/product";
|
import DarkProductShowcase from "./components/product/product";
|
||||||
|
import BlogPage from "./components/blogs/BlogPage";
|
||||||
// import OtherPage from "./pages/OtherPage"; // example if you add more pages
|
// import OtherPage from "./pages/OtherPage"; // example if you add more pages
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
@ -13,8 +14,8 @@ function App() {
|
||||||
|
|
||||||
{/* Example extra routes */}
|
{/* Example extra routes */}
|
||||||
<Route path="/home" element={<DarkProductShowcase />} />
|
<Route path="/home" element={<DarkProductShowcase />} />
|
||||||
{/* <Route path="/about" element={<AboutPage />} /> */}
|
<Route path="/blog" element={<BlogPage />} />
|
||||||
{/* <Route path="/contact" element={<ContactPage />} /> */}
|
{/* <Route path="/blog" element={<BlogCard />} /> */}
|
||||||
</Routes>
|
</Routes>
|
||||||
</Router>
|
</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 EmailIcon from '@mui/icons-material/Email';
|
||||||
import { keyframes } from '@emotion/react';
|
import { keyframes } from '@emotion/react';
|
||||||
import { styled } from '@mui/system';
|
import { styled } from '@mui/system';
|
||||||
import image1 from '../assets/group1.jpg'
|
import image1 from '../../assets/group1.jpg'
|
||||||
import image2 from '../assets/solo1.jpg'
|
import image2 from '../../assets/solo1.jpg'
|
||||||
import image3 from '../assets/solo2.jpg'
|
import image3 from '../../assets/solo2.jpg'
|
||||||
import image4 from '../assets/bag1.jpg'
|
import image4 from '../../assets/bag1.jpg'
|
||||||
import image5 from '../assets/bag2.jpg'
|
import image5 from '../../assets/bag2.jpg'
|
||||||
|
import logo from '../../assets/logobgremove.png'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Color palette inspired by Indian heritage
|
// Color palette inspired by Indian heritage
|
||||||
|
|
@ -81,20 +83,20 @@ const borderFlow = keyframes`
|
||||||
100% { border-color: ${colors.accent}; }
|
100% { border-color: ${colors.accent}; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const typewriter = keyframes`
|
// const typewriter = keyframes`
|
||||||
from { width: 0; }
|
// from { width: 0; }
|
||||||
to { width: 100%; }
|
// to { width: 100%; }
|
||||||
`;
|
// `;
|
||||||
|
|
||||||
const fadeInLeft = keyframes`
|
// const fadeInLeft = keyframes`
|
||||||
from { opacity: 0; transform: translateX(-50px); }
|
// from { opacity: 0; transform: translateX(-50px); }
|
||||||
to { opacity: 1; transform: translateX(0); }
|
// to { opacity: 1; transform: translateX(0); }
|
||||||
`;
|
// `;
|
||||||
|
|
||||||
const fadeInRight = keyframes`
|
// const fadeInRight = keyframes`
|
||||||
from { opacity: 0; transform: translateX(50px); }
|
// from { opacity: 0; transform: translateX(50px); }
|
||||||
to { opacity: 1; transform: translateX(0); }
|
// to { opacity: 1; transform: translateX(0); }
|
||||||
`;
|
// `;
|
||||||
|
|
||||||
const bounce = keyframes`
|
const bounce = keyframes`
|
||||||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||||||
|
|
@ -107,10 +109,10 @@ const flipIn = keyframes`
|
||||||
100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
|
100% { transform: perspective(400px) rotateY(0deg); opacity: 1; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const zoomIn = keyframes`
|
// const zoomIn = keyframes`
|
||||||
from { transform: scale(0.95); opacity: 0; }
|
// from { transform: scale(0.95); opacity: 0; }
|
||||||
to { transform: scale(1); opacity: 1; }
|
// to { transform: scale(1); opacity: 1; }
|
||||||
`;
|
// `;
|
||||||
|
|
||||||
const spinSlow = keyframes`
|
const spinSlow = keyframes`
|
||||||
from { transform: rotate(0deg); }
|
from { transform: rotate(0deg); }
|
||||||
|
|
@ -227,12 +229,12 @@ const BorderFlowBox = styled(Box)({
|
||||||
animation: `${borderFlow} 6s infinite linear`,
|
animation: `${borderFlow} 6s infinite linear`,
|
||||||
});
|
});
|
||||||
|
|
||||||
const TypewriterText = styled(Typography)({
|
// const TypewriterText = styled(Typography)({
|
||||||
overflow: 'hidden',
|
// overflow: 'hidden',
|
||||||
whiteSpace: 'nowrap',
|
// whiteSpace: 'nowrap',
|
||||||
margin: '0 auto',
|
// margin: '0 auto',
|
||||||
animation: `${typewriter} 4s steps(40, end)`,
|
// animation: `${typewriter} 4s steps(40, end)`,
|
||||||
});
|
// });
|
||||||
|
|
||||||
const BounceBox = styled(Box)({
|
const BounceBox = styled(Box)({
|
||||||
animation: `${bounce} 2s infinite`,
|
animation: `${bounce} 2s infinite`,
|
||||||
|
|
@ -243,9 +245,9 @@ const FlipInBox = styled(Box)({
|
||||||
transformOrigin: 'center',
|
transformOrigin: 'center',
|
||||||
});
|
});
|
||||||
|
|
||||||
const ZoomInBox = styled(Box)({
|
// const ZoomInBox = styled(Box)({
|
||||||
animation: `${zoomIn} 1s forwards`,
|
// animation: `${zoomIn} 1s forwards`,
|
||||||
});
|
// });
|
||||||
|
|
||||||
// Kalawati story sections with updated Pexels images
|
// Kalawati story sections with updated Pexels images
|
||||||
const storyChapters = [
|
const storyChapters = [
|
||||||
|
|
@ -442,10 +444,10 @@ export const VintageComingSoonPage: React.FC = () => {
|
||||||
right: '5%',
|
right: '5%',
|
||||||
width: '200px',
|
width: '200px',
|
||||||
height: '200px',
|
height: '200px',
|
||||||
// backgroundColor: 'black',
|
backgroundImage: `url(${logo})`,
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
opacity: 0.1,
|
opacity: 0.5,
|
||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
transform: `rotate(${scrollPosition * 0.02}deg)`,
|
transform: `rotate(${scrollPosition * 0.02}deg)`,
|
||||||
transition: 'transform 0.3s ease-out',
|
transition: 'transform 0.3s ease-out',
|
||||||
|
|
@ -454,6 +456,7 @@ export const VintageComingSoonPage: React.FC = () => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
|
|
@ -461,10 +464,10 @@ export const VintageComingSoonPage: React.FC = () => {
|
||||||
left: '5%',
|
left: '5%',
|
||||||
width: '150px',
|
width: '150px',
|
||||||
height: '150px',
|
height: '150px',
|
||||||
// backgroundColor: 'black',
|
backgroundImage: `url(${logo})`,
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
backgroundPosition: 'center',
|
backgroundPosition: 'center',
|
||||||
opacity: 0.1,
|
opacity: 0.4,
|
||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
transform: `rotate(${-scrollPosition * 0.03}deg)`,
|
transform: `rotate(${-scrollPosition * 0.03}deg)`,
|
||||||
transition: 'transform 0.3s ease-out',
|
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 VisibilityIcon from '@mui/icons-material/Visibility';
|
||||||
import { keyframes } from '@emotion/react';
|
import { keyframes } from '@emotion/react';
|
||||||
import { styled } from '@mui/system';
|
import { styled } from '@mui/system';
|
||||||
import image1 from '../assets/group1.jpg'
|
// import image1 from '../assets/group1.jpg'//////
|
||||||
import image2 from '../assets/solo1.jpg'
|
import image2 from '../../assets/solo1.jpg'
|
||||||
import image3 from '../assets/solo2.jpg'
|
// import image3 from '../assets/solo2.jpg'//
|
||||||
import image4 from '../assets/bag1.jpg'
|
import image4 from '../../assets/bag1.jpg'
|
||||||
import image5 from '../assets/bag2.jpg'
|
import image5 from '../../assets/bag2.jpg'
|
||||||
// Lighter color palette for product showcase
|
// Lighter color palette for product showcase
|
||||||
const colors = {
|
const colors = {
|
||||||
lightBase: '#F8F7F4', // Very light cream
|
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