feat: enhance image handling and layout adjustments
- 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.
This commit is contained in:
alirez.br
+68
-61
@@ -72,9 +72,11 @@ export default function HeroSection() {
|
||||
<Image
|
||||
src="/assets/main-pic/main-pic.jpg"
|
||||
alt="background"
|
||||
className="hidden size-full dark:block"
|
||||
width="1150"
|
||||
height="613"
|
||||
className="hidden size-full object-cover dark:block"
|
||||
width={1150}
|
||||
height={613}
|
||||
quality={100}
|
||||
sizes="100vw"
|
||||
/>
|
||||
</AnimatedGroup>
|
||||
|
||||
@@ -120,7 +122,7 @@ export default function HeroSection() {
|
||||
as="p"
|
||||
className="mx-auto mt-8 max-w-2xl text-balance text-base md:text-lg leading-relaxed tracking-normal"
|
||||
>
|
||||
ما مجموعه‌ای از ابزارهای یکپارچه‌سازی، اتوماسیون و ارتباطات ارائه می‌کنیم که به شما کمک می‌کند داده‌ها، کاربران و فرآیندهای کسب‌وکارتان را از هر سیستم یا پلتفرمی — از وب‌سایت و CRM گرفته تا تلگرام و سرویس‌های سفارشی — به شکلی دقیق، سریع و قابل‌اعتماد بهم متصل کنید.
|
||||
با ابزارهای یکپارچه‌سازی، اتوماسیون و ارتباطات ما، داده‌ها، کاربران و فرآیندهای کسب‌وکارتان را از هر سیستم یا پلتفرمی، از وب‌سایت و CRM تا تلگرام و سرویس‌های سفارشی، دقیق، سریع و قابل اعتماد به هم متصل کنید.
|
||||
</TextEffect>
|
||||
|
||||
<AnimatedGroup
|
||||
@@ -141,11 +143,7 @@ export default function HeroSection() {
|
||||
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"
|
||||
>
|
||||
<Button asChild size="lg">
|
||||
<Link href="#link">
|
||||
<span className="text-nowrap">شروع کنید</span>
|
||||
</Link>
|
||||
@@ -168,78 +166,87 @@ export default function HeroSection() {
|
||||
...transitionVariants,
|
||||
}}
|
||||
>
|
||||
<div className="relative mt-8 overflow-hidden px-2 sm:mt-12 md:mt-20 p-2">
|
||||
<div className="ring-background bg-background relative max-w-5xl mx-auto overflow-hidden rounded-2xl border ring-1 aspect-[3/2]">
|
||||
<Image
|
||||
src="/assets/main-pic/Untitled-1 copy-min.jpg"
|
||||
alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
|
||||
fill
|
||||
className="object-cover rounded-2xl inline-block my-0"
|
||||
quality={100}
|
||||
priority
|
||||
/>
|
||||
<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="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 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="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"
|
||||
/>
|
||||
|
||||
<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"
|
||||
className="translate-x-4 "
|
||||
iconClassName="text-black"
|
||||
/>
|
||||
<LogoItem
|
||||
icon="skill-icons:wordpress"
|
||||
alt="WordPress Logo"
|
||||
size="md"
|
||||
className="-translate-x-2"
|
||||
/>
|
||||
<LogoItem icon="logos:google-icon" alt="Google Logo" size="md" />
|
||||
<LogoItem
|
||||
icon="logos:whatsapp-icon"
|
||||
alt="WhatsApp Logo"
|
||||
size="md"
|
||||
/>
|
||||
<LogoItem
|
||||
icon="logos:google-icon"
|
||||
alt="Google Logo"
|
||||
icon="logos:microsoft-windows-icon"
|
||||
alt="Microsoft Windows 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:whatsapp-icon"
|
||||
alt="WhatsApp Logo"
|
||||
size="md"
|
||||
className="translate-x-2"
|
||||
/>
|
||||
<LogoItem
|
||||
icon="logos:microsoft-windows-icon"
|
||||
alt="Microsoft Windows Logo"
|
||||
size="md"
|
||||
className="translate-x-2"
|
||||
/>
|
||||
<LogoItem
|
||||
icon="skill-icons:github-dark"
|
||||
alt="github Logo"
|
||||
size="md"
|
||||
className="translate-x-4"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user