Update content in about blocks to reflect new branding and messaging for various products. Key changes include rephrasing descriptions, updating titles, and modifying statistics to better align with the current offerings and mission statements. This enhances clarity and consistency across the platform.
This commit is contained in:
mr.sabri
+63
-156
@@ -1,9 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import React, { useState } from "react";
|
||||
|
||||
import type { CarouselApi } from "@/components/ui/carousel";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
@@ -17,70 +15,49 @@ const SLIDES = [
|
||||
{
|
||||
name: "کاوه مرادی",
|
||||
content:
|
||||
"Laravel نحوه ساخت اپلیکیشن‌های وب ما را کاملاً متحول کرد. نحو زیبا، قابلیت‌های قدرتمند و مستندات عالی، توسعه را لذت‌بخش کرده است.",
|
||||
logo: "/block-media/shadcnblocks/block/logos/laravel-wordmark.svg",
|
||||
"معماری مدرن و قابلیت‌های پیشرفته این پلتفرم، زمان توسعه APIهای سازمانی ما را ۴۰٪ کاهش داد و کیفیت کد را به‌طور قابل‌توجهی ارتقا بخشید.",
|
||||
logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark-black.svg",
|
||||
logoAlt: "لوگوی Laravel",
|
||||
logoClass: "h-10 md:h-12",
|
||||
imageAlt: "نمونه کار توسعه وب با Laravel",
|
||||
images: [
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/fabian-centeno-njeVb6E3XB8-unsplash.jpg",
|
||||
position: 2,
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/israel-andrade-YI_9SivVt_s-unsplash.jpg",
|
||||
position: 4,
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg",
|
||||
position: 7,
|
||||
},
|
||||
{ src: "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg", position: 0 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/fabian-centeno-njeVb6E3XB8-unsplash.jpg", position: 2 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg", position: 5 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 3 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/tirza-van-dijk-o1SKqmgSDbg-unsplash.jpg", position: 1 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg", position: 6 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/annie-spratt-hCb3lIB8L8E-unsplash.jpg", position: 4 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/stephen-dawson-qwtCeJ5cLYs-unsplash.jpg", position: 7 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/vitaly-gariev-y7xUr3aDLXc-unsplash.jpg", position: 8 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "مهسا نوری",
|
||||
content:
|
||||
"همکاری با این تیم کسب‌وکار ما را کاملاً متحول کرد. توجه به جزئیات و راهکارهای نوآورانه آن‌ها باعث شد در تنها شش ماه، درآمدمان ۴۰٪ افزایش یابد.",
|
||||
logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark.svg",
|
||||
"پیاده‌سازی استراتژی دیجیتال مارکتینگ به‌صورت داده‌محور، نرخ تبدیل ما را در ۶ ماه ۴۰٪ افزایش داد و هزینه جذب مشتری ۳۵٪ کاهش یافت.",
|
||||
logo: "/block-media/shadcnblocks/block/logos/tailwind-wordmark-black.svg",
|
||||
logoAlt: "لوگوی Tailwind CSS",
|
||||
logoClass: "h-6 md:h-8",
|
||||
imageAlt: "نمونه کار طراحی رابط کاربری",
|
||||
images: [
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg",
|
||||
position: 1,
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg",
|
||||
position: 3,
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg",
|
||||
position: 5,
|
||||
},
|
||||
{ src: "/block-media/shadcnblocks/block/photos/annie-spratt-AkftcHujUmk-unsplash.jpg", position: 1 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/nastuh-abootalebi-yWwob8kwOCk-unsplash.jpg", position: 3 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/alvin-engler-bIhpiQA009k-unsplash.jpg", position: 5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "امیر محمدی",
|
||||
content:
|
||||
"این محصول فراتر از تمام انتظارات ما بود. شهودی، قدرتمند و دقیقاً همان چیزی که برای ساده‌سازی فرآیندهایمان نیاز داشتیم. برای هر کسب‌وکاری توصیه می‌شود.",
|
||||
"داشبورد تحلیلی یکپارچه با ارائه بینش‌های بلادرنگ، به تیم مدیریتی امکان تصمیم‌گیری سریع‌تر و دقیق‌تر را داد و هماهنگی بین واحدها را بهبود بخشید.",
|
||||
logo: "/block-media/shadcnblocks/block/logos/vercel-wordmark.svg",
|
||||
logoAlt: "لوگوی Vercel",
|
||||
logoClass: "h-6 md:h-8",
|
||||
imageAlt: "نمونه کار استقرار و زیرساخت ابری",
|
||||
images: [
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/redd-f-5U_28ojjgms-unsplash.jpg",
|
||||
position: 0,
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg",
|
||||
position: 4,
|
||||
},
|
||||
{
|
||||
src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg",
|
||||
position: 7,
|
||||
},
|
||||
{ src: "/block-media/shadcnblocks/block/photos/redd-f-5U_28ojjgms-unsplash.jpg", position: 0 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg", position: 4 },
|
||||
{ src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg", position: 7 },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -90,127 +67,57 @@ interface CaseStudies5Props {
|
||||
}
|
||||
|
||||
const CaseStudies5 = ({ className }: CaseStudies5Props) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [carouselApi, setCarouselApi] = useState<CarouselApi>();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!carouselApi) {
|
||||
return;
|
||||
}
|
||||
|
||||
const onSelect = () => {
|
||||
setCurrentIndex(carouselApi.selectedScrollSnap());
|
||||
};
|
||||
|
||||
carouselApi.on("select", onSelect);
|
||||
return () => {
|
||||
carouselApi.off("select", onSelect);
|
||||
};
|
||||
}, [carouselApi]);
|
||||
|
||||
const renderGrid = (
|
||||
images: (typeof SLIDES)[0]["images"],
|
||||
imageAlt: string,
|
||||
) => {
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-3 grid-rows-3 gap-3 p-3">
|
||||
{Array.from({ length: 9 }).map((_, index) => {
|
||||
const image = images.find((img) => img.position === index);
|
||||
const isImage = Boolean(image);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
"w-full overflow-hidden rounded-lg",
|
||||
!isImage && "bg-muted",
|
||||
)}
|
||||
>
|
||||
{isImage && image?.src && (
|
||||
<img
|
||||
src={image.src}
|
||||
alt={imageAlt}
|
||||
className="aspect-square h-full w-full object-cover md:aspect-video"
|
||||
loading={index === 0 ? "eager" : "lazy"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className={cn("bg-background py-32", className)}
|
||||
>
|
||||
<div className="relative container">
|
||||
<div className="mx-auto w-full overflow-hidden rounded-lg md:border">
|
||||
<Carousel setApi={setCarouselApi}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2">
|
||||
<div className="relative">
|
||||
<CarouselContent>
|
||||
{SLIDES.map((testimonial, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<div className="relative flex items-center justify-center overflow-hidden md:h-[500px]">
|
||||
{renderGrid(testimonial.images, testimonial.imageAlt)}
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</div>
|
||||
|
||||
<div className="z-2 flex h-full items-center p-4 md:p-10">
|
||||
<div className="flex flex-col gap-y-6 md:gap-y-8">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentIndex}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
className="flex h-12 items-center gap-3"
|
||||
>
|
||||
<img
|
||||
src={SLIDES[currentIndex].logo}
|
||||
alt={SLIDES[currentIndex].logoAlt}
|
||||
className={SLIDES[currentIndex].logoClass}
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.p
|
||||
key={currentIndex}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{
|
||||
duration: 0.4,
|
||||
ease: "easeOut",
|
||||
delay: 0.15,
|
||||
}}
|
||||
className="min-h-[100px] text-start leading-snug tracking-tight text-muted-foreground sm:text-xl xl:ms-8"
|
||||
>
|
||||
{SLIDES[currentIndex].content}
|
||||
</motion.p>
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="flex h-12 gap-4">
|
||||
<CarouselPrevious className="static translate-y-0 rtl:rotate-180" />
|
||||
<CarouselNext className="static translate-y-0 rtl:rotate-180" />
|
||||
<div className="container">
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent>
|
||||
{SLIDES.map((slide, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<div className="flex flex-col md:flex-row">
|
||||
<div className="w-full md:w-1/2 p-4">
|
||||
<div className="grid h-[400px] grid-cols-3 grid-rows-3 gap-1">
|
||||
{Array.from({ length: 9 }).map((_, idx) => {
|
||||
const image = slide.images.find((img) => img.position === idx);
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="overflow-hidden rounded-md bg-muted"
|
||||
>
|
||||
{image && (
|
||||
<img
|
||||
src={image.src}
|
||||
alt={slide.imageAlt}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full flex-col justify-center p-8 md:w-1/2">
|
||||
<img
|
||||
src={slide.logo}
|
||||
alt={slide.logoAlt}
|
||||
className={cn("mb-6", slide.logoClass)}
|
||||
/>
|
||||
<p className="mb-6 leading-relaxed text-muted-foreground">
|
||||
{slide.content}
|
||||
</p>
|
||||
<p className="font-medium">{slide.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Carousel>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="mr-4 rtl:rotate-180" />
|
||||
<CarouselNext className="rtl:rotate-180" />
|
||||
</Carousel>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user