reui-blocks/blocks/book-a-demo3.tsx

import { Square } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

interface TestimonialProps {
  comment: string;
  name: string;
  designation: string;
  image: string;
  className?: string;
}

const Testimonial = ({
  comment,
  name,
  designation,
  image,
  className,
}: TestimonialProps) => {
  return (
    <div className={cn("flex flex-col gap-6", className)}>
      <p className="text-base font-light text-muted-foreground md:text-lg">
        {comment}
      </p>
      <div className="flex items-center gap-2">
        <img src={image} alt={name} className="size-10 rounded" />
        <div className="flex flex-col">
          <p className="text-sm md:text-base">{name}</p>
          <p className="text-sm font-light text-muted-foreground md:text-base">
            {designation}
          </p>
        </div>
      </div>
    </div>
  );
};

const FormGroup = ({ children }: { children: React.ReactNode }) => {
  return <div className="flex flex-col gap-2">{children}</div>;
};

interface BookADemo3Props {
  badge?: string;
  heading?: string;
  description?: string;
  testimonial?: TestimonialProps;
  poweredBy?: string;
  className?: string;
}

const BookADemo3 = ({
  badge = "درخواست دمو",
  heading = "دموی ری یو آی را از نزدیک تجربه کنید",
  description =
    "در یک جلسه دمو، قابلیت‌های ری یو آی را متناسب با نیازهای تیم خود بررسی کنید و ببینید چگونه می‌تواند فرایند توسعه، استقرار و همکاری را بهبود دهد.",
  testimonial = {
    comment:
      "«DevFlow فرآیند توسعه ما را متحول کرد. خطوط CI/CD خودکار و قابلیت‌های همکاری بلادرنگ، بهره‌وری تیم ما را ۴۰٪ افزایش داده است.»",
    name: "علی رضایی",
    designation: "توسعه‌دهنده ارشد در TechStart",
    image:
      "/block-media/shadcnblocks/block/portraits/alexander-hipp-iEEBWgY_6lA-unsplash.jpg",
  },
  poweredBy = "DevFlow",
  className,
}: BookADemo3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:gap-10">
          <div className="flex max-w-lg flex-col gap-5">
            <div className="flex w-fit items-center gap-1.5 border-b border-dashed pb-2 text-xs md:text-sm">
              <Square fill="currentColor" size={7} className="opacity-60" />

              <p className="opacity-60">{badge}</p>
            </div>
            <h3 className="text-3xl font-medium md:text-xl">{heading}</h3>
            <p className="text-base font-light md:text-lg">{description}</p>
            <div className="my-4 h-1 max-w-32 border-b border-dashed" />
            <Testimonial {...testimonial} />
          </div>
          <Card className="relative overflow-hidden bg-muted/70 px-6">
            <div className="absolute top-5 -end-15 flex w-50 rotate-45 flex-col items-center justify-center bg-foreground py-1 text-background shadow-lg">
              <span className="text-xs font-light">مورد اعتماد</span>
              <span className="text-xs sm:text-sm">{poweredBy}</span>
            </div>
            <form className="flex flex-col gap-8">
              <FormGroup>
                <Label>نام</Label>
                <Input
                  type="text"
                  placeholder="علی محمدی"
                  className="bg-background"
                />
              </FormGroup>
              <FormGroup>
                <Label>ایمیل کاری</Label>
                <Input
                  type="email"
                  placeholder="example@company.com"
                  dir="rtl"
                  className="bg-background text-start"
                />
              </FormGroup>
              <FormGroup>
                <Label>کشور محل فعالیت</Label>
                <Select>
                  <SelectTrigger className="w-full bg-background">
                    <SelectValue placeholder="یک گزینه را انتخاب کنید" />
                  </SelectTrigger>
                  <SelectContent className="w-full">
                    <SelectItem value="ir">ایران</SelectItem>
                    <SelectItem value="us">ایالات متحده</SelectItem>
                    <SelectItem value="ca">کانادا</SelectItem>
                    <SelectItem value="uk">بریتانیا</SelectItem>
                    <SelectItem value="de">آلمان</SelectItem>
                    <SelectItem value="fr">فرانسه</SelectItem>
                    <SelectItem value="es">اسپانیا</SelectItem>
                    <SelectItem value="it">ایتالیا</SelectItem>
                    <SelectItem value="nl">هلند</SelectItem>
                    <SelectItem value="se">سوئد</SelectItem>
                    <SelectItem value="no">نروژ</SelectItem>
                    <SelectItem value="dk">دانمارک</SelectItem>
                    <SelectItem value="fi">فنلاند</SelectItem>
                    <SelectItem value="ch">سوئیس</SelectItem>
                    <SelectItem value="at">اتریش</SelectItem>
                    <SelectItem value="be">بلژیک</SelectItem>
                    <SelectItem value="ie">ایرلند</SelectItem>
                    <SelectItem value="pt">پرتغال</SelectItem>
                    <SelectItem value="pl">لهستان</SelectItem>
                    <SelectItem value="cz">جمهوری چک</SelectItem>
                    <SelectItem value="hu">مجارستان</SelectItem>
                    <SelectItem value="au">استرالیا</SelectItem>
                    <SelectItem value="nz">نیوزیلند</SelectItem>
                    <SelectItem value="jp">ژاپن</SelectItem>
                    <SelectItem value="kr">کره جنوبی</SelectItem>
                    <SelectItem value="sg">سنگاپور</SelectItem>
                    <SelectItem value="hk">هنگ‌کنگ</SelectItem>
                    <SelectItem value="in">هند</SelectItem>
                    <SelectItem value="cn">چین</SelectItem>
                    <SelectItem value="br">برزیل</SelectItem>
                    <SelectItem value="mx">مکزیک</SelectItem>
                    <SelectItem value="ar">آرژانتین</SelectItem>
                    <SelectItem value="cl">شیلی</SelectItem>
                    <SelectItem value="co">کلمبیا</SelectItem>
                    <SelectItem value="pe">پرو</SelectItem>
                    <SelectItem value="za">آفریقای جنوبی</SelectItem>
                    <SelectItem value="ng">نیجریه</SelectItem>
                    <SelectItem value="ke">کنیا</SelectItem>
                    <SelectItem value="eg">مصر</SelectItem>
                    <SelectItem value="ma">مراکش</SelectItem>
                    <SelectItem value="il">اسرائیل</SelectItem>
                    <SelectItem value="ae">امارات متحده عربی</SelectItem>
                    <SelectItem value="sa">عربستان سعودی</SelectItem>
                    <SelectItem value="tr">ترکیه</SelectItem>
                    <SelectItem value="ru">روسیه</SelectItem>
                    <SelectItem value="ua">اوکراین</SelectItem>
                    <SelectItem value="other">سایر</SelectItem>
                  </SelectContent>
                </Select>
              </FormGroup>
              <FormGroup>
                <Label>در حال حاضر از چه راهکار استقرار خودکار استفاده می‌کنید؟</Label>
                <Select>
                  <SelectTrigger className="w-full bg-background">
                    <SelectValue placeholder="یک گزینه را انتخاب کنید" />
                  </SelectTrigger>
                  <SelectContent className="w-full">
                    <SelectItem value="no-ci-cd">
                      هنوز خط استقرار خودکار نداریم
                    </SelectItem>
                    <SelectItem value="manual-deployment">
                      استقرار دستی
                    </SelectItem>
                    <SelectItem value="github-actions">
                      استقرار خودکار
                    </SelectItem>
                    <SelectItem value="jenkins">سرور اختصاصی</SelectItem>
                    <SelectItem value="custom-ci-cd">
                      خط استقرار خودکار سفارشی
                    </SelectItem>
                    <SelectItem value="gitlab-ci">استقرار یکپارچه</SelectItem>
                    <SelectItem value="other">سایر</SelectItem>
                  </SelectContent>
                </Select>
              </FormGroup>
              <FormGroup>
                <Label>بزرگ‌ترین چالش تیم شما چیست؟</Label>
                <Textarea
                  placeholder="درباره فرایند توسعه، چالش‌های فعلی و انتظارات خود از ری یو آی توضیح دهید."
                  className="bg-background"
                />
              </FormGroup>
              <FormGroup>
                <Label>از چه طریقی با ری یو آی آشنا شدید؟</Label>
                <Select>
                  <SelectTrigger className="w-full bg-background">
                    <SelectValue placeholder="یک گزینه را انتخاب کنید" />
                  </SelectTrigger>
                  <SelectContent className="w-full">
                    <SelectItem value="linkedin">شبکه حرفه‌ای</SelectItem>
                    <SelectItem value="events-and-webinars">
                      رویدادها و وبینارها
                    </SelectItem>
                    <SelectItem value="referral">معرفی همکار یا مشتری</SelectItem>
                    <SelectItem value="search-engine">موتور جستجو</SelectItem>
                    <SelectItem value="other">سایر</SelectItem>
                  </SelectContent>
                </Select>
              </FormGroup>
              <Button type="submit">درخواست دمو</Button>
            </form>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { BookADemo3 };