Components
Loading preview...
Multiple background beams that follow a path of SVG, makes a good hero section background.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/background-beams"use client";
import React from "react";
import { BackgroundBeams } from "@/components/ui/background-beams";
import { Input } from "@/components/ui/input";
function BackgroundBeamsDemo() {
return (
<div className="h-[40rem] w-full rounded-md bg-background relative flex flex-col items-center justify-center antialiased">
<div className="max-w-2xl mx-auto p-4">
<h1 className="relative z-10 text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-foreground to-muted-foreground text-center font-sans font-bold">
Join the waitlist
</h1>
<p></p>
<p className="text-muted-foreground max-w-lg mx-auto my-2 text-sm text-center relative z-10">
Welcome to MailJet, the best transactional email service on the web.
We provide reliable, scalable, and customizable email solutions for
your business. Whether you're sending order confirmations,
password reset emails, or promotional campaigns, MailJet has got you
covered.
</p>
<Input
type="email"
placeholder="hi@manuarora.in"
className="w-full mt-4 relative z-10"
/>
</div>
<BackgroundBeams />
</div>
);
}
export { BackgroundBeamsDemo };