ar.badieiandCursor
c2376b3b9e
Build & Push Docker Image / build (push) Has been cancelled
Refresh the homepage around new hero/services/roadmap sections, shared design tokens, and updated brand assets. Co-authored-by: Cursor <cursoragent@cursor.com>
287 lines
11 KiB
TypeScript
287 lines
11 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
import { ChevronLeft } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Container } from "@/components/container";
|
|
import Image from "next/image";
|
|
import { TextEffect } from "@/components/ui/text-effect";
|
|
import { AnimatedGroup } from "@/components/ui/animated-group";
|
|
import { HeroHeader } from "./header";
|
|
import { LogoItem } from "@/components/ui/logo-item";
|
|
import { getHomeImages } from "@/lib/home-images";
|
|
import { layout } from "@/lib/layout";
|
|
import { type, typeSpacing } from "@/lib/typography";
|
|
|
|
const transitionVariants = {
|
|
item: {
|
|
hidden: {
|
|
opacity: 0,
|
|
filter: "blur(12px)",
|
|
y: 12,
|
|
},
|
|
visible: {
|
|
opacity: 1,
|
|
filter: "blur(0px)",
|
|
y: 0,
|
|
transition: {
|
|
type: "spring",
|
|
bounce: 0.3,
|
|
duration: 1.5,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
export default function HeroSection() {
|
|
const { hero } = getHomeImages();
|
|
|
|
return (
|
|
<>
|
|
<main className="overflow-hidden">
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
|
|
>
|
|
<div className="glow-beam--1 w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full" />
|
|
<div className="glow-beam--2 h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full [translate:5%_-50%]" />
|
|
<div className="glow-beam--3 h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45" />
|
|
</div>
|
|
<section className="bg-background">
|
|
<div className="relative pt-24 md:pt-36">
|
|
<AnimatedGroup
|
|
variants={{
|
|
container: {
|
|
visible: {
|
|
transition: {
|
|
delayChildren: 1,
|
|
},
|
|
},
|
|
},
|
|
item: {
|
|
hidden: {
|
|
opacity: 0,
|
|
y: 20,
|
|
},
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
type: "spring",
|
|
bounce: 0.3,
|
|
duration: 2,
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
className="mask-b-from-35% mask-b-to-90% absolute inset-0 top-56 -z-20 lg:top-32"
|
|
>
|
|
<Image
|
|
src={hero.backgroundDark.src}
|
|
alt="background"
|
|
className="hidden size-full object-cover dark:block"
|
|
width={hero.backgroundDark.width}
|
|
height={hero.backgroundDark.height}
|
|
quality={100}
|
|
sizes="100vw"
|
|
/>
|
|
</AnimatedGroup>
|
|
|
|
|
|
<Container>
|
|
<div className="text-center sm:mx-auto lg:mr-auto lg:mt-0">
|
|
{/* <AnimatedGroup variants={transitionVariants}>
|
|
<Link
|
|
href="#link"
|
|
className="group mx-auto flex w-fit items-center gap-4 rounded-full border bg-muted p-1 ps-4 shadow-md shadow-brand-neutral/5 transition-colors duration-300 hover:bg-background dark:border-t-white/5 dark:shadow-brand-neutral dark:hover:border-t-border"
|
|
>
|
|
<span className="text-foreground text-sm">
|
|
معرفی نسل جدید یکپارچه‌سازی و ارتباطات هوشمند
|
|
</span>
|
|
<span className="dark:border-background block h-4 w-0.5 border-s bg-card dark:bg-muted"></span>
|
|
|
|
<div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
|
|
<div className="flex w-12 translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
|
|
<span className="flex size-6">
|
|
<ArrowRight className="m-auto size-3" />
|
|
</span>
|
|
<span className="flex size-6">
|
|
<ArrowLeft className="m-auto size-3" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</AnimatedGroup> */}
|
|
|
|
<TextEffect
|
|
preset="fade-in-blur"
|
|
speedSegment={0.3}
|
|
as="h1"
|
|
className={cn("mx-auto mt-8 max-w-4xl", type.display, "lg:mt-16")}
|
|
>
|
|
راه‌حل‌های مدرن برای اتصال هوشمند
|
|
|
|
</TextEffect>
|
|
<TextEffect
|
|
per="line"
|
|
preset="fade-in-blur"
|
|
speedSegment={0.3}
|
|
delay={0.5}
|
|
as="p"
|
|
className={cn("mx-auto mt-8 max-w-2xl text-balance", type["body-lg"])}
|
|
>
|
|
با ابزارهای یکپارچه‌سازی، اتوماسیون و ارتباطات ما، داده‌ها، کاربران و فرآیندهای کسب‌وکارتان را از هر سیستم یا پلتفرمی، از وب‌سایت و CRM تا تلگرام و سرویس‌های سفارشی، دقیق، سریع و قابل اعتماد به هم متصل کنید.
|
|
</TextEffect>
|
|
|
|
<AnimatedGroup
|
|
variants={{
|
|
container: {
|
|
visible: {
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
delayChildren: 0.75,
|
|
},
|
|
},
|
|
},
|
|
...transitionVariants,
|
|
}}
|
|
className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
|
|
>
|
|
<div
|
|
key={1}
|
|
className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5"
|
|
>
|
|
<Button asChild size="lg">
|
|
<Link href="#">
|
|
<span className="text-nowrap">مشاهده راهکارها</span>
|
|
<ChevronLeft className="size-4" aria-hidden />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</AnimatedGroup>
|
|
</div>
|
|
|
|
<AnimatedGroup
|
|
variants={{
|
|
container: {
|
|
visible: {
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
delayChildren: 0.75,
|
|
},
|
|
},
|
|
},
|
|
...transitionVariants,
|
|
}}
|
|
>
|
|
<div className="relative mt-8 overflow-visible sm:mt-12 md:mt-20">
|
|
<div className="relative w-full">
|
|
<div className="relative w-full rounded-2xl">
|
|
{/* Glow effect */}
|
|
<div className="absolute inset-0 -z-10 scale-110 rounded-2xl bg-gradient-to-r from-primary/15 via-brand-dark/10 to-primary/10 blur-3xl" />
|
|
<div className="absolute inset-0 -z-10 scale-105 rounded-2xl bg-gradient-to-r from-primary/20 via-transparent to-brand-dark/15 blur-2xl" />
|
|
|
|
<div className="relative aspect-[3/2] w-full overflow-hidden rounded-2xl border bg-background shadow-2xl shadow-primary/10 ring-1 ring-border/50 md:aspect-auto dark:shadow-primary/20">
|
|
<Image
|
|
src={hero.main.src}
|
|
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
|
fill
|
|
className="object-cover rounded-2xl md:hidden dark:hidden"
|
|
quality={100}
|
|
priority
|
|
sizes="100vw"
|
|
/>
|
|
<Image
|
|
src={hero.mainDark.src}
|
|
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
|
fill
|
|
className="hidden object-cover rounded-2xl md:hidden dark:block"
|
|
quality={100}
|
|
priority
|
|
sizes="100vw"
|
|
/>
|
|
<Image
|
|
src={hero.main.src}
|
|
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
|
width={hero.main.width}
|
|
height={hero.main.height}
|
|
className="max-md:hidden object-contain rounded-2xl w-full h-auto max-h-[700px] dark:hidden"
|
|
quality={100}
|
|
priority
|
|
sizes="(max-width: 1200px) 90vw, 1200px"
|
|
/>
|
|
<Image
|
|
src={hero.mainDark.src}
|
|
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
|
width={hero.mainDark.width}
|
|
height={hero.mainDark.height}
|
|
className="max-md:hidden hidden object-contain rounded-2xl w-full h-auto max-h-[700px] dark:block"
|
|
quality={100}
|
|
priority
|
|
sizes="(max-width: 1200px) 90vw, 1200px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AnimatedGroup>
|
|
</Container>
|
|
</div>
|
|
</section>
|
|
<section className={cn("section-shell bg-section-canvas", layout.sectionY)}>
|
|
<Container>
|
|
<div className="text-center">
|
|
<p className={type.eyebrow}>
|
|
یکپارچه با ابزارهای محبوب
|
|
</p>
|
|
<h2 className={cn(typeSpacing.eyebrowToHeading, type.h4)}>
|
|
اتصال به سایر سیستم‌ها
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="mx-auto mt-10 flex max-w-3xl flex-wrap items-center justify-center gap-4 sm:gap-5">
|
|
<LogoItem icon="logos:telegram" alt="Telegram Logo" size="md" />
|
|
<LogoItem
|
|
icon="simple-icons:n8n"
|
|
alt="n8n Logo"
|
|
size="lg"
|
|
iconClassName="text-black"
|
|
/>
|
|
<LogoItem
|
|
icon="skill-icons:wordpress"
|
|
alt="WordPress Logo"
|
|
size="md"
|
|
/>
|
|
<LogoItem icon="logos:google-icon" alt="Google Logo" size="md" />
|
|
<LogoItem
|
|
icon="logos:whatsapp-icon"
|
|
alt="WhatsApp Logo"
|
|
size="md"
|
|
/>
|
|
<LogoItem
|
|
icon="logos:microsoft-windows-icon"
|
|
alt="Microsoft Windows Logo"
|
|
size="md"
|
|
/>
|
|
<LogoItem icon="logos:github-icon" alt="GitHub Logo" size="md" />
|
|
</div>
|
|
|
|
<div className="mt-8 text-center">
|
|
<Link
|
|
href="#"
|
|
className={cn("inline-flex items-center gap-1 transition-colors hover:text-primary", type.link)}
|
|
>
|
|
<span>مشاهده همه یکپارچه‌سازی‌ها</span>
|
|
<ChevronLeft className="size-3" aria-hidden />
|
|
</Link>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|