feat(www): Responsize landing page

alifarooq9 · Apr 8, 2024 · 2bb6ae7 · 2bb6ae7
1 parent 038a568
commit 2bb6ae7
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 44 deletions.
diff --git a/apps/www/src/app/(app)/_components/highlight-tabs.tsx b/apps/www/src/app/(app)/_components/highlight-tabs.tsx
@@ -1,7 +1,10 @@
+"use client";
+
 import { cn } from "@/lib/utils";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { TabsProps } from "@radix-ui/react-tabs";
 import { SaasStarterkitHighlight } from "@/app/(app)/_components/saas-startkit-highlight";
+import React from "react";
 
 const highlights = [
     {
@@ -17,49 +20,66 @@ const highlights = [
         description:
             "Auth forms, modals, hero sections, pricing tables, and more — all customizable and open source.",
         disabled: true,
-        badge: "Coming Soon",
+        badge: "Soon",
     },
     {
         id: "guides",
         title: "Guides",
         description:
             "Authenticating users, setting up billing, and more — all the guides you need to launch your app.",
         disabled: true,
-        badge: "Coming Soon",
+        badge: "Soon",
     },
 ];
 
 type HighlightNavProps = TabsProps;
 
 export function HighlightTabs({ className, ...props }: HighlightNavProps) {
+    const [selectedHighlight, setSelectedHighlight] = React.useState(
+        highlights[0]?.id,
+    );
+
+    const activeHighlight = highlights.find(
+        (highlight) => highlight.id === selectedHighlight,
+    );
+
     return (
         <Tabs
             className={cn("space-y-10", className)}
-            defaultValue={highlights[0]?.id}
+            value={selectedHighlight}
+            onValueChange={(value) => setSelectedHighlight(value)}
             {...props}
         >
-            <TabsList className="grid h-auto grid-cols-3 items-start bg-transparent p-0">
-                {highlights.map((highlight) => (
-                    <TabsTrigger
-                        value={highlight.id}
-                        key={highlight.id}
-                        disabled={highlight.disabled}
-                        className="group flex flex-col items-start justify-start gap-2 whitespace-normal rounded-none border-t py-6 text-start data-[state=active]:border-primary data-[state=active]:shadow-none"
-                    >
-                        <div className="flex items-center gap-2">
-                            <h2 className="font-medium">{highlight.title}</h2>
-                            {highlight?.badge && (
-                                <span className="rounded-sm bg-secondary px-2 py-0.5 text-xs font-medium text-primary">
-                                    {highlight.badge}
-                                </span>
-                            )}
-                        </div>
-                        <p className="font-normal text-muted-foreground transition-all">
-                            {highlight.description}
-                        </p>
-                    </TabsTrigger>
-                ))}
-            </TabsList>
+            <div className="flex flex-col items-center gap-4">
+                <TabsList className="grid h-auto grid-cols-3 items-start bg-transparent p-0">
+                    {highlights.map((highlight) => (
+                        <TabsTrigger
+                            value={highlight.id}
+                            key={highlight.id}
+                            disabled={highlight.disabled}
+                            className="group flex flex-col items-center justify-start gap-2 whitespace-normal rounded-none border-t py-6 text-start data-[state=active]:border-primary data-[state=active]:shadow-none sm:items-start"
+                        >
+                            <div className="flex flex-col items-center gap-2 sm:flex-row">
+                                <h2 className="text-center font-medium">
+                                    {highlight.title}
+                                </h2>
+                                {highlight?.badge && (
+                                    <span className="block rounded-sm bg-secondary px-2 py-0.5 text-center text-xs font-medium text-primary">
+                                        {highlight.badge}
+                                    </span>
+                                )}
+                            </div>
+                            <p className="hidden font-normal text-muted-foreground transition-all sm:block">
+                                {highlight.description}
+                            </p>
+                        </TabsTrigger>
+                    ))}
+                </TabsList>
+
+                <p className="block w-full text-center text-sm font-normal text-muted-foreground transition-all sm:hidden">
+                    {activeHighlight?.description}
+                </p>
+            </div>
             <TabsContent value="saas-starterkit">
                 <SaasStarterkitHighlight />
             </TabsContent>

diff --git a/apps/www/src/app/(app)/_components/saas-startkit-highlight.tsx b/apps/www/src/app/(app)/_components/saas-startkit-highlight.tsx
@@ -44,23 +44,21 @@ const saasStarterkitHighlights = [
 export function SaasStarterkitHighlight() {
     return (
         <div className="space-y-4">
-            <div>
-                <p className="text-sm">
-                    For more information, Visit the{" "}
-                    <Link
-                        href={siteUrls.saasStarterkit}
-                        className={badgeVariants({
-                            variant: "secondary",
-                            className: "ml-1 gap-0.5",
-                        })}
-                    >
-                        SaaS Starterkit
-                        <ArrowRightIcon className="h-3 w-3" />
-                    </Link>
-                </p>
-            </div>
-            <Tabs defaultValue="user-dashboard">
-                <TabsList className="gap-2 bg-transparent p-0">
+            <p className="gap-2 text-center text-sm sm:text-left">
+                For more information, Visit the{" "}
+                <Link
+                    href={siteUrls.saasStarterkit}
+                    className={badgeVariants({
+                        variant: "secondary",
+                        className: "ml-1 mt-1 gap-0.5 sm:mt-0",
+                    })}
+                >
+                    <span>SaaS Starterkit</span>
+                    <ArrowRightIcon className="h-3 w-3" />
+                </Link>
+            </p>
+            <Tabs defaultValue="user-dashboard" className="h-auto">
+                <TabsList className="h-auto flex-wrap items-center justify-center gap-2 bg-transparent p-0 sm:justify-start">
                     {saasStarterkitHighlights.map((tab) => (
                         <TabsTrigger
                             key={tab.id}

diff --git a/apps/www/src/app/(app)/page.tsx b/apps/www/src/app/(app)/page.tsx
@@ -21,7 +21,7 @@ export default async function HomePage() {
                     RapidLaunch is in development. Follow our progress on 𝕏
                     (formally Twitter)
                 </span>
-                <ExternalLinkIcon className="h-4 w-4" />
+                <ExternalLinkIcon className="h-4 w-4 flex-shrink-0" />
             </Link>
             <Balance
                 as="h1"
@@ -45,7 +45,7 @@ export default async function HomePage() {
                         className: "flex items-center gap-2",
                     })}
                 >
-                    Get Early Access
+                    Early Access
                 </Link>
                 <Link
                     href={siteUrls.github}