Hero
Used to display a large message or call to action at the top of a landing page.
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 loading="lazy" decoding="async"
src="/images/dashboard.webp"
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-muted p-2">
<img
loading="lazy"
decoding="async"
src="/images/dashboard.webp"
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-muted p-2">
<img
loading="lazy"
decoding="async"
src="/images/dashboard.webp"
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'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's designed to unlock your
business'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 loading="lazy" decoding="async"
src="/images/dashboard.webp"
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 loading="lazy" decoding="async"
src="/images/dashboard.webp"
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>
);
}
import { buttonVariants } from "@/components/ui/button"
export default function BackgroundImageHero() {
return (
<section className="relative isolate flex min-h-[36rem] items-end overflow-hidden bg-muted text-foreground">
<img
src="/images/gradients/lilac.webp"
alt="Soft blue gradient fading into deep indigo"
className="absolute inset-0 -z-20 size-full object-cover saturate-75"
/>
<div className="absolute inset-0 -z-10 bg-gradient-to-r from-background/90 via-background/45 to-transparent" />
<div className="mx-auto w-full max-w-6xl px-4 py-16 md:py-24">
<div className="flex max-w-2xl flex-col gap-6">
<p className="text-sm font-medium tracking-widest uppercase text-foreground/70">
Northline creative studio
</p>
<h1 className="text-balance text-4xl font-bold tracking-tight md:text-6xl">
Give bold ideas room to move.
</h1>
<p className="max-w-xl text-balance text-base text-foreground/70 md:text-lg">
We shape identities, digital products, and campaigns for people
building a more thoughtful future.
</p>
<div className="flex flex-wrap gap-2">
<a href="#" className={buttonVariants()}>
View our work
</a>
<a
href="#"
className={buttonVariants({ variant: "ghost", className: "hover:bg-background/40" })}
>
Meet the studio
</a>
</div>
</div>
</div>
</section>
)
}
import { Play } from "lucide-react"
import { buttonVariants } from "@/components/ui/button"
export default function BackgroundVideoHero() {
return (
<section className="relative isolate flex min-h-[36rem] items-center overflow-hidden bg-foreground text-background">
<video
autoPlay
muted
loop
playsInline
poster="/images/image.webp"
className="absolute inset-0 -z-20 size-full object-cover"
>
<source
src="https://videos.pexels.com/video-files/2715412/2715412-hd_1920_1080_30fps.mp4"
type="video/mp4"
/>
</video>
<div className="absolute inset-0 -z-10 bg-foreground/60" />
<div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-6 px-4 py-24 text-center">
<p className="text-sm font-medium tracking-widest uppercase text-background/80">
A film by Northline
</p>
<h1 className="max-w-4xl text-balance text-4xl font-bold tracking-tight md:text-6xl">
Ideas catch fire when people move together
</h1>
<p className="max-w-xl text-balance text-background/80">
Meet the makers turning raw energy into work that changes culture,
communities, and what comes next.
</p>
<a href="#" className={buttonVariants({ variant: "secondary", size: "lg" })}>
<Play data-icon="inline-start" fill="currentColor" />
Watch the story
</a>
</div>
</section>
)
}