feat(www): Bento grid on hero section

apps/www/src/components/layout/marketing-header.tsx

@@ -9,7 +9,7 @@ export async function MarketingHeader() {
     const stars = await getGithubRepoStars();
 
     return (
-        <header className="sticky top-0 flex h-16 w-full items-center justify-center border-b border-border bg-background">
+        <header className="sticky top-0 z-50 flex h-16 w-full items-center justify-center border-b border-border bg-background">
             <div className="container flex items-center justify-between gap-6">
                 <div className="flex items-center gap-10">
                     <Link href={siteUrls.marketing.base}>

apps/www/src/components/layout/page-header.tsx → apps/www/src/components/layout/page-layout.tsx

@@ -1,6 +1,6 @@
 export function PageHeaderHeading({ children }: { children: React.ReactNode }) {
     return (
-        <h1 className="text-center font-heading text-6xl font-bold leading-tight tracking-tighter lg:leading-[1.1]">
+        <h1 className="font-heading text-center text-6xl font-bold leading-tight tracking-tighter lg:leading-[1.1]">
             {children}
         </h1>
     );
@@ -13,3 +13,11 @@ export function PageHeaderDescription({
 }) {
     return <p className="text-center text-2xl font-medium">{children}</p>;
 }
+
+export function PageActions({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="flex w-full items-center justify-center space-x-4 py-4 md:pb-10">
+            {children}
+        </div>
+    );
+}

apps/www/src/components/marketing/hero.tsx

@@ -1,9 +1,17 @@
 import { Background } from "@/components/background";
+import { Icons } from "@/components/icons";
 import {
+    PageActions,
     PageHeaderDescription,
     PageHeaderHeading,
-} from "@/components/layout/page-header";
+} from "@/components/layout/page-layout";
 import { Announcment } from "@/components/marketing/announment";
+import { BentoGrid, BentoItem } from "@/components/ui/bento";
+import { BorderBeam } from "@/components/ui/border-beam";
+import { buttonVariants } from "@/components/ui/button";
+import { siteUrls } from "@/config/urls";
+import Image from "next/image";
+import Link from "next/link";
 
 export function Hero() {
     return (
@@ -17,7 +25,70 @@ export function Hero() {
                         <span className="font-bold">Open Source </span> SaaS
                         Starterkit, Building Blocks and Guides
                     </PageHeaderDescription>
+                    <PageActions>
+                        <Link
+                            href={siteUrls.docs.base}
+                            className={buttonVariants()}
+                        >
+                            Get Started
+                        </Link>
+                        <Link
+                            href={siteUrls.socials.github}
+                            className={buttonVariants({
+                                variant: "outline",
+                            })}
+                        >
+                            <Icons.gitHub className="mr-1.5 h-4 w-4" />
+                            Github
+                        </Link>
+                    </PageActions>
                 </div>
+
+                <BentoGrid className="w-full max-w-6xl">
+                    <BentoItem
+                        headingAs="h2"
+                        title="Customizable. Extensible. Flexible."
+                        description="Open Source SaaS Starterkit built using Next.js 14.2, Shadcn UI, Tailwind CSS, Typescript, NextAuth, Drizzle, and more."
+                        wrapperClassName="col-span-3 aspect-video relative"
+                        badge="SaaS Starterkit"
+                        href={siteUrls.saasStarterkit.base}
+                        cta="Get it Now"
+                    >
+                        <div className="relative mt-6 aspect-video w-full overflow-hidden rounded-2xl border border-border p-4">
+                            <Image
+                                src="/saasdemo.png"
+                                alt="SaaS Demo"
+                                fill
+                                objectFit="cover"
+                                objectPosition="top"
+                            />
+
+                            <BorderBeam size={300} duration={12} delay={16} />
+                        </div>
+                    </BentoItem>
+
+                    <BentoItem
+                        headingAs="h2"
+                        title="Beautiful Building Blocks"
+                        description="Build your SaaS app with our beautiful building blocks. We have a collection of components that you can use to build your app."
+                        wrapperClassName="col-span-2"
+                        badge="Blocks"
+                        href={siteUrls.saasStarterkit.base}
+                        cta="Coming Soom"
+                        ctaDisabled
+                    />
+
+                    <BentoItem
+                        headingAs="h2"
+                        title="Guides"
+                        description="Learn how to build your SaaS app with our guides. We have a collection of guides that you can use to build your app."
+                        wrapperClassName="col-span-1"
+                        badge="Guides"
+                        href={siteUrls.saasStarterkit.base}
+                        cta="Coming Soon"
+                        ctaDisabled
+                    />
+                </BentoGrid>
             </section>
         </Background>
     );

apps/www/src/components/ui/bento.tsx

@@ -0,0 +1,90 @@
+import { Badge } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { ClassValue } from "class-variance-authority/types";
+import Link from "next/link";
+import * as React from "react";
+
+const BentoGrid = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div
+            className={cn("grid w-full grid-cols-3 gap-4", className)}
+            {...props}
+        />
+    );
+};
+
+interface BentoItemProps {
+    title: string;
+    description: string;
+    badge?: React.ReactNode;
+    wrapperClassName?: ClassValue;
+    children?: React.ReactNode;
+    href?: string;
+    cta?: string;
+    ctaDisabled?: boolean;
+    headingAs?: React.ElementType;
+}
+
+const BentoItem = ({
+    wrapperClassName,
+    title,
+    description,
+    badge,
+    children,
+    href,
+    cta,
+    ctaDisabled,
+    headingAs,
+}: BentoItemProps) => {
+    const HeadingComp = headingAs ?? "h3";
+
+    return (
+        <div
+            className={cn(
+                "flex flex-col items-start justify-start overflow-hidden rounded-3xl border border-border bg-background p-3 shadow-lg",
+                wrapperClassName,
+            )}
+        >
+            <div className="p-4">
+                {badge && (
+                    <Badge
+                        className="mb-6 flex-shrink-0 rounded-lg"
+                        size="sm"
+                        variant="secondary"
+                    >
+                        {badge}
+                    </Badge>
+                )}
+                <HeadingComp className="text-xl font-semibold">
+                    {title}
+                </HeadingComp>
+                <p className="mt-3 max-w-xl text-muted-foreground">
+                    {description}
+                </p>
+                {href && (
+                    <Link
+                        aria-disabled={ctaDisabled}
+                        href={href}
+                        className={cn(
+                            buttonVariants({
+                                variant: "outline",
+                                className: "mt-5 flex-shrink-0",
+                            }),
+                            ctaDisabled && "pointer-events-none opacity-50",
+                        )}
+                    >
+                        {cta ?? "Learn More"}
+                    </Link>
+                )}
+            </div>
+
+            {children && children}
+        </div>
+    );
+};
+
+export { BentoGrid, BentoItem };

apps/www/src/config/pages.ts

@@ -3,10 +3,16 @@ import { siteUrls } from "@/config/urls";
 interface Page {
     title: string;
     description: string;
-    nav: { label: string; disabled?: boolean; href: string }[];
 }
 
-export const marketingPageConfig: Page = {
+interface MarketingPageConfig extends Page {
+    nav: {
+        label: string;
+        href: string;
+    }[];
+}
+
+export const marketingPageConfig: MarketingPageConfig = {
     title: "Marketing",
     description: "Marketing page",
     nav: [