mirror of
https://github.com/SkalaraAI/skalara.git
synced 2025-04-09 15:10:16 -04:00
feat: design landing page
This commit is contained in:
Christopher Arraya
parent
f98072c7cf
commit
0c6f59c28d
19
app/grid-gradient.svg
Normal file
19
app/grid-gradient.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 946 B |
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
78
app/page.tsx
78
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user