Update various blocks to enhance RTL support and improve content. Changes include adding new images to the case studies, modifying country options in the checkout, adjusting carousel settings for RTL direction, and refining layout and styling in login and gallery components. Additionally, updated logo references to reflect new branding.

2026-07-16 05:55:47 +02:00
parent 4fa6b150d1
commit b5882dffa6
7 changed files with 61 additions and 49 deletions
@@ -44,6 +44,12 @@ const SLIDES = [
      { 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/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 4 },
+      { src: "/block-media/shadcnblocks/block/photos/tirza-van-dijk-o1SKqmgSDbg-unsplash.jpg", position: 0 },
+      { src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg", position: 6 },
+      { 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 },
+      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 2 },
    ],
  },
  {
@@ -56,8 +62,16 @@ const SLIDES = [
    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/nubelson-fernandes-tAJYoec13xk-unsplash.jpg", position: 2 },
+      { src: "/block-media/shadcnblocks/block/photos/nubelson-fernandes-xxa7qYObMrI-unsplash.jpg", position: 3 },
+      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 4 },
+      { src: "/block-media/shadcnblocks/block/photos/tirza-van-dijk-o1SKqmgSDbg-unsplash.jpg", position: 5 },
+      { src: "/block-media/shadcnblocks/block/photos/studio-kealaula-IVZ_XAoZF3s-unsplash.jpg", position: 6 },
+      { 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 },
+      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 9 },
+      { src: "/block-media/shadcnblocks/block/photos/michel-isamuna-kL-EAXnMAp0-unsplash.jpg", position: 1 },
+
    ],
  },
 ];
@@ -74,12 +88,19 @@ const CaseStudies5 = ({ className }: CaseStudies5Props) => {
      className={cn("bg-background py-32", className)}
    >
      <div className="container">
-        <Carousel className="w-full">
-          <CarouselContent>
+        <Carousel
+          dir="rtl"
+          className="w-full"
+          opts={{
+            loop: true,
+            direction: "rtl",
+          }}
+        >
+          <CarouselContent className="m-0">
            {SLIDES.map((slide, index) => (
-              <CarouselItem key={index}>
+              <CarouselItem key={index} className="p-0">
                <div className="flex flex-col md:flex-row">
-                  <div className="w-full md:w-1/2 p-4">
+                  <div className="w-full p-4 md:w-1/2">
                    <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);
@@ -115,8 +136,8 @@ const CaseStudies5 = ({ className }: CaseStudies5Props) => {
              </CarouselItem>
            ))}
          </CarouselContent>
-          <CarouselPrevious className="mr-4 rtl:rotate-180" />
-          <CarouselNext className="rtl:rotate-180" />
+          <CarouselPrevious className="!left-auto !-right-12 rtl:rotate-180" />
+          <CarouselNext className="!right-auto !-left-12 rtl:rotate-180" />
        </Carousel>
      </div>
    </section>
@@ -72,18 +72,16 @@ type CheckoutFormType = z.infer<typeof checkoutFormSchema>;

 const COUNTRIES = [
  { value: "AU", label: "استرالیا" },
-  { value: "US", label: "ایالات متحده" },
-  { value: "GB", label: "بریتانیا" },
-  { value: "CA", label: "کانادا" },
-  { value: "DE", label: "آلمان" },
-  { value: "FR", label: "فرانسه" },
-  { value: "JP", label: "ژاپن" },
-  { value: "NZ", label: "نیوزیلند" },
-  { value: "SG", label: "سنگاپور" },
+  { value: "IR", label: "ایران" },
+  { value: "TR", label: "ترکیه" },
+  { value: "IQ", label: "عراق" },
+  { value: "PK", label: "پاکستان" },
+  { value: "AFG", label: "افغانستان" },
+
 ];

 const DEFAULT_ORDER: OrderSummary = {
-  companyName: "ShadcnBlocks",
+  companyName: "ریو آی",
  items: [
    {
      id: "pro-subscription",
@@ -100,10 +98,10 @@ const Checkout5 = ({ order = DEFAULT_ORDER, className }: Checkout5Props) => {
    defaultValues: {
      email: "",
      cardNumber: "",
-      expiryDate: "",
-      cvc: "",
+      expiryDate: "ماه/سال",
+      cvc: "کد امنیتی",
      cardholderName: "",
-      country: "US",
+      country: "IR",
      promoCode: "",
    },
  });
@@ -197,21 +195,12 @@ const Checkout5 = ({ order = DEFAULT_ORDER, className }: Checkout5Props) => {

            <div className="p-8 pt-32 lg:p-12 lg:pt-40 xl:p-16 xl:pt-48">
              <div className="mx-auto w-full max-w-md">
-                <Button
-                  type="button"
-                  className="h-auto w-full bg-foreground py-1 text-background hover:bg-foreground/90"
-                >
-                  <img
-                    src="/block-media/shadcnblocks/block/logos/apple-pay-white.svg"
-                    alt="پرداخت موبایلی"
-                    className="h-12"
-                  />
-                </Button>
+              

                <div className="my-6 flex items-center gap-4">
                  <Separator className="flex-1" />
                  <span className="text-sm text-muted-foreground">
-                    یا با کارت بانکی پرداخت کنید
+                     با کارت بانکی پرداخت کنید
                                                        </span>
                  <Separator className="flex-1" />
                </div>
@@ -478,8 +467,8 @@ const CountryField = () => {
          >
            کشور صورتحساب
          </FieldLabel>
-          <Select value={field.value} onValueChange={field.onChange}>
-            <SelectTrigger id="checkout-country" className="w-full">
+          <Select dir="rtl" value={field.value} onValueChange={field.onChange}>
+            <SelectTrigger id="checkout-country" className="w-full ">
              <SelectValue placeholder="کشور را انتخاب کنید" />
            </SelectTrigger>
            <SelectContent>
@@ -254,7 +254,7 @@ const EcommerceFooter1 = ({
                className="h-6"
              />
            </div>
-            <Select defaultValue="farsi">
+            <Select dir="rtl" defaultValue="farsi">
              <SelectTrigger className="h-8 w-24 text-xs">
                <SelectValue placeholder="انتخاب زبان..." />
              </SelectTrigger>
@@ -140,8 +140,10 @@ const EcommerceHero3 = ({
            <div className="basis-80 self-center xl:basis-130">
              <div className="mx-auto max-w-70 xl:max-w-95">
                <Carousel
+                  dir="rtl"
                  opts={{
                    loop: true,
+                    direction: "rtl",
                  }}
                  plugins={[
                    Autoplay({
@@ -149,16 +151,16 @@ const EcommerceHero3 = ({
                    }),
                  ]}
                >
-                  <CarouselContent>
+                  <CarouselContent className="m-0">
                    {products.map((product, index) => (
-                      <CarouselItem key={index}>
+                      <CarouselItem key={index} className="p-0">
                        <ProductCard {...product} />
                      </CarouselItem>
                    ))}
                  </CarouselContent>
                  <div className="hidden sm:contents">
-                    <CarouselPrevious className="rtl:rotate-180" />
-                    <CarouselNext className="rtl:rotate-180" />
+                    <CarouselPrevious className="!left-auto !-right-12 rtl:rotate-180" />
+                    <CarouselNext className="!right-auto !-left-12 rtl:rotate-180" />
                  </div>
                </Carousel>
              </div>
@@ -139,7 +139,7 @@ const Gallery17 = ({ className }: Gallery17Props) => {
              type="button"
              size="icon"
              variant="default"
-              className="absolute top-1/2 size-10 -translate-y-1/2 max-[767px]:static max-[767px]:translate-y-0 md:end-[-6.25rem] md:size-14 lg:end-[-9.9375rem] lg:size-14 [&>svg]:size-6!"
+              className="absolute top-1/2 size-10 -translate-y-1/2 max-[767px]:static max-[767px]:translate-y-0 md:start-[-6.25rem] md:size-14 lg:start-[-9.9375rem] lg:size-14 [&>svg]:size-6!"
              disabled={!canScrollPrev}
              onClick={() => api?.scrollPrev()}
            >
@@ -150,7 +150,7 @@ const Gallery17 = ({ className }: Gallery17Props) => {
              type="button"
              size="icon"
              variant="default"
-              className="absolute top-1/2 size-10 -translate-y-1/2 max-[767px]:static max-[767px]:translate-y-0 md:start-[-6.25rem] md:size-14 lg:start-[-9.9375rem] lg:size-14 [&>svg]:size-6!"
+              className="absolute top-1/2 size-10 -translate-y-1/2 max-[767px]:static max-[767px]:translate-y-0 md:end-[-6.25rem] md:size-14 lg:end-[-9.9375rem] lg:size-14 [&>svg]:size-6!"
              disabled={!canScrollNext}
              onClick={() => api?.scrollNext()}
            >
@@ -41,19 +41,19 @@ const Login1 = ({
    <section
      dir="rtl"
      lang="fa"
-      className={cn("h-screen bg-muted", className)}
+      className={cn("bg-muted", className)}
    >
-      <div className="flex h-full items-center justify-center">
-        <div className="flex flex-col items-center gap-6 lg:justify-start">
-          <a href={logo.url}>
+      <div className="flex items-center justify-center px-4 py-16 sm:px-6 sm:py-24">
+        <div className="flex w-full max-w-sm flex-col items-center gap-6">
+          <a href={logo.url} className="shrink-0">
            <img
              src={logo.src}
              alt={logo.alt}
              title={logo.title}
-              className="h-10 dark:invert"
+              className="h-8 w-auto max-w-[12rem] dark:invert sm:h-10 sm:max-w-none"
            />
          </a>
-          <div className="flex w-full max-w-sm min-w-sm flex-col items-center gap-y-4 rounded-md border border-muted bg-background px-6 py-8 text-start shadow-md">
+          <div className="flex w-full flex-col items-center gap-y-4 rounded-md border border-muted bg-background px-4 py-6 text-start shadow-md sm:px-6 sm:py-8">
            {heading && <h1 className="w-full text-xl font-semibold">{heading}</h1>}
            <Input
              type="email"
@@ -73,7 +73,7 @@ const Login1 = ({
              {buttonText}
            </Button>
          </div>
-          <div className="flex justify-center gap-1 text-sm text-muted-foreground">
+          <div className="flex flex-wrap items-center justify-center gap-x-1 gap-y-1 text-center text-sm text-muted-foreground">
            <p>{signupText}</p>
            <a
              href={signupUrl}
@@ -3,11 +3,11 @@
 import { cn } from "@/lib/utils";
 const ITEMS = [
  {
-    name: "Mercury",
+    name: "Zarinpal",
    src: "/block-media/shadcnblocks/block/mainline/logos/mercury.svg",
    width: 143,
    height: 26,
-    href: "https://mercury.com",
+    href: "https://www.zarinpal.com/",
  },
  {
    name: "Watershed",