feat(www): Marketing header ui

alifarooq9 · May 22, 2024 · df0483a · df0483a
1 parent d9f8115
commit df0483a
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 168 deletions.
diff --git a/apps/www/src/app/(marketing)/page.tsx b/apps/www/src/app/(marketing)/page.tsx
@@ -1,4 +1,4 @@
-import { MarketingLayout } from "@/components/marketing-layout";
+import { MarketingLayout } from "@/components/layout/marketing-layout";
 
 export default function HomePage() {
     return (
@@ -7,3 +7,6 @@ export default function HomePage() {
         </MarketingLayout>
     );
 }
+
+export const dynamic = "force-static";
+export const revalidate = 60 * 60;
diff --git a/apps/www/src/app/saas-starterkit/page.tsx b/apps/www/src/app/saas-starterkit/page.tsx
@@ -0,0 +1,9 @@
+import { MarketingLayout } from "@/components/layout/marketing-layout";
+
+export default function SaasStarterKitPage() {
+    return (
+        <MarketingLayout>
+            <div>saas starter kit</div>
+        </MarketingLayout>
+    );
+}
diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx
@@ -2,7 +2,7 @@ import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
 import type { ElementType } from "react";
 
-export type IconProps = React.HTMLAttributes<SVGElement>;
+export type IconProps = React.SVGProps<SVGSVGElement>;
 
 export const Icons = {
     logo: ({
@@ -23,12 +23,7 @@ export const Icons = {
                     className={cn("h-6 w-6 fill-primary", iconProps?.className)}
                     {...iconProps}
                 />
-                <span
-                    className={cn(
-                        classNameText,
-                        "font-heading text-lg font-bold",
-                    )}
-                >
+                <span className={cn(classNameText, "text-lg font-bold")}>
                     {siteConfig.name}
                 </span>
             </Comp>
@@ -84,7 +79,7 @@ export const Icons = {
             ></path>
         </svg>
     ),
-    spinner: (props: React.SVGProps<SVGSVGElement>) => (
+    spinner: (props: IconProps) => (
         <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -174,4 +169,56 @@ export const Icons = {
             ></path>
         </svg>
     ),
+    star: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color="currentColor"
+            fill="none"
+            {...props}
+        >
+            <path
+                d="M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
+    chevronRight: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color={"currentColor"}
+            fill={"none"}
+            {...props}
+        >
+            <path
+                d="M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
+    circle: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color={"currentColor"}
+            fill={"none"}
+            {...props}
+        >
+            <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
 };
diff --git a/apps/www/src/components/layout/marketing-header.tsx b/apps/www/src/components/layout/marketing-header.tsx
@@ -1,32 +1,43 @@
 import { Icons } from "@/components/icons";
+import { MarketingMainNav } from "@/components/layout/marketing-nav";
 import { buttonVariants } from "@/components/ui/button";
 import { siteUrls } from "@/config/urls";
+import { getGithubRepoStars } from "@/server/actions/github";
 import Link from "next/link";
 
-export function MarketingHeader() {
+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">
             <div className="container flex items-center justify-between gap-6">
-                <Link href={siteUrls.marketing.base}>
-                    <Icons.logo />
-                </Link>
-
-                <div className="flex items-center gap-2">
-                    <Link
-                        className={buttonVariants({ size: "sm" })}
-                        href={siteUrls.docs.base}
-                    >
-                        Get Started
+                <div className="flex items-center gap-10">
+                    <Link href={siteUrls.marketing.base}>
+                        <Icons.logo />
                     </Link>
 
+                    <MarketingMainNav />
+                </div>
+
+                <div className="flex items-center gap-2">
                     <Link
                         className={buttonVariants({
                             size: "sm",
                             variant: "outline",
+                            className: "items-center gap-1.5",
                         })}
-                        href={siteUrls.marketing.pricing}
+                        href={siteUrls.socials.github}
+                    >
+                        <Icons.gitHub className="h-4 w-4" />
+                        <span className="text-sm text-muted-foreground">
+                            {stars}
+                        </span>
+                    </Link>
+                    <Link
+                        className={buttonVariants({ size: "sm" })}
+                        href={siteUrls.docs.base}
                     >
-                        Pricing
+                        Get Started
                     </Link>
                 </div>
             </div>

diff --git a/apps/www/src/components/marketing-layout.tsx → ...rc/components/layout/marketing-layout.tsx b/apps/www/src/components/marketing-layout.tsx → ...rc/components/layout/marketing-layout.tsx
diff --git a/apps/www/src/components/layout/marketing-mobile-nav.tsx b/apps/www/src/components/layout/marketing-mobile-nav.tsx
diff --git a/apps/www/src/components/layout/marketing-nav.tsx b/apps/www/src/components/layout/marketing-nav.tsx
@@ -1,32 +1,82 @@
 "use client";
 
-import { navConfig } from "@/config/nav";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
+import { marketingPageConfig } from "@/config/pages";
+import { Icons } from "@/components/icons";
+import React from "react";
 
 export function MarketingMainNav() {
     const pathname = usePathname();
+    const [isHovered, setIsHovered] = React.useState<boolean>(false);
+    const [currentHovered, setCurrentHovered] = React.useState<string>("");
 
     return (
         <section className="hidden gap-6 sm:flex sm:items-center">
-            <nav className="flex items-center gap-2">
-                <ul className="flex items-center gap-5">
-                    {navConfig.items.map((item) => (
-                        <li key={item.label}>
+            <nav className="flex items-center gap-4">
+                <ul
+                    className="flex items-center gap-6"
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                >
+                    {marketingPageConfig.nav.map((item) => (
+                        <li
+                            key={item.label}
+                            onMouseEnter={() => {
+                                if (currentHovered === "") {
+                                    setCurrentHovered(item.href);
+                                }
+                            }}
+                            onMouseLeave={() => {
+                                if (currentHovered !== "") {
+                                    setCurrentHovered("");
+                                }
+                            }}
+                        >
                             <Link
                                 href={item.href}
                                 className={cn(
-                                    " text-sm text-muted-foreground hover:text-foreground/80",
-                                    {
-                                        "text-foreground":
-                                            pathname === item.href,
-                                    },
-                                    item.disabled &&
-                                        "pointer-events-none opacity-60",
+                                    "flex items-center gap-2 text-sm font-medium",
                                 )}
                             >
-                                {item.label}
+                                <span
+                                    className={cn(
+                                        "transition-colors",
+                                        isHovered &&
+                                            currentHovered !== item.href
+                                            ? "text-muted-foreground/80"
+                                            : "",
+                                    )}
+                                >
+                                    {item.label}
+                                </span>
+
+                                <span
+                                    className={cn(
+                                        "flex h-5 w-5 items-center justify-center rounded-sm border-2 border-border",
+                                        pathname === item.href
+                                            ? "bg-secondary"
+                                            : "",
+                                    )}
+                                >
+                                    <Icons.circle
+                                        className={cn(
+                                            "h-2.5 w-2.5 transition-all",
+                                            pathname === item.href
+                                                ? "block"
+                                                : "hidden",
+                                        )}
+                                    />
+                                    <Icons.chevronRight
+                                        className={cn(
+                                            "h-2.5 w-2.5 transition-all",
+                                            pathname === item.href
+                                                ? "hidden"
+                                                : "block",
+                                        )}
+                                    />
+                                </span>
                             </Link>
                         </li>
                     ))}

diff --git a/apps/www/src/components/ui/button.tsx b/apps/www/src/components/ui/button.tsx
@@ -15,7 +15,7 @@ const buttonVariants = cva(
                 destructive:
                     "bg-destructive text-destructive-foreground hover:bg-destructive/90",
                 outline:
-                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                    "border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground",
                 secondary:
                     "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                 ghost: "hover:bg-accent hover:text-accent-foreground",