From 0c6f59c28df810e1011777e00261a417c52dd4e0 Mon Sep 17 00:00:00 2001
From: Christopher Arraya <arrayacj@gmail.com>
Date: Mon, 18 Sep 2023 21:26:42 -0400
Subject: [PATCH] feat: design landing page
---
app/grid-gradient.svg | 19 +++++++++++
app/layout.tsx | 21 +++++++++++-
app/page.tsx | 78 +++++++++++++++++++++++++++++++++++++++++--
3 files changed, 115 insertions(+), 3 deletions(-)
create mode 100644 app/grid-gradient.svg
diff --git a/app/grid-gradient.svg b/app/grid-gradient.svg
new file mode 100644
index 0000000..5a7defa
--- /dev/null
+++ b/app/grid-gradient.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" ?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1921" height="1080">
+ <defs>
+ <pattern id="gridPattern" width="60" height="60" patternUnits="userSpaceOnUse">
+ <path d="M 60 0 L 0 0 0 60" fill="none" stroke="#E2E8F0" strokeWidth="1"/>
+ <path d="M 0 0 L 0 60" fill="none" stroke="#E2E8F0" strokeWidth="1"/>
+ </pattern>
+ <linearGradient id="squareGradient" x1="50%" y1="0%" x2="50%" y2="100%">
+ <stop offset="0%" style="stop-color:white; stop-opacity:0"/>
+ <stop offset="40%" style="stop-color:white; stop-opacity:1"/>
+ <stop offset="60%" style="stop-color:white; stop-opacity:1"/>
+ <stop offset="100%" style="stop-color:white; stop-opacity:0"/>
+ </linearGradient>
+ <mask id="squareFadeMask">
+ <rect width="1921" height="1080" fill="url(#squareGradient)"/>
+ </mask>
+ </defs>
+ <rect width="1921" height="1080" fill="url(#gridPattern)" mask="url(#squareFadeMask)"/>
+</svg>
diff --git a/app/layout.tsx b/app/layout.tsx
index 523dcce..87a7737 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -14,7 +14,26 @@ export default function RootLayout({
return (
<html lang="en">
<body>
- <main className="min-h-screen flex flex-col">{children}</main>
+ <main className="min-h-screen flex flex-col">
+ <div className="fixed bottom-0 left-0 m-8 p-3 text-xs font-mono text-white h-6 w-6 rounded-full flex items-center justify-center bg-gray-700 sm:bg-pink-500 md:bg-orange-500 lg:bg-green-500 xl:bg-blue-500">
+ <div className="block sm:hidden md:hidden lg:hidden xl:hidden">
+ al
+ </div>
+ <div className="hidden sm:block md:hidden lg:hidden xl:hidden">
+ sm
+ </div>
+ <div className="hidden sm:hidden md:block lg:hidden xl:hidden">
+ md
+ </div>
+ <div className="hidden sm:hidden md:hidden lg:block xl:hidden">
+ lg
+ </div>
+ <div className="hidden sm:hidden md:hidden lg:hidden xl:block">
+ xl
+ </div>
+ </div>
+ {children}
+ </main>
</body>
</html>
);
diff --git a/app/page.tsx b/app/page.tsx
index 68c17e0..872e925 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,83 @@
+import Link from "next/link";
+import { buttonVariants, Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
export const dynamic = "force-dynamic";
export default async function Index() {
return (
- <div className="w-full flex flex-col items-center">
- <h1>Hello, World!</h1>
+ <div className="flex flex-col w-screen justify-center items-center">
+ {/* Hero */}
+ <div className="w-full h-screen flex flex-col items-center">
+ {/* Navbar */}
+ <nav className="w-full h-16 flex justify-center">
+ {/* Contain Navbar */}
+ <div className="w-full flex justify-between items-center p-4 md:w-4/5 lg:w-3/5">
+ {/* Logo */}
+ <div className="flex flex-row justify-center items-center space-x-2">
+ <svg
+ fill="#7C3AED"
+ width="32px"
+ height="32px"
+ viewBox="0 0 15 15"
+ version="1.1"
+ id="circle"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z" />
+ </svg>
+ <h1 className="text-lg font-extrabold text-secondary-foreground">
+ SKALARA
+ </h1>
+ </div>
+ {/* Links */}
+ <div className="flex flex-row justify-center items-center space-x-4">
+ <Link
+ href="/dashboard"
+ className={cn(
+ buttonVariants({ variant: "default" }),
+ "bg-gradient-to-r from-[hsl(262.1,83.3%,57.8%)] to-[hsl(262.1,83.3%,67.8%)]"
+ )}
+ >
+ Dashboard
+ </Link>
+ <Link
+ href="/login"
+ className={cn(
+ buttonVariants({ variant: "default" }),
+ "bg-gradient-to-r from-[hsl(262.1,83.3%,57.8%)] to-[hsl(262.1,83.3%,67.8%)]"
+ )}
+ >
+ Login
+ </Link>
+ </div>
+ </div>
+ </nav>
+ {/* Hero Content */}
+ <div className="w-full h-full flex flex-col justify-center items-center bg-[url('grid-gradient.svg')] bg-cover">
+ <div className="flex flex-col justify-center items-center space-y-6 text-center p-2">
+ <h1 className="text-4xl font-bold sm:text-5xl lg:text-6xl xl:text-7xl">
+ Simple. Intelligent. Automated.
+ </h1>
+ <p className="text-lg tracking-wide sm:text-xl lg:text-2xl">
+ AI-powered project management for tech teams and indie developers.
+ </p>
+ </div>
+ <div className="flex flex-col space-y-4 w-full p-4 sm:flex-row sm:space-y-0 sm:space-x-4 sm:w-5/6 md:w-3/5 lg:w-1/2 xl:w-[720px]">
+ <Input
+ className="bg-secondary shadow-inner sm:w-2/3"
+ placeholder="example@company.com"
+ />
+ <Button
+ variant="default"
+ className="bg-gradient-to-r from-[hsl(262.1,83.3%,57.8%)] to-[hsl(262.1,83.3%,67.8%)] shadow-lg shadow-primary/30 sm:w-1/3"
+ >
+ Join Waitlist
+ </Button>
+ </div>
+ </div>
+ </div>
</div>
);
}