123 lines
4.3 KiB
TypeScript
123 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
import Navbar from "@/components/Navbar/Navbar";
|
|
import Footer from "@/components/Footer/Footer";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import styles from "./blog.module.css";
|
|
import { blogData } from "@/utils/constant";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function BlogPage() {
|
|
// Animation variants
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.15,
|
|
delayChildren: 0.2
|
|
}
|
|
}
|
|
};
|
|
|
|
const cardVariants = {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: 30
|
|
},
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.6
|
|
}
|
|
}
|
|
};
|
|
|
|
const heroVariants = {
|
|
hidden: { opacity: 0, y: -20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.8
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className={styles.main}>
|
|
<Navbar />
|
|
|
|
<motion.section
|
|
className={styles.hero}
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={heroVariants}
|
|
>
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>Our Blog</h1>
|
|
<p className={styles.breadcrumb}>
|
|
<Link href="/">Home</Link> / Blog
|
|
</p>
|
|
</div>
|
|
</motion.section>
|
|
|
|
<section className={styles.sectionHeading}>
|
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
|
<Image src="/images/dinner.png" alt="icon" width={24} height={24} />
|
|
<span>ANTALYA</span>
|
|
<Image src="/images/eat.png" alt="icon" width={24} height={24} />
|
|
</div>
|
|
<h2 className={styles.mainHeading}>Stories From Our Kitchen, And Traditions</h2>
|
|
<p className={styles.description}>
|
|
Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
|
|
</p>
|
|
</section>
|
|
|
|
<section className={styles.blogSection}>
|
|
<motion.div
|
|
className={styles.grid}
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={containerVariants}
|
|
>
|
|
{blogData.map((blog) => (
|
|
<motion.div
|
|
key={blog.id}
|
|
className={styles.card}
|
|
variants={cardVariants}
|
|
whileHover={{
|
|
y: -8,
|
|
transition: { duration: 0.3 }
|
|
}}
|
|
>
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src={blog.image}
|
|
alt={blog.title}
|
|
fill
|
|
style={{ objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
<div className={styles.cardContent}>
|
|
<h3 className={styles.blogTitle}>
|
|
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
|
|
</h3>
|
|
<p className={styles.date}>{blog.date}</p>
|
|
<p className={styles.excerpt}>{blog.excerpt}</p>
|
|
<Link href={`/blog/${blog.slug}`} className={styles.button}>
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|