alirez.br
ff2632f8db
- Added image quality settings and device sizes in next.config.ts for better image optimization. - Updated package dependencies, including cheerio and baseline-browser-mapping. - Improved global styles for blog content images to ensure responsiveness. - Refactored button components for consistent sizing and styling across the application. - Enhanced blog post card layout with new variants and improved author name formatting. - Adjusted hero section and content layout for better visual appeal and user experience.
261 lines
11 KiB
TypeScript
261 lines
11 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="/assets/main-pic/main-pic.jpg"
|
|
alt="background"
|
|
className="hidden size-full object-cover dark:block"
|
|
width={1150}
|
|
height={613}
|
|
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="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">
|
|
<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 mt-8 overflow-visible px-2 sm:mt-12 md:mt-20 p-2">
|
|
<div className="relative max-w-4xl mx-auto flex items-center justify-center">
|
|
<div className="relative rounded-2xl overflow-hidden">
|
|
{/* Glow effect */}
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 blur-3xl -z-10 scale-110 animate-pulse" />
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-400/30 via-purple-400/30 to-pink-400/30 blur-2xl -z-10 scale-105" />
|
|
|
|
<div className="relative bg-background rounded-2xl border ring-1 ring-border/50 shadow-2xl shadow-blue-500/10 dark:shadow-blue-500/20">
|
|
<Image
|
|
src="/assets/main-pic/1.jpg"
|
|
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
|
width={1920}
|
|
height={1280}
|
|
className="object-contain rounded-2xl w-full h-auto max-h-[600px] md:max-h-[700px] dark:hidden"
|
|
quality={100}
|
|
priority
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
|
|
/>
|
|
<Image
|
|
src="/assets/main-pic/1dark.jpg"
|
|
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
|
width={1920}
|
|
height={1280}
|
|
className="hidden object-contain rounded-2xl w-full h-auto max-h-[600px] md:max-h-[700px] dark:block"
|
|
quality={100}
|
|
priority
|
|
sizes="(max-width: 768px) 100vw, (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="text-sm font-medium text-muted-foreground">
|
|
یکپارچه با ابزارهای محبوب
|
|
</p>
|
|
<h2 className="mt-2 text-lg font-semibold md:text-xl">
|
|
اتصال به سایر سیستم‌ها
|
|
</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="inline-flex items-center text-sm text-muted-foreground transition-colors hover:text-accent"
|
|
>
|
|
<span>مشاهده همه یکپارچه‌سازی‌ها</span>
|
|
<ChevronRight className="ml-1 inline-block size-3" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|