Heroes

"use client";

import { ArrowRight, Car, CheckCircle2, PlayCircle } from "lucide-react";

import { AvatarStack, Badge, Button, Rating, StatCard } from "@waveinno/ui";

export default function HeroSplit() {
  return (
    <section className="relative isolate overflow-hidden">
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(55%_60%_at_85%_10%,color-mix(in_srgb,var(--brand-2)_18%,transparent),transparent_70%)]" />
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-4 py-16 sm:px-6 md:py-24 lg:grid-cols-2">
        <div>
          <Badge variant="outline" dot={false} className="mb-5 rounded-full px-3 py-1">
            <span className="size-1.5 rounded-full bg-success" /> Trusted by 120+ car parks in Bangladesh
          </Badge>
          <h1 className="disp text-[40px] font-bold leading-[1.05] tracking-[-0.035em] text-text sm:text-[54px]">
            Run every car park from <span className="bg-[linear-gradient(120deg,var(--brand-1),var(--brand-2))] bg-clip-text text-transparent">one screen</span>
          </h1>
          <p className="mt-5 max-w-[520px] text-[17px] leading-[1.65] text-body">
            Gates that read plates, payments by bKash and card, and a live view of every bay. Set up in an afternoon, with nothing to install.
          </p>
          <ul className="mt-6 grid gap-2 text-[14px] text-body sm:grid-cols-2">
            {["No hardware lock-in", "bKash, Nagad and cards", "Bangla and English", "Support on WhatsApp"].map((t) => (
              <li key={t} className="flex items-center gap-2">
                <CheckCircle2 className="size-4 shrink-0 text-success" /> {t}
              </li>
            ))}
          </ul>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <Button variant="gradient" size="lg" shape="pill">
              Start free <ArrowRight />
            </Button>
            <Button variant="secondary" size="lg" shape="pill">
              <PlayCircle /> Watch the tour
            </Button>
          </div>
          <div className="mt-8 flex items-center gap-3">
            <AvatarStack names={["Karim Ahmed", "Nusrat Jahan", "Rafiq Islam", "Farhana Akter", "Tanvir Hasan", "Sadia Islam"]} size="md" />
            <div>
              <Rating readOnly value={4.9} allowHalf size="sm" />
              <p className="text-[12px] text-muted">from 230 owners</p>
            </div>
          </div>
        </div>
        <div className="relative">
          <div aria-hidden className="absolute -inset-6 -z-10 rounded-[32px] bg-[linear-gradient(135deg,var(--brand-1),var(--brand-2))] opacity-15 blur-2xl" />
          <div className="rounded-[24px] border border-border bg-raised/80 p-3 shadow-[var(--lit),0_30px_80px_-30px_rgba(5,8,22,.45)] backdrop-blur">
            <div className="grid gap-3 sm:grid-cols-2">
              <StatCard label="Revenue today" value="48,250" currency delta={12.4} deltaLabel="vs yesterday" variant="gradient" />
              <StatCard label="Cars inside" value="312" delta={6.2} deltaLabel="vs last Thu" icon={<Car />} />
            </div>
            <div className="mt-3 rounded-[16px] border border-border bg-surface p-4">
              <div className="mb-3 flex items-center justify-between">
                <p className="text-[13px] font-semibold text-text">Gates</p>
                <Badge variant="live" tone="success">
                  Live
                </Badge>
              </div>
              {[
                ["Gate 1 · in", "DHA-GA 12-3456", "08:42"],
                ["Gate 2 · out", "DHA-KHA 45-1020", "08:41"],
                ["Gate 1 · in", "DHA-THA 11-7781", "08:39"],
              ].map(([g, plate, at]) => (
                <div key={plate} className="flex items-center justify-between border-t border-border py-2.5 text-[13px] first:border-t-0">
                  <span className="text-muted">{g}</span>
                  <span className="font-mono font-medium text-text">{plate}</span>
                  <span className="num text-muted">{at}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

"use client";

import { ArrowRight, Check, Mail } from "lucide-react";
import * as React from "react";

import { AvatarStack, Button, Input, Rating, toast } from "@waveinno/ui";

export default function HeroSimple() {
  const [email, setEmail] = React.useState("");
  return (
    <section className="relative isolate overflow-hidden px-4 py-24 text-center sm:px-6 sm:py-28">
      <div aria-hidden className="absolute inset-x-0 top-0 -z-10 h-[420px] bg-[radial-gradient(45%_60%_at_50%_0%,color-mix(in_srgb,var(--brand-1)_18%,transparent),transparent_75%)]" />
      <p className="mx-auto inline-flex items-center gap-2 rounded-full border border-border bg-raised px-3 py-1 text-[12.5px] font-medium text-body shadow-[var(--lit)]">
        <span className="size-1.5 rounded-full bg-success shadow-[0_0_0_3px_var(--success-subtle)]" /> Free for your first site
      </p>
      <h1 className="disp mx-auto mt-6 max-w-2xl text-[40px] font-bold leading-[1.06] tracking-[-0.04em] text-text sm:text-[56px]">The car park that closes its own books</h1>
      <p className="mx-auto mt-5 max-w-lg text-[16.5px] leading-[1.65] text-body">Gates, payments and reports in one place. Set it up in an afternoon; see every taka by the evening.</p>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          toast.success("You are on the list", { description: `We will write to ${email || "you"} within a day.` });
          setEmail("");
        }}
        className="mx-auto mt-8 flex max-w-md flex-col gap-2 sm:flex-row"
      >
        <label htmlFor="hs-email" className="sr-only">
          Work email
        </label>
        <Input id="hs-email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" leading={<Mail />} className="h-11" />
        <Button type="submit" variant="primary" className="h-11 shrink-0 px-5">
          Get started <ArrowRight />
        </Button>
      </form>
      <ul className="mt-4 flex flex-wrap justify-center gap-x-5 gap-y-1 text-[12.5px] text-muted">
        {["No card needed", "Bangla and English", "Cancel any time"].map((t) => (
          <li key={t} className="inline-flex items-center gap-1.5">
            <Check className="size-3.5 text-success" /> {t}
          </li>
        ))}
      </ul>
      <div className="mt-10 inline-flex items-center gap-3 rounded-full border border-border bg-raised py-1.5 pl-1.5 pr-4 shadow-[var(--lit)]">
        <AvatarStack names={["Karim Ahmed", "Nusrat Jahan", "Rafiq Islam", "Farhana Akter", "Tanvir Hasan"]} size="sm" />
        <span className="text-left">
          <Rating readOnly value={5} size="sm" />
          <span className="block text-[12px] text-muted">
            <b className="font-semibold text-text">1,200 owners</b> run their sites on it
          </span>
        </span>
      </div>
    </section>
  );
}