alirez.brandCursor
a47ec493c5
Introduce a footer-triggered Version History drawer with categorized release notes, hardcoded release data, and semver tracking at v0.3.0. Also ships blog blockquote/table styling, site-wide typography, home page image updates, header refinements, and related bug fixes. Co-authored-by: Cursor <cursoragent@cursor.com>
285 lines
12 KiB
TypeScript
285 lines
12 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import Link from "next/link";
|
|
import { ChevronLeft } 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";
|
|
import { getHomeImages } from "@/lib/home-images";
|
|
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="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={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>
|
|
|
|
|
|
<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={cn("mx-auto mt-8 max-w-4xl", type.display, "max-md:font-semibold 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="/solutions">
|
|
<span className="text-nowrap">مشاهده راهکارها</span>
|
|
<ChevronLeft className="size-4" aria-hidden />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</AnimatedGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<AnimatedGroup
|
|
variants={{
|
|
container: {
|
|
visible: {
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
delayChildren: 0.75,
|
|
},
|
|
},
|
|
},
|
|
...transitionVariants,
|
|
}}
|
|
>
|
|
<div className="relative mt-8 overflow-visible px-6 sm:mt-12 md:mt-20 md:p-2 md:px-2">
|
|
<div className="relative w-full max-w-5xl md:max-w-4xl mx-auto">
|
|
<div className="relative w-full rounded-2xl">
|
|
{/* Glow effect */}
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 blur-3xl -z-10 scale-110 animate-pulse" />
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-400/15 via-purple-400/15 to-pink-400/15 blur-2xl -z-10 scale-105" />
|
|
|
|
<div className="relative w-full aspect-[3/2] overflow-hidden bg-background rounded-2xl border ring-1 ring-border/50 shadow-2xl shadow-blue-500/10 dark:shadow-blue-500/20 md:aspect-auto">
|
|
<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>
|
|
</div>
|
|
</section>
|
|
<section className="bg-background pb-16 pt-16 md:pb-32">
|
|
<div className="m-auto max-w-5xl px-6">
|
|
<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="/solutions"
|
|
className={cn("inline-flex items-center gap-1 transition-colors hover:text-accent", type.link)}
|
|
>
|
|
<span>مشاهده همه یکپارچه‌سازی‌ها</span>
|
|
<ChevronLeft className="size-3" aria-hidden />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|