Initial commit of Balout Pastry public website.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/HomePage.tsx

@@ -0,0 +1,254 @@
+import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { ChevronLeft } from 'lucide-react'
+import HeaderTitle from '../components/HeaderTitle'
+import macaronRight from '../assets/images/brown-macaron-right.png'
+import macaronLeft from '../assets/images/brown-macaron-left.png'
+import chocolateCake from '../assets/images/chocolate-cake.png'
+import deliciousDecorate from '../assets/images/delicious-decorate.png'
+import strawberryDecorate from '../assets/images/strawberry-decorate.png'
+import muffinsDecorate from '../assets/images/muffins-decorate.png'
+import tiramisuCake from '../assets/images/tiramisu-cake.png'
+import sohan from '../assets/images/sohan4.png'
+import sohanPattern from '../assets/images/backImage1.png'
+import cookies from '../assets/images/cookies.png'
+import flatLay from '../assets/images/FlatLay.png'
+import peste from '../assets/images/peste.png'
+import './HomePage.css'
+
+const DECOR_CARDS = [
+  {
+    title: 'انواع',
+    subtitle: 'کیـــــــــــک',
+    image: deliciousDecorate,
+    to: '/products/cake',
+  },
+  {
+    title: 'انواع',
+    subtitle: 'شیرینـــــی',
+    image: strawberryDecorate,
+    to: '/products/shirini',
+  },
+  {
+    title: 'انواع',
+    subtitle: 'نـــــــــــــان',
+    image: muffinsDecorate,
+  },
+]
+
+const OFFER_CATEGORIES = [
+  {
+    title: 'شیرینی',
+    description:
+      'شیرینی‌های بلوط همیشه تازه، خوش‌طعم و باکیفیت تهیه می‌شوند 🌰 از مدل‌های ساده برای دورهمی‌های خانوادگی تا شیرینی‌های شیک و مجلسی، همه با بهترین مواد اولیه آماده می‌شوند تا کنار هر فنجان چای و هر جشن، لحظه‌هایتان شیرین‌تر شود.',
+  },
+  { title: 'كيكی جات' },
+  { title: 'شیرینی تر' },
+  { title: 'شیرینی خشک' },
+  { title: 'زولبیا و بامیه' },
+  { title: 'کیک شکلاتی' },
+  { title: 'کیک' },
+  { title: 'وسایل تم تولد' },
+  { title: 'سوهان' },
+  { title: 'آجیل و شکلات' },
+  { title: 'دسر ها' },
+  { title: 'شیرینی ها' },
+  { title: 'کیک های خامه ای' },
+]
+
+export default function HomePage() {
+  const [openOffer, setOpenOffer] = useState(0)
+
+  useEffect(() => {
+    document.title = 'شیرینی بلوط - صفحه اصلی'
+  }, [])
+
+  return (
+    <div className="home">
+      {/* Hero title */}
+      <HeaderTitle
+        placeholder="Balout"
+        primary="شیرینی بلوط"
+        secondary="بلوط؛ شیرینیِ لحظه‌های کنار هم بودن"
+        size="xl"
+        align="center"
+        primaryFirst
+        className="home__hero-title"
+      />
+
+      {/* Carousel / cake with macarons */}
+      <div className="carousel-layout">
+        <div className="carousel-layout__side carousel-layout__side--right">
+          <img src={macaronRight} alt="" className="carousel-layout__img--right" />
+        </div>
+        <div className="carousel-layout__center">
+          <img src={chocolateCake} alt="کیک شکلاتی" className="carousel-layout__cake" />
+        </div>
+        <div className="carousel-layout__side carousel-layout__side--left">
+          <img src={macaronLeft} alt="" className="carousel-layout__img--left" />
+        </div>
+      </div>
+
+      {/* For The Best */}
+      <HeaderTitle
+        placeholder="For The Best"
+        secondary="بهترین ها"
+        primary="را از مــــا بخـــــواهید"
+        size="lg"
+        align="center"
+        className="home__best-title"
+      />
+
+      {/* Decor cards */}
+      <div className="max-container home-decor">
+        <div className="home-decor__row">
+          {DECOR_CARDS.map((card) => {
+            const content = (
+              <>
+                <div className="home-decor__card-text">
+                  <p className="home-decor__cards--title">{card.title}</p>
+                  <p className="home-decor__cards--subtitle">{card.subtitle}</p>
+                </div>
+                <img src={card.image} alt={card.subtitle} />
+              </>
+            )
+
+            return card.to ? (
+              <Link
+                key={card.subtitle}
+                to={card.to}
+                className="home-decor__card home-decor__card--link"
+              >
+                {content}
+              </Link>
+            ) : (
+              <div key={card.subtitle} className="home-decor__card">
+                {content}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* About */}
+      <div className="max-container about-section">
+        <div className="about-section__image">
+          <img src={tiramisuCake} alt="تیرامیسو" />
+        </div>
+        <div className="about-section__content">
+          <HeaderTitle
+            placeholder="About Us"
+            secondary="درباره"
+            primary="شیرینی بلوط"
+            size="lg"
+            align="start"
+          />
+          <p className="about-section__description">
+            شیرینی‌سرای بلوط از سال ۱۳۷۸ در قم فعالیت خود را آغاز کرده و با بیش از دو دهه تجربه،
+            به عنوان نامی قابل اعتماد در تولید کیک و شیرینی شناخته می‌شود. این مجموعه با ترکیب
+            مهارت، خلاقیت و مواد اولیه باکیفیت، انواع کیک‌های ساده تا عروسی و سفارشی را با دقت و
+            تازگی بالا ارائه می‌دهد و رضایت مشتری را اولویت اصلی خود می‌داند.
+          </p>
+        </div>
+      </div>
+
+      {/* Sohan */}
+      <section className="sohan-section">
+        <img src={peste} alt="" className="sohan-section__peste" />
+        <div className="sohan-section__inner">
+          <div className="sohan-section__top">
+            <div className="sohan-section__media">
+              <img src={sohan} alt="سوهان" className="sohan-section__image" />
+              <img src={sohanPattern} alt="" className="sohan-section__pattern" />
+            </div>
+            <HeaderTitle
+              placeholder="Sohan"
+              secondary="سوهان"
+              primary="لذیذ و تازه بلوط"
+              size="lg"
+              align="start"
+              className="sohan-section__title"
+            />
+          </div>
+          <p className="sohan-section__text">
+            سوهان یکی از اصیل‌ترین سوغات قم است که در شیرینی‌سرای بلوط با استفاده از مواد اولیه
+            باکیفیت و تازه تهیه می‌شود. عطر دل‌انگیز کره و زعفران در کنار بافتی لطیف و طعمی
+            ماندگار، سوهان بلوط را به انتخابی مناسب برای پذیرایی و هدیه تبدیل کرده است.
+          </p>
+        </div>
+      </section>
+
+      {/* Special offers + hours */}
+      <div className="home-footer-block">
+        <section className="offers-wrapper">
+          <div className="offers-wrapper__img">
+            <img src={cookies} alt="کوکی" />
+          </div>
+
+          <HeaderTitle
+            placeholder="Special Menu Offers"
+            secondary="پیشنهاد ویژه"
+            primary="مارو از دست ندید!"
+            size="lg"
+            align="center"
+            className="offers-wrapper__title"
+          />
+
+          <div className="offers">
+            {OFFER_CATEGORIES.map((cat, index) => {
+              const isOpen = openOffer === index
+              return (
+                <div key={cat.title} className="offers__item">
+                  <button
+                    type="button"
+                    className={`offers__trigger${isOpen ? ' offers__trigger--open' : ''}`}
+                    onClick={() => setOpenOffer(isOpen ? -1 : index)}
+                  >
+                    <span className="star">✱</span>
+                    <span>{cat.title}</span>
+                  </button>
+                  {isOpen && cat.description && (
+                    <div className="offers__body">
+                      <p className="offers__description">{cat.description}</p>
+                      <div className="offers__cta">
+                        <Link to="/products" className="btn-primary">
+                          مشاهده محصولات
+                          <ChevronLeft size={14} />
+                        </Link>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+
+          <div className="semicolon">
+            <img src={flatLay} alt="" />
+          </div>
+
+          <HeaderTitle
+            placeholder="Working Hours"
+            secondary="ساعت کاری"
+            primary="کافه نان و شیرینی بلوط"
+            size="lg"
+            align="center"
+          />
+
+          <div className="hours">
+            <div>
+              <span className="star">✱</span>
+              شنبه تا پنجشنبه <span className="hours__number">۸</span> صبـــــــــح /{' '}
+              <span className="hours__number">۱۲</span> شـــــــــــب
+            </div>
+            <div>
+              <span className="star">✱</span>
+              جمعه و تعطیلات <span className="hours__number">۹</span> صبـــــــــح /{' '}
+              <span className="hours__number">۱۲</span> شـــــــــــب
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}