Initial commit: Alma Beauti Next.js site.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-31 19:00:05 +03:30
commit 755eb424b2
102 changed files with 10854 additions and 0 deletions
@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { site, slides } from "@/data/site";
+
+function pad(n: number) {
+  return String(n).padStart(2, "0");
+}
+
+export default function HeroSlider() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIndex((current) => (current + 1) % slides.length);
+    }, 5500);
+    return () => clearInterval(timer);
+  }, []);
+
+  const prev = () => setIndex((current) => (current - 1 + slides.length) % slides.length);
+  const next = () => setIndex((current) => (current + 1) % slides.length);
+
+  return (
+    <section className="hero container-fluid">
+      <h1 className="sr-only">
+        {site.name} — {site.tagline}
+      </h1>
+      <div className="hero-slider">
+        {slides.map((slide, i) => (
+          <div
+            key={slide.image}
+            className={`hero-slide${i === index ? " active" : ""}`}
+            style={{ backgroundImage: `url(${slide.image})` }}
+            role="img"
+            aria-label={slide.alt}
+          />
+        ))}
+      </div>
+
+      <div className="hero-bar">
+        <div className="hero-scroll">
+          <span>اسکرول کنید</span>
+          <a href="#about" className="circle-btn" aria-label="اسکرول به درباره ما">
+            ↓
+          </a>
+        </div>
+        <div className="hero-count" dir="ltr">
+          <b>{pad(index + 1)}</b>
+          &nbsp;/&nbsp;
+          <span>{pad(slides.length)}</span>
+        </div>
+        <div className="hero-tools">
+          <div className="hero-arrows">
+            <button type="button" className="circle-btn" onClick={prev} aria-label="اسلاید قبلی">
+              ›
+            </button>
+            <button type="button" className="circle-btn" onClick={next} aria-label="اسلاید بعدی">
+              ‹
+            </button>
+          </div>
+          <div className="hero-social">
+            <a href={site.telegram} target="_blank" rel="noreferrer" aria-label="تلگرام">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M21.5 3.2 18.3 20.3c-.24 1.05-.86 1.3-1.74.81l-4.82-3.55-2.32 2.23c-.26.26-.47.47-.97.47l.35-4.9L17.7 6.4c.38-.33-.08-.52-.59-.19L7.2 13.7 2.45 12.2c-1.03-.32-1.05-1.03.22-1.53L20.2 3c.86-.33 1.61.2 1.3.2z" />
+              </svg>
+            </a>
+            <a href={site.instagram} target="_blank" rel="noreferrer" aria-label="اینستاگرام">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <rect x="3.5" y="3.5" width="17" height="17" rx="5" />
+                <circle cx="12" cy="12" r="4" />
+                <circle cx="17.4" cy="6.6" r="0.8" fill="currentColor" />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}