feat(www): Added Updated New Hero section

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

Hide file tree

Showing 21 changed files with 204 additions and 407 deletions.
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -24,6 +24,7 @@
         "@vercel/analytics": "^1.2.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "geist": "^1.3.0",
         "lucide-react": "^0.343.0",
         "next": "^14.1.0",
         "next-themes": "^0.2.1",

diff --git a/apps/www/src/app/(app)/(marketing)/page.tsx b/apps/www/src/app/(app)/(marketing)/page.tsx
diff --git a/apps/www/src/app/(app)/_components/saas-startkit-highlight.tsx b/apps/www/src/app/(app)/_components/saas-startkit-highlight.tsx
diff --git a/apps/www/src/app/(marketing)/page.tsx b/apps/www/src/app/(marketing)/page.tsx
@@ -1,9 +1,10 @@
 import { MarketingLayout } from "@/components/layout/marketing-layout";
+import { Hero } from "@/components/marketing/hero";
 
 export default function HomePage() {
     return (
         <MarketingLayout>
-            <h1>Marketing Page</h1>
+            <Hero />
         </MarketingLayout>
     );
 }

diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx
@@ -5,7 +5,7 @@ import "@/styles/globals.css";
 import type { Metadata } from "next";
 import { siteConfig } from "@/config/site";
 import { Analytics } from "@vercel/analytics/react";
-import { fontSans, fontHeading } from "@/lib/fonts";
+import { fontSans } from "@/lib/fonts";
 
 const TITLE =
     "Rapidlaunch | Open Source Nextjs SaaS Starterkits and Components";
@@ -49,9 +49,7 @@ export default function RootLayout({
 }) {
     return (
         <html lang="en">
-            <body
-                className={`${fontSans.variable} ${fontHeading.variable} font-sans`}
-            >
+            <body className={`${fontSans.className} font-sans antialiased`}>
                 <Providers>
                     {children}
                     <Toaster position="top-center" />

diff --git a/apps/www/src/components/background.tsx b/apps/www/src/components/background.tsx
@@ -5,42 +5,29 @@ interface BackgroundProps {
 export function Background({ children }: BackgroundProps) {
     return (
         <>
-            <div className="absolute left-0 top-0 -z-50 h-full w-full overflow-hidden">
-                <div className="sticky left-0 top-0 h-full w-full overflow-hidden">
-                    <div className="absolute inset-0 z-[-1] bg-muted-foreground/40" />
-                    <div className="absolute left-[--x] top-[--y] z-[-1] h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-radial from-muted-foreground/50 from-0% to-transparent to-90% blur-md" />
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="100%"
-                        height="100%"
+            <svg
+                className="absolute inset-0 -z-10 h-full w-full stroke-muted-foreground/15 [mask-image:radial-gradient(50%_80%_at_top,white,transparent)]"
+                aria-hidden="true"
+            >
+                <defs>
+                    <pattern
+                        id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
+                        width={200}
+                        height={200}
+                        x="50%"
+                        y={-1}
+                        patternUnits="userSpaceOnUse"
                     >
-                        <defs>
-                            <pattern
-                                id="dotted-pattern"
-                                width="16"
-                                height="16"
-                                patternUnits="userSpaceOnUse"
-                            >
-                                <circle cx="2" cy="2" r="1" fill="black" />
-                            </pattern>
-                            <mask id="dots-mask">
-                                <rect width="100%" height="100%" fill="white" />
-                                <rect
-                                    width="100%"
-                                    height="100%"
-                                    fill="url(#dotted-pattern)"
-                                />
-                            </mask>
-                        </defs>
-                        <rect
-                            width="100%"
-                            height="100%"
-                            fill="hsl(var(--background))"
-                            mask="url(#dots-mask)"
-                        />
-                    </svg>
-                </div>
-            </div>
+                        <path d="M.5 200V.5H200" fill="none" />
+                    </pattern>
+                </defs>
+                <rect
+                    width="100%"
+                    height="100%"
+                    strokeWidth={0}
+                    fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
+                />
+            </svg>
 
             {children}
         </>

diff --git a/apps/www/src/components/icons.tsx b/apps/www/src/components/icons.tsx
@@ -221,4 +221,28 @@ export const Icons = {
             />
         </svg>
     ),
+    externalLink: (props: IconProps) => (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            color={"currentColor"}
+            fill={"none"}
+            {...props}
+        >
+            <path
+                d="M11.1005 3.00208C7.45162 3.00864 5.54086 3.09822 4.31974 4.31931C3.00195 5.63706 3.00195 7.75796 3.00195 11.9997C3.00195 16.2415 3.00195 18.3624 4.31974 19.6801C5.63753 20.9979 7.75849 20.9979 12.0004 20.9979C16.2423 20.9979 18.3632 20.9979 19.6811 19.6801C20.9021 18.4591 20.9917 16.5484 20.9983 12.8996"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M20.4809 3.51715L14.9316 9.05114M20.4809 3.51715C19.9869 3.02264 16.6593 3.06873 15.9558 3.07874M20.4809 3.51715C20.9748 4.01166 20.9288 7.34292 20.9188 8.04718"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    ),
 };
diff --git a/apps/www/src/components/layout/marketing-nav.tsx b/apps/www/src/components/layout/marketing-nav.tsx
@@ -54,23 +54,23 @@ export function MarketingMainNav() {
 
                                 <span
                                     className={cn(
-                                        "flex h-5 w-5 items-center justify-center rounded-sm border-2 border-border",
+                                        "flex h-5 w-5 items-center justify-center rounded-sm border border-border",
                                         pathname === item.href
                                             ? "bg-secondary"
                                             : "",
                                     )}
                                 >
                                     <Icons.circle
                                         className={cn(
-                                            "h-2.5 w-2.5 transition-all",
+                                            "h-2 w-2",
                                             pathname === item.href
                                                 ? "block"
                                                 : "hidden",
                                         )}
                                     />
                                     <Icons.chevronRight
                                         className={cn(
-                                            "h-2.5 w-2.5 transition-all",
+                                            "h-2.5 w-2.5",
                                             pathname === item.href
                                                 ? "hidden"
                                                 : "block",