Hero

import { buttonVariants } from "@/components/ui/button";

export default function Basic() {
  return (
    <section className="mx-auto grid max-w-7xl grid-cols-1 items-center gap-8 px-4 py-16 md:grid-cols-2">
      <div>
        <h1 className="text-balance text-2xl font-bold tracking-tighter md:text-4xl">
          Intelligent Analytics for Smarter Business Choices
        </h1>
        <p className="mt-2 text-muted-foreground md:text-balance">
          Empower your decision-making with advanced analytics that turn data
          into actionable insights. Drive your business forward with confidence.
        </p>
        <div className="mt-6 flex gap-2">
          <a href="#" className={buttonVariants()}>
            Get Started
          </a>
          <a href="#" className={buttonVariants({ variant: "outline" })}>
            Learn More
          </a>
        </div>
      </div>
      <div>
        <img
          src="/images/dashboard.png"
          className="h-96 w-full rounded border object-cover object-left-top"
          alt="Dashboard"
        />
      </div>
    </section>
  );
}

import { buttonVariants } from "@/components/ui/button";

export default function WithSeperateImage() {
  return (
    <section className="mx-auto grid max-w-4xl grid-cols-1 items-center gap-14 px-4 pt-16">
      <div className="max-w-xl">
        <h1 className="text-balance text-2xl font-bold tracking-tighter md:text-4xl">
          Driving excellence in all aspects of your business.
        </h1>
        <p className="mt-2 text-balance text-muted-foreground">
          Push the boundaries of innovation and optimization with our platform.
          Excel in your operations and deliver exceptional value to your
          customers.
        </p>
        <div className="mt-4 flex gap-2">
          <a href="#" className={buttonVariants({ size: "sm" })}>
            Get Started
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "outline", size: "sm" })}
          >
            Learn More
          </a>
        </div>
      </div>
      <div className="h-72 overflow-hidden rounded-t border-x border-t bg-primary-foreground p-2">
        <img
          src="/images/dashboard.png"
          className="h-96 w-full rounded border object-cover object-left-top"
          alt="Dashboard"
        />
      </div>
    </section>
  );
}

import { Badge } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";

export default function Centered() {
  return (
    <section className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-14 px-4 pt-16">
      <div className="mx-auto max-w-xl text-center">
        <Badge variant="outline">New: Keyboard Shortcuts →</Badge>
        <h1 className="mt-4 text-balance text-3xl font-bold tracking-tighter md:text-4xl">
          Driving excellence in all aspects of your business.
        </h1>
        <p className="mt-2 text-balance text-muted-foreground">
          Push the boundaries of innovation and optimization with our platform.
          Excel in your operations and deliver exceptional value to your
          customers.
        </p>
        <div className="mt-6 flex items-center justify-center gap-2">
          <a href="#" className={buttonVariants({ size: "sm" })}>
            Get Started
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "outline", size: "sm" })}
          >
            Learn More
          </a>
        </div>
      </div>
      <div className="h-72 overflow-hidden rounded-t border-x border-t bg-primary-foreground p-2">
        <img
          src="/images/dashboard.png"
          className="h-96 w-full rounded border object-cover object-left-top"
          alt="Dashboard"
        />
      </div>
    </section>
  );
}

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

export default function CenteredWithInput() {
  return (
    <section className="mx-auto max-w-7xl gap-14 px-4 py-24">
      <div className="mx-auto max-w-lg text-center">
        <Badge variant="outline">New: Keyboard Shortcuts →</Badge>
        <h1 className="mt-4 text-balance text-2xl font-bold tracking-tighter md:text-4xl">
          Scale Effortlessly with Our Adaptive Platform
        </h1>
        <p className="mt-2 text-balance text-muted-foreground">
          Adapt and grow without limits. Our platform evolves with your
          business, ensuring you&apos;re always ahead of the curve.
        </p>
        <form className="mx-auto mt-6 flex max-w-sm flex-col items-center justify-center gap-2 md:flex-row">
          <Label className="sr-only" htmlFor="email-address">
            Email address
          </Label>
          <Input
            type="email"
            id="email-address"
            placeholder="Enter your email address"
          />
          <Button type="submit" className="w-full md:w-auto">
            Get started →
          </Button>
        </form>
      </div>
    </section>
  );
}

import { buttonVariants } from "@/components/ui/button";

export default function SplitWithImage() {
  return (
    <section className="grid grid-cols-1 items-center gap-x-8 pl-4 md:grid-cols-2">
      <div className="mx-auto py-16 md:max-w-md">
        <h1 className="text-balance text-3xl font-bold tracking-tighter md:text-4xl">
          Your Pathway to Unprecedented Success
        </h1>
        <p className="mt-2 text-balance text-muted-foreground">
          Experience the power of a platform that&apos;s designed to unlock your
          business&apos;s potential. Achieve growth, efficiency, and success on
          a new scale.
        </p>
        <div className="mt-6 flex gap-2">
          <a href="#" className={buttonVariants()}>
            Get Started
          </a>
          <a href="#" className={buttonVariants({ variant: "outline" })}>
            Learn More
          </a>
        </div>
      </div>
      <div>
        <img
          src="/images/dashboard.png"
          className="h-96 w-full rounded-tl-lg border-l border-t object-cover object-left-top md:rounded-none md:border-t-0"
          alt="Dashboard"
        />
      </div>
    </section>
  );
}

import Logo from "@/mynaui/Logo";
import { buttonVariants } from "@/components/ui/button";
import { ArrowRight, Folder, Label, Mobile } from "@mynaui/icons-react";

export default function Hero6() {
  return (
    <section className="mx-auto flex min-h-screen max-w-4xl flex-col items-start justify-start gap-x-8 gap-y-14 p-4">
      <header className="flex w-full items-center justify-between py-2">
        <Logo />
        <nav className="hidden md:block">
          <ul className="flex items-center gap-x-4">
            {["Products", "Pricing", "Resources", "Enterprise", "Contact"].map(
              (item) => (
                <li key={item}>
                  <a href="#" className="text-foreground text-sm">
                    {item}
                  </a>
                </li>
              ),
            )}
          </ul>
        </nav>

        <a href="#" className={buttonVariants({ size: "sm" })}>
          Sign Up <ArrowRight className="size-4" />
        </a>
      </header>

      <div className="mx-auto flex max-w-lg flex-col items-center justify-center gap-4 text-center">
        <h1 className="text-foreground text-4xl font-bold tracking-tight text-balance">
          Driving excellence in all aspects of your business.
        </h1>
        <p className="text-muted-foreground mx-auto max-w-sm text-base">
          Push the boundaries of innovation and optimization with our platform.
          Excel in your operations and deliver exceptional value to your
          customers.
        </p>
        <div className="flex gap-2">
          <a href="#" className={buttonVariants()}>
            Get Started
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "outline" })}
          >
            Learn More
          </a>
        </div>
      </div>

      <div className="relative mx-auto h-full w-full overflow-visible">
        <div
          className="absolute inset-0 grid grid-cols-4 blur-2xl select-none pointer-events-none"
          aria-hidden
        >
          <div className="bg-red-300/50"></div>
          <div className="bg-yellow-300/50"></div>
          <div className="bg-green-300/50"></div>
          <div className="bg-blue-300/50"></div>
        </div>
        <div className="border-input relative bg-background mx-auto h-full w-full overflow-hidden rounded-md border p-2">
          <img
            src="/images/dashboard.png"
            className="border-input h-96 w-full rounded border object-cover object-left-top"
            alt="Dashboard"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 gap-8 overflow-hidden md:grid-cols-2 mb-10">
        <div className="flex items-start justify-start gap-5">
          <div className="mt-0.5 flex items-center justify-center rounded-md border-[0.5px] border-red-300 bg-red-50 dark:border-red-800/25 dark:bg-red-800/25 p-2">
            <Folder className="h-6 w-6 text-red-600 dark:text-foreground" />
          </div>
          <div>
            <h3 className="text-foreground text-lg font-semibold">
              Smart Organization
            </h3>
            <p className="text-muted-foreground text-sm">
              Streamline your workflow and boost productivity with our intuitive
              organization tools.
            </p>
          </div>
        </div>
        <div className="flex items-start justify-start gap-5">
          <div className="mt-0.5 flex items-center justify-center rounded-md border-[0.5px] border-emerald-300 bg-emerald-50 dark:border-emerald-800/25 dark:bg-emerald-800/25 p-2">
            <Mobile className="h-6 w-6 text-emerald-600 dark:text-foreground" />
          </div>
          <div>
            <h3 className="text-foreground text-lg font-semibold">
              Cross-Device Syncing
            </h3>
            <p className="text-muted-foreground text-sm">
              Seamlessly sync your bookmarks across all devices, ensuring you
              have access to your sites no matter the device.
            </p>
          </div>
        </div>
        <div className="flex items-start justify-start gap-5">
          <div className="mt-0.5 flex items-center justify-center rounded-md border-[0.5px] border-blue-300 bg-blue-50 dark:border-blue-800/25 dark:bg-blue-800/25 p-2">
            <Mobile className="h-6 w-6 text-blue-600 dark:text-foreground" />
          </div>
          <div>
            <h3 className="text-foreground text-lg font-semibold">
              Full-Text Search
            </h3>
            <p className="text-muted-foreground text-sm">
              Quickly find bookmarks not just by title or tags, but also through
              a powerful full-text search of the page contents.
            </p>
          </div>
        </div>
        <div className="flex items-start justify-start gap-5">
          <div className="mt-0.5 flex items-center justify-center rounded-md border-[0.5px] border-indigo-300 bg-indigo-50 dark:border-indigo-800/25 dark:bg-indigo-800/25 p-2">
            <Label className="h-6 w-6 text-indigo-600 dark:text-foreground" />
          </div>
          <div>
            <h3 className="text-foreground text-lg font-semibold">
              Tagging System
            </h3>
            <p className="text-muted-foreground text-sm">
              Organize your bookmarks with custom tags for effortless retrieval
              and organization.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}