Code
app/page.tsx
1import TiltHeadline from "@/app/components/tilt-headline";
2import { Merge } from 'lucide-react';
3
4const TiltHeadlinePage = () => {
5 return (
6 <div className=" w-full h-screen flex items-center justify-center bg-[#FFEF9A]/50">
7 <TiltHeadline badgeIcon={Merge} badgeText="Beta" href="/" mainText="Get Early Access Now" />
8 </div>
9 );
10}
11
12export default TiltHeadlinePage;
Installation
Initialized a project and installed the necessary dependencies to use this component.
1. Initialize a new Next.js project:
npx create-next-app@latest my-app
Add Tilt Headline Component
src/components/tilt-headline.tsx
1import { ArrowRight, LucideIcon } from "lucide-react";
2
3interface TiltHeadlineProps {
4 badgeText: string;
5 badgeIcon: LucideIcon;
6 mainText: string;
7 href: string;
8}
9
10const TiltHeadline: React.FC<TiltHeadlineProps> = ({
11 badgeText,
12 badgeIcon: BadgeIcon,
13 mainText,
14 href
15}) => {
16 return (
17 <div className="mb-1.5 w-fit rounded-full bg-gray-950">
18 <a
19 href={href}
20 rel="nofollow"
21 className="flex font-satoshi origin-top-left items-center rounded-full border border-black/90 bg-white p-[4px] transition-transform hover:-rotate-1"
22 >
23 <span className="rounded-full flex items-center gap-1.5 bg-[#FFDF3A] pl-3 pr-4 py-1 font-medium text-lg text-foregound">
24 <BadgeIcon size={20} />
25 {badgeText}
26 </span>
27 <span className="ml-1.5 mr-2 inline-block font-medium text-lg text-black">
28 {mainText}
29 </span>
30 <ArrowRight size={20} className="mr-2 inline-block" />
31 </a>
32 </div>
33 );
34};
35
36export default TiltHeadline;
