diff --git a/src/App.tsx b/src/App.tsx index 7c58ace..13c4381 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 */} } /> - {/* } /> */} - {/* } /> */} + } /> + {/* } /> */} ); diff --git a/src/assets/logobgremove.png b/src/assets/logobgremove.png new file mode 100644 index 0000000..daeae86 Binary files /dev/null and b/src/assets/logobgremove.png differ diff --git a/src/components/blogs/BlogCard.tsx b/src/components/blogs/BlogCard.tsx new file mode 100644 index 0000000..7ea53cd --- /dev/null +++ b/src/components/blogs/BlogCard.tsx @@ -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 = ({ post, index }) => { + const navigate = useNavigate(); + + const handleReadMore = () => { + navigate(`/blog/${post.id}`); + }; + + // Calculate animation delays for staggered effect + const animationDelay = `${index * 0.15}s`; + + return ( + + + + + + + + + + + + + + {post.author.name} + + + {post.author.role} + + + + + + {post.title} + + + + {post.excerpt} + + + + + + {post.date} • {post.readTime} + + + + + + + {post.tags.map((tag, i) => ( + + ))} + + + + ); +}; + +export default BlogCard; \ No newline at end of file diff --git a/src/components/blogs/BlogPage.tsx b/src/components/blogs/BlogPage.tsx new file mode 100644 index 0000000..d1b8a99 --- /dev/null +++ b/src/components/blogs/BlogPage.tsx @@ -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 ( + + {/* Header Section */} + + + + + + Journal + + + Stories of Craft, Culture & Heritage + + + + + + + + + + + + + + + + + + + setSearchQuery(e.target.value)} + InputProps={{ + startAdornment: ( + + + + ), + 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 }} + /> + + + + + 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) => ( + 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', + }} + /> + ))} + + + + + + {/* Blog Posts Grid */} + + + {filteredPosts.map((post, index) => ( + + + + ))} + + + {filteredPosts.length === 0 && ( + + + No articles found matching your criteria + + + )} + + + {/* Footer */} + + + + + The Craft Chronicle + + + Celebrating the stories, techniques, and people behind traditional crafts and heritage arts. + + + + + + + + + + + + + + © {new Date().getFullYear()} The Craft Chronicle. All rights reserved. + + + + + + ); +}; + +export default BlogPage; \ No newline at end of file diff --git a/src/comingsoon/comingsoon.tsx b/src/components/comingsoon/comingsoon.tsx similarity index 97% rename from src/comingsoon/comingsoon.tsx rename to src/components/comingsoon/comingsoon.tsx index 435a3d9..02c2371 100644 --- a/src/comingsoon/comingsoon.tsx +++ b/src/components/comingsoon/comingsoon.tsx @@ -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 = () => { }} /> + { 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', diff --git a/src/product/product.tsx b/src/components/product/product.tsx similarity index 99% rename from src/product/product.tsx rename to src/components/product/product.tsx index e11a526..d23f0a2 100644 --- a/src/product/product.tsx +++ b/src/components/product/product.tsx @@ -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 diff --git a/src/data/blogs.json b/src/data/blogs.json new file mode 100644 index 0000000..75dd740 --- /dev/null +++ b/src/data/blogs.json @@ -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" + ] +} \ No newline at end of file diff --git a/src/types/blogs.tsx b/src/types/blogs.tsx new file mode 100644 index 0000000..ad1e83c --- /dev/null +++ b/src/types/blogs.tsx @@ -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[]; +} \ No newline at end of file