"use client";

import { Check } from "@aliimam/icons";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

const Bookademo1 = () => {
  return (
    <section>
      <div className="mx-6 lg:border-x">
        <h2 className="w-full py-10 text-center text-5xl font-semibold lg:text-7xl">
          Book A Demo
        </h2>
        <div className="grid gap-10 lg:grid-cols-2">
          <div className="space-y-10 p-6 xl:p-20">
            <p className="w-full text-sm">
              Discover how Ali Imam can help you build faster, design better,
              and launch stunning projects with ease:
            </p>
            <div>
              <div className="mb-10 space-y-10 lg:flex lg:flex-col">
                <div className="space-y-4">
                  <div className="flex items-center gap-2">
                    <Check className="w-4" />
                    <p className="text-sm">
                      Schedule a consultation with a
                      <span className="font-bold"> design expert</span>
                    </p>
                  </div>

                  <div className="flex items-center gap-2">
                    <Check className="w-4" />
                    <p className="text-sm">
                      Map out your creative workflows and{" "}
                      <span className="font-bold"> design opportunities</span>
                    </p>
                  </div>

                  <div className="flex items-center gap-2">
                    <Check className="w-4" />
                    <p className="text-sm">
                      Start with a risk-free 60-day design pilot
                    </p>
                  </div>

                  <div className="flex items-center gap-2">
                    <Check className="w-4" />
                    <p className="text-sm">
                      Explore advanced prototyping tools
                    </p>
                  </div>

                  <div className="flex items-center gap-2">
                    <Check className="w-4" />
                    <p className="text-sm">
                      Collaborate in real-time with your team
                    </p>
                  </div>

                  <div className="flex items-center gap-2">
                    <Check className="w-4" />
                    <p className="text-sm">
                      Access premium design assets and templates
                    </p>
                  </div>
                </div>
                <div className="space-y-4">
                  <h1 className="text-3xl font-semibold">Get a demo today!</h1>
                  <img
                    src="/templates/ai-icons.jpg"
                    alt="Design Dashboard"
                    className="h-full w-full items-center justify-center rounded-xl border object-cover p-6"
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="relative">
            <div className="border-t p-6 lg:border-l lg:border-t-0 xl:p-20">
              <div className="space-y-8 lg:p-10">
                <div className="grid gap-4">
                  <div>
                    <Label>Full name</Label>
                    <Input
                      type="text"
                      placeholder="Ali Imam"
                      className="mt-2"
                      required
                    />
                  </div>
                  <div>
                    <Label>Email</Label>
                    <Input
                      type="text"
                      placeholder="contact@aliimam.in"
                      className="mt-2"
                      required
                    />
                  </div>
                  <div>
                    <Label>Phone Number</Label>
                    <Input
                      type="text"
                      placeholder="+1"
                      className="mt-2"
                      required
                    />
                  </div>
                  <div>
                    <Label>Role</Label>
                    <Input
                      type="text"
                      placeholder="Creative Director"
                      className="mt-2"
                      required
                    />
                  </div>
                  <div>
                    <Label>Studio</Label>
                    <Input
                      type="text"
                      placeholder="Your Design Studio"
                      className="mt-2"
                      required
                    />
                  </div>
                  <div>
                    <Label>How did you hear about us?</Label>
                    <Input
                      type="text"
                      placeholder="LinkedIn, Friends etc"
                      className="mt-2"
                      required
                    />
                  </div>
                </div>
                <div>
                  <p className="text-muted-foreground text-xs">
                    By submitting this form, I confirm that I have read the
                    privacy policy and agree that my name and email address will
                    be collected and used by Ali Imam for the purposes of
                    sending design insights, promotions and updates. You can
                    withdraw your consent at any time by unsubscribing or
                    contacting us via privacy@aliimam.in
                  </p>
                </div>
                <Button className="w-full">Book Demo</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export Bookademo1

"use client";

import { ArrowUp, Briefcase, Lightbulb } from "@aliimam/icons";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";

const Bookademo2 = () => {
  return (
    <section className="py-6">
      <div className="mx-6">
        <div className="grid w-full gap-10 lg:grid-cols-2 lg:border-y">
          <div className="space-y-10 lg:py-20">
            <h2 className="w-full text-3xl lg:text-5xl">
              Elevate your <br /> designs, effortlessly
            </h2>
            <div className="">
              <div className="mb-10 space-y-10 lg:flex lg:flex-col">
                <div className="space-y-4">
                  <Separator />
                  <div className="flex items-center gap-2">
                    <ArrowUp className="w-5 text-red-500" />
                    <p className="text-sm">
                      Schedule a consultation with a design expert
                    </p>
                  </div>
                  <Separator />
                  <div className="flex items-center gap-2">
                    <Lightbulb className="w-5 text-red-500" />
                    <p className="text-sm">
                      Map out your creative workflows and design opportunities
                    </p>
                  </div>
                  <Separator />
                  <div className="flex items-center gap-2">
                    <Briefcase className="w-5 text-red-500" />
                    <p className="text-sm">
                      Start with a risk-free 60-day design pilot
                    </p>
                  </div>
                  <Separator />
                </div>
                <div className="space-y-4 border p-8">
                  <p className="font-semibold">
                    "With Shadcnblocks, my team has created stunning visuals 10x
                    faster. We deliver impactful designs by iterating quickly
                    and with precision."
                  </p>
                  <p className="font-semibold">
                    Creative Director /{" "}
                    <span className="text-muted-foreground text-xs">
                      GLOBAL DESIGN STUDIO
                    </span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="relative">
            <img
              src="/images/device/display.jpg"
              alt="Design Background"
              className="absolute  h-full w-full items-center justify-center object-cover"
            />
            <div className="border-t z-10 relative p-2 lg:border-l lg:border-t-0 xl:p-20">
              <div className="space-y-8 border p-2">
                <div className="bg-card space-y-8 border p-4 lg:p-10">
                  <h1 className="text-xl">Launch your design journey</h1>
                  <p className="text-sm">
                    We’re excited to collaborate! Fill out the form, and our
                    design team will reach out promptly.
                  </p>
                  <div className="grid gap-4">
                    <div>
                      <Input
                        type="text"
                        placeholder="First Name*"
                        className="mt-2"
                        required
                      />
                    </div>
                    <div>
                      <Input
                        type="text"
                        placeholder="Last Name*"
                        className="mt-2"
                        required
                      />
                    </div>
                    <div>
                      <Input
                        type="text"
                        placeholder="Work Email*"
                        className="mt-2"
                        required
                      />
                    </div>
                    <div>
                      <Input
                        type="text"
                        placeholder="Studio Name*"
                        className="mt-2"
                        required
                      />
                    </div>
                    <div>
                      <Label>Phone Number</Label>
                      <Input
                        type="text"
                        placeholder="+1"
                        className="mt-2"
                        required
                      />
                    </div>
                    <div>
                      <Select required>
                        <SelectTrigger className="mt-2 w-full">
                          <SelectValue placeholder="What type of design project?" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="uiux">UI/UX Design</SelectItem>
                          <SelectItem value="graphic">
                            Graphic Design
                          </SelectItem>
                          <SelectItem value="product">
                            Product Design
                          </SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                  <Button className="w-full">Get Started</Button>
                  <div className="flex justify-center space-x-2 text-center">
                    <p className="text-muted-foreground text-xs">
                      By clicking Get Started, you agree with
                      shadcnblocks&apos;s Terms of Service and Privacy Policy.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export Bookademo2

"use client";

import {
  ClaudeAI,
  Cursor,
  Gemini,
  Github,
  OpenAI,
  Replicate,
} from "@aliimam/logos";
import { Check } from "@aliimam/icons";

import { Button } from "@/components/ui/button";
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";

const Bookademo3 = () => {
  return (
    <section className="py-6">
      <div className="mx-6">
        <div className="mt-6 grid w-full lg:grid-cols-2">
          <div className="space-y-6">
            <h1 className="text-md text-muted-foreground font-light">
              <span className="cursor-pointer hover:underline">Contact</span> /
              Design Consultation
            </h1>
            <h2 className="w-full text-5xl tracking-tighter">
              Let&apos;s Design Together
            </h2>
            <div className="">
              <div className="mb-6 space-y-6 lg:flex lg:flex-col">
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <Check className="bg-secondary text-primary h-6 w-6 rounded-full p-1.5" />
                    <p className="text-sm">
                      Share your design vision and project goals
                    </p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Check className="bg-secondary text-primary h-6 w-6 rounded-full p-1.5" />
                    <p className="text-sm">Experience a tailored design demo</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <Check className="bg-secondary text-primary h-6 w-6 rounded-full p-1.5" />
                    <p className="text-sm">Discover premium design solutions</p>
                  </div>
                </div>
                <p className="font-semibold">
                  Trusted by +10,000 designers and creatives
                </p>
                <div className="grid h-full max-w-sm grid-cols-2 gap-x-12 -space-y-6 pr-20 md:max-w-lg md:grid-cols-3">
                  <OpenAI type="wordmark" size={100} />
                  <ClaudeAI type="wordmark" size={100} />
                  <Replicate type="wordmark" size={100} />
                  <Cursor type="wordmark" size={100} />
                  <Gemini type="wordmark" size={90} />
                  <Github type="wordmark" size={90} />
                </div>
              </div>
            </div>
          </div>
          <form className="space-y-8 border p-10">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>Full Name</Label>
                <Input
                  type="text"
                  placeholder="Your Name"
                  className="mt-2"
                  required
                />
              </div>
              <div>
                <Label>Work Email</Label>
                <Input
                  type="text"
                  placeholder="contact@aliimam.in"
                  className="mt-2"
                  required
                />
              </div>
              <div>
                <Label>Studio Name</Label>
                <Input
                  type="text"
                  placeholder="Your design studio"
                  className="mt-2"
                  required
                />
              </div>
              <div>
                <Label>Team Size</Label>
                <Select required>
                  <SelectTrigger className="mt-2 w-full">
                    <SelectValue placeholder="Number of designers" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="0-100">1-10</SelectItem>
                    <SelectItem value="100-500">11-50</SelectItem>
                    <SelectItem value="500-5000">51-200</SelectItem>
                    <SelectItem value="5000+">200+</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div>
              <Label>Project Details (Optional)</Label>
              <Textarea
                placeholder="Tell us about your design project..."
                className="mt-4 h-24"
              />
            </div>
            <div>
              <Label>How Did You Hear About Us? (Optional)</Label>
              <Textarea
                placeholder="Share where you found us..."
                className="mt-4 [resize:none]"
              />
            </div>
            <Button>Connect with Our Design Team</Button>
            <div className="flex space-x-2">
              <p className="text-muted-foreground text-xs">
                By submitting this form, you confirm that you have read and
                understood our{" "}
                <span className="underline">Privacy Policy.</span> This site is
                protected by reCAPTCHA and the Google{" "}
                <span className="underline">Privacy Policy</span> and
                <span className="underline">Terms of Service</span> apply.
              </p>
            </div>
          </form>
          <div>
            <div className="mt-10 grid gap-6 md:grid-cols-2">
              <div className="space-y-2">
                <h1 className="font-semibold">Design FAQ</h1>
                <p className="text-sm">
                  Explore our{" "}
                  <span className="underline">Frequently Asked Questions</span>{" "}
                  about design services and pricing on our design hub.
                </p>
              </div>
              <div className="space-y-2">
                <h1 className="font-semibold">Creative Support</h1>
                <p className="text-sm">
                  Get inspiration and support from our team and creatives in our{" "}
                  <span className="underline">Design Community.</span>
                </p>
              </div>
              <div className="space-y-2">
                <h1 className="font-semibold">Account Support</h1>
                <p className="text-sm">
                  <span className="underline">Reach out</span> for help with
                  billing, plans, or account management for existing clients.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export Bookademo3

"use client";

import {
  Apple,
  ClaudeAI,
  Cursor,
  Gemini,
  Github,
  OpenAI,
  Replicate,
} from "@aliimam/logos";
import { ArrowRight } from "@aliimam/icons";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";

const Bookademo4 = () => {
  return (
    <section className="py-6">
      <div className="mx-6">
        <div className="w-full">
          <div className="space-y-6">
            <h1 className="text-xl font-light text-green-500">
              Connect with a Design Expert
            </h1>
            <h2 className="w-full text-5xl font-semibold tracking-tighter md:text-7xl">
              Let’s craft your <br className="hidden md:block" /> vision into
              reality
            </h2>
          </div>
          <div className="mt-6 grid w-full border lg:grid-cols-2">
            <form className="space-y-8 p-10 lg:border-r">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="firstName">Full Name</Label>
                  <Input
                    type="text"
                    placeholder="Your Name"
                    className="mt-2"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="organization">Design Studio</Label>
                  <Input
                    type="text"
                    placeholder="Your Studio"
                    className="mt-2"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="position">Role</Label>
                  <Input
                    type="text"
                    placeholder="Creative Director"
                    className="mt-2"
                    required
                  />
                </div>
                <div>
                  <Label htmlFor="businessEmail">Work Email</Label>
                  <Input
                    type="email"
                    placeholder="name@designstudio.com"
                    className="mt-2"
                    required
                  />
                </div>
              </div>
              <div>
                <Label>Project Budget (select one)</Label>
                <div className="mt-2 flex justify-between">
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <Checkbox className="h-6 w-6 rounded-full" />
                      <Label>{"<$50k"}</Label>
                    </div>
                    <div className="flex items-center gap-2">
                      <Checkbox className="h-6 w-6 rounded-full" />
                      <Label>$50k – $250k</Label>
                    </div>
                    <div className="flex items-center gap-2">
                      <Checkbox className="h-6 w-6 rounded-full" />
                      <Label>$250k – $1M</Label>
                    </div>
                  </div>
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <Checkbox className="h-6 w-6 rounded-full" />
                      <Label>$1M – $5M</Label>
                    </div>
                    <div className="flex items-center gap-2">
                      <Checkbox className="h-6 w-6 rounded-full" />
                      <Label>$5M – $10M</Label>
                    </div>
                    <div className="flex items-center gap-2">
                      <Checkbox className="h-6 w-6 rounded-full" />
                      <Label>{">$10M"}</Label>
                    </div>
                  </div>
                </div>
                <Separator className="my-6 w-full" />
                <div>
                  <Label>
                    Which design field do you represent? (select all that apply)
                  </Label>
                  <div className="mt-2 space-y-2">
                    <div className="flex items-center space-x-2">
                      <Checkbox className="mt-2 h-6 w-6" />
                      <Label>Graphic Design</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox className="mt-2 h-6 w-6" />
                      <Label>UI/UX Design</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox className="mt-2 h-6 w-6" />
                      <Label>Product Design</Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Checkbox className="mt-2 h-6 w-6" />
                      <Label>Other</Label>
                    </div>
                  </div>
                </div>
              </div>
              <Separator className="my-6 w-full" />
              <div>
                <Label>Tell us about your design needs</Label>
                <Textarea
                  placeholder="Describe your project vision..."
                  className="h-30 mt-4"
                />
              </div>
              <Separator className="my-6 w-full" />
              <div className="flex space-x-2">
                <Checkbox />
                <p className="text-muted-foreground text-xs">
                  By checking this box, you agree to receive design insights,
                  updates, and inspiration from our team. See our Privacy Policy
                  and Terms & Conditions. You can unsubscribe anytime.
                </p>
              </div>
              <Button>
                <ArrowRight />
                Start Your Design Journey
              </Button>
            </form>
            <div className="mt-6 flex h-full w-full flex-col space-y-6 border-t p-10 lg:border-t-0">
              <div className="">
                <Apple size={80} />
                <p className="mt-10 italic">
                  “Collaborating with our design partners elevates Apple’s
                  vision for innovative and sustainable design, creating lasting
                  impact for our brand and community.”
                </p>
                <p className="mt-10 font-semibold">Ali Imam // Apple</p>
                <p>Chief Design Officer</p>
              </div>
              <Separator className="my-10 w-full" />
              <p>Trusted by global leaders in design and innovation</p>
              <div className="flex justify-start">
                <div className="grid grid-cols-2 border p-2 md:grid-cols-3">
                  {[
                    <OpenAI key="openai" size={40} />,
                    <ClaudeAI key="claude" size={40} />,
                    <Replicate key="replicate" size={40} />,
                    <Cursor key="cursor" size={40} />,
                    <Gemini key="gemini" size={40} />,
                    <Github key="github" size={40} />,
                  ].map((Logo, i) => (
                    <div
                      key={i}
                      className="h-30 w-30 flex items-center justify-center border md:h-40 md:w-40"
                    >
                      {Logo}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="w-full border border-t-0 p-20 text-center">
            <h3 className="text-3xl font-semibold md:text-5xl">
              Ready to elevate <br /> your design impact?
            </h3>
            <div className="mt-6 flex flex-wrap justify-center gap-3">
              <Button variant="outline">Get in Touch</Button>
              <Button>
                <ArrowRight />
                Explore Our Design Services
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export Bookademo4