249 lines
10 KiB
TypeScript
249 lines
10 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { ArrowLeft, ArrowRight, ChevronRight } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
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";
|
|
|
|
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() {
|
|
return (
|
|
<>
|
|
<main className="overflow-hidden">
|
|
<div
|
|
aria-hidden
|
|
className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
|
|
>
|
|
<div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
|
|
<div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
|
|
<div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
|
|
</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="https://ik.imagekit.io/lrigu76hy/tailark/night-background.jpg?updatedAt=1745733451120"
|
|
alt="background"
|
|
className="hidden size-full dark:block"
|
|
width="3276"
|
|
height="4095"
|
|
/>
|
|
</AnimatedGroup>
|
|
|
|
|
|
<div className="mx-auto max-w-7xl px-6">
|
|
<div className="text-center sm:mx-auto lg:mr-auto lg:mt-0">
|
|
<AnimatedGroup variants={transitionVariants}>
|
|
<Link
|
|
href="#link"
|
|
className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 ps-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
|
|
>
|
|
<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="mx-auto mt-8 max-w-4xl text-balance text-3xl max-md:font-semibold md:text-4xl lg:mt-16 lg:text-5xl leading-relaxed tracking-normal"
|
|
>
|
|
راه‌حل‌های مدرن برای تعامل هوشمند با مشتری و سیستم‌های شما
|
|
</TextEffect>
|
|
<TextEffect
|
|
per="line"
|
|
preset="fade-in-blur"
|
|
speedSegment={0.3}
|
|
delay={0.5}
|
|
as="p"
|
|
className="mx-auto mt-8 max-w-2xl text-balance text-base md:text-lg leading-relaxed tracking-normal"
|
|
>
|
|
ما مجموعه‌ای از ابزارهای یکپارچه‌سازی، اتوماسیون و ارتباطات ارائه می‌کنیم که به شما کمک می‌کند داده‌ها، کاربران و فرآیندهای کسب‌وکارتان را از هر سیستم یا پلتفرمی — از وب‌سایت و 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"
|
|
className="rounded-xl px-5 text-base"
|
|
>
|
|
<Link href="#link">
|
|
<span className="text-nowrap">شروع کنید</span>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</AnimatedGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<AnimatedGroup
|
|
variants={{
|
|
container: {
|
|
visible: {
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
delayChildren: 0.75,
|
|
},
|
|
},
|
|
},
|
|
...transitionVariants,
|
|
}}
|
|
>
|
|
<div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
|
|
<div className="ring-background bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border ring-1 shadow-[0_20px_50px_rgba(59,130,246,0.4)]">
|
|
<Image
|
|
className="bg-background aspect-15/8 relative w-full h-full rounded-2xl object-cover"
|
|
src="/assets/1.jpg"
|
|
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
|
width={2700}
|
|
height={1440}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AnimatedGroup>
|
|
</div>
|
|
</section>
|
|
<section className="bg-background pb-16 pt-16 md:pb-32">
|
|
<div className="group relative m-auto max-w-5xl px-6">
|
|
<div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
|
|
<Link
|
|
href="/"
|
|
className="block text-sm duration-150 hover:text-accent transition-colors"
|
|
>
|
|
<span> اتصال به سایر سیستم ها </span>
|
|
|
|
<ChevronRight className="ml-1 inline-block size-3" />
|
|
</Link>
|
|
</div>
|
|
<div className="group-hover:blur-xs mx-auto mt-12 grid max-w-4xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
|
|
<LogoItem
|
|
icon="logos:telegram"
|
|
alt="Telegram Logo"
|
|
size="md"
|
|
className="translate-x-1"
|
|
/>
|
|
<LogoItem
|
|
icon="logos:whatsapp-icon"
|
|
alt="WhatsApp Logo"
|
|
size="md"
|
|
className="translate-x-4"
|
|
/>
|
|
<LogoItem
|
|
icon="logos:wordpress-icon"
|
|
alt="WordPress Logo"
|
|
size="md"
|
|
className="-translate-x-2"
|
|
/>
|
|
<LogoItem
|
|
icon="logos:google-icon"
|
|
alt="Google Logo"
|
|
size="md"
|
|
className="translate-x-5"
|
|
/>
|
|
<div className="col-span-4 flex justify-center gap-x-12 sm:gap-x-40">
|
|
<LogoItem
|
|
icon="logos:zapier-icon"
|
|
alt="Zapier Logo"
|
|
size="md"
|
|
className="translate-x-0"
|
|
/>
|
|
<LogoItem
|
|
icon="logos:microsoft-windows-icon"
|
|
alt="Microsoft Windows Logo"
|
|
size="md"
|
|
className="translate-x-2"
|
|
/>
|
|
<LogoItem
|
|
icon="logos:ios"
|
|
alt="iOS Logo"
|
|
size="md"
|
|
className="translate-x-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|