feat: add home page

Signed-off-by: rajput-hemant <[email protected]>

app/(auth)/login/page.tsx

@@ -0,0 +1,7 @@
+export default function LoginPage() {
+  return (
+    <div>
+      <h1>Login Page</h1>
+    </div>
+  );
+}

app/(auth)/signup/page.tsx

@@ -0,0 +1,7 @@
+export default function SignupPage() {
+  return (
+    <div>
+      <h1>Signup Page</h1>
+    </div>
+  );
+}

app/(lobby)/components/clients.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+
+import { CLIENTS } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+
+export function Clients() {
+  return (
+    <section id="clients" className="space-y-6">
+      <div className="mx-auto flex max-w-3xl flex-col items-center space-y-4 text-center">
+        <h2 className="font-heading text-3xl drop-shadow-xl dark:bg-gradient-to-br dark:from-foreground dark:to-gray-500 dark:bg-clip-text dark:text-transparent sm:text-3xl md:text-6xl">
+          Our Valued Clients
+        </h2>
+
+        <p className="max-w-[85%] text-muted-foreground sm:text-lg">
+          Discover the companies we&apos;ve had the pleasure to work with
+        </p>
+      </div>
+
+      <div
+        className={cn(
+          "relative flex h-24 items-center overflow-hidden whitespace-nowrap",
+          "before:absolute before:left-0 before:top-0 before:z-10 before:h-full before:w-40 before:bg-gradient-to-r before:from-background md:before:w-96",
+          "after:absolute after:right-0 after:top-0 after:z-10 after:h-full after:w-40 after:bg-gradient-to-l after:from-background md:after:w-96"
+        )}
+      >
+        {[...Array(2)].map((_, i) => (
+          <div
+            key={i}
+            className="flex animate-[15s_slide_linear_infinite] flex-nowrap"
+          >
+            {CLIENTS.map(({ alt, logo }) => (
+              <div
+                key={alt}
+                className="m-5 flex w-24 shrink-0 items-center md:m-14"
+              >
+                <Image
+                  src={logo}
+                  alt={alt}
+                  width={200}
+                  className="max-w-none object-contain grayscale"
+                />
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

app/(lobby)/components/features.tsx

@@ -0,0 +1,22 @@
+export function Features() {
+  return (
+    <section id="features" className="container space-y-6">
+      <div className="mx-auto flex max-w-3xl flex-col items-center space-y-4 text-center">
+        <h2 className="font-heading text-3xl drop-shadow-xl dark:bg-gradient-to-br dark:from-foreground dark:to-gray-500 dark:bg-clip-text dark:text-transparent sm:text-3xl md:text-6xl">
+          Keep track of your meetings all in one place
+        </h2>
+
+        <p className="max-w-[85%] text-muted-foreground sm:text-lg">
+          Capture your ideas, thoughts, and meeting notes in a structured and
+          organized manner.
+        </p>
+      </div>
+
+      <div className="relative mx-auto h-[24rem] rounded-md border-2 border-dashed md:w-[44rem]">
+        <div className="absolute inset-2 flex items-center justify-center rounded-md bg-muted text-center font-handwriting text-2xl md:text-4xl">
+          A Planner goes here!
+        </div>
+      </div>
+    </section>
+  );
+}

app/(lobby)/components/hero.tsx

@@ -0,0 +1,85 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+
+export function Hero() {
+  return (
+    <section
+      id="hero"
+      className="flex w-full flex-col items-center justify-center gap-4 text-center"
+    >
+      <header className="mt-10 flex flex-col items-center gap-4">
+        <Badge className="shadow">✨ Your Workspace, Perfected</Badge>
+
+        <h1 className="mt-4 font-heading text-4xl font-bold [text-shadow:_0_4px_0_#e1e1e1] dark:bg-gradient-to-br dark:from-foreground dark:to-gray-500 dark:bg-clip-text dark:text-transparent dark:[text-shadow:none] md:text-7xl">
+          All-In-One Collaboration and Productivity Platform
+        </h1>
+
+        <h2 className="max-w-xl text-lg text-muted-foreground">
+          A Note Taking app built using{" "}
+          <ExternalLink href="https://nextjs.org/">
+            Next.js (App Router)
+          </ExternalLink>
+          ,{" "}
+          <ExternalLink href="https://www.typescriptlang.org/">
+            Typescipt
+          </ExternalLink>
+          ,{" "}
+          <ExternalLink href="https://tailwindcss.com/">
+            Tailwind CSS
+          </ExternalLink>
+          , <ExternalLink href="https://ui.shadcn.com/">shadcn/ui</ExternalLink>
+          ,{" "}
+          <ExternalLink href="https://orm.drizzle.team/">
+            Drizzle ORM
+          </ExternalLink>{" "}
+          & more!
+        </h2>
+      </header>
+
+      <div className="flex items-center gap-2 py-2">
+        <Link
+          href="/login"
+          className={cn(buttonVariants({ size: "lg" }), "shadow-lg")}
+        >
+          Get Started
+        </Link>
+
+        <a
+          href={siteConfig.links.github}
+          className={buttonVariants({ size: "lg", variant: "outline" })}
+        >
+          Github
+        </a>
+      </div>
+
+      <Image
+        src="/illustrations/home-office.svg"
+        alt="Home Office"
+        width={500}
+        height={500}
+        className="drop-shadow-xl dark:invert"
+      />
+    </section>
+  );
+}
+
+type ExternalLinkProps = {
+  href: string;
+  children: React.ReactNode;
+};
+
+const ExternalLink = ({ href, children }: ExternalLinkProps) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="font-medium underline-offset-4 transition-colors hover:text-foreground hover:underline"
+  >
+    {children}
+  </a>
+);

app/(lobby)/components/lobby-navbar.tsx

@@ -0,0 +1,57 @@
+import Link from "next/link";
+
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export function LobbyNavbar() {
+  return (
+    <header className="mt-3 h-14">
+      <nav className="container flex h-full items-center justify-between">
+        <Link
+          href="/"
+          className="px-4 font-handwriting text-xl font-bold lowercase"
+        >
+          {siteConfig.name}
+        </Link>
+
+        <div className="hidden space-x-4 px-10 text-sm font-medium text-muted-foreground md:inline-block">
+          <Link
+            href="#features"
+            className="transition-colors hover:text-foreground"
+          >
+            Features
+          </Link>
+          <Link
+            href="/pricing"
+            className="transition-colors hover:text-foreground"
+          >
+            Pricing
+          </Link>
+        </div>
+
+        <div className="flex flex-1 justify-end gap-2">
+          <Link
+            href="/login"
+            className={cn(
+              buttonVariants({ variant: "ghost" }),
+              "hidden h-8 rounded-full px-5 font-semibold sm:inline-flex"
+            )}
+          >
+            Login
+          </Link>
+
+          <Link
+            href="/signup"
+            className={cn(
+              buttonVariants(),
+              "h-8 rounded-full px-3 font-semibold shadow-xl"
+            )}
+          >
+            Sign Up
+          </Link>
+        </div>
+      </nav>
+    </header>
+  );
+}

app/(lobby)/components/open-source.tsx

@@ -0,0 +1,61 @@
+import Image from "next/image";
+
+import { siteConfig } from "@/config/site";
+import { getGitHubStars } from "@/lib/utils";
+import { GitHub } from "@/components/icons";
+
+export async function OpenSource() {
+  const stars = await getGitHubStars();
+
+  return (
+    <section id="open-source">
+      <div className="flex flex-col items-center justify-center gap-4 rounded-3xl bg-muted py-8 text-center md:py-12 xl:py-16">
+        <h2 className="font-heading text-3xl drop-shadow-xl dark:bg-gradient-to-br dark:from-foreground dark:to-gray-500 dark:bg-clip-text dark:text-transparent sm:text-3xl md:text-6xl">
+          Proudly Open Source
+        </h2>
+
+        <p className="max-w-[85%] text-muted-foreground sm:text-lg">
+          {siteConfig.name} is open source and powered by open source software.{" "}
+          <br /> The code is available on{" "}
+          <a
+            href={siteConfig.links.github}
+            target="_blank"
+            rel="noreferrer"
+            className="underline underline-offset-4 duration-200 hover:text-foreground"
+          >
+            GitHub
+          </a>
+          .
+        </p>
+
+        {stars && (
+          <a
+            href={siteConfig.links.github}
+            target="_blank"
+            rel="noreferrer"
+            className="flex"
+          >
+            <div className="flex h-10 w-10 items-center justify-center rounded-md bg-foreground shadow-md hover:shadow-lg">
+              <GitHub className="h-6 w-6 text-background" />
+            </div>
+
+            <div className="flex items-center">
+              <div className="h-4 w-4 border-y-8 border-r-8 border-foreground border-y-transparent" />
+              <div className="flex h-10 items-center rounded-md border border-foreground bg-foreground px-4 font-medium text-background shadow-md hover:shadow-lg">
+                {stars} stars on GitHub
+              </div>
+            </div>
+          </a>
+        )}
+      </div>
+
+      <Image
+        src="/illustrations/work-party.svg"
+        alt="Work Party"
+        width={500}
+        height={500}
+        className="ml-auto drop-shadow-xl dark:invert"
+      />
+    </section>
+  );
+}

app/(lobby)/components/tech-stack.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import type { IconProps } from "@/components/icons";
+import {
+  Auth,
+  Nextjs,
+  Reactjs,
+  Stripe,
+  Supabase,
+  Tailwind,
+} from "@/components/icons";
+
+type Tech = {
+  title: string;
+  description: string;
+  icon: React.FC<IconProps>;
+};
+
+const techs: Tech[] = [
+  {
+    title: "Next.js",
+    description: "App dir, Routing, Layouts, Loading UI and API routes.",
+    icon: Nextjs,
+  },
+  {
+    title: "React 18",
+    description: "Server and Client Components. Use hook.",
+    icon: Reactjs,
+  },
+  {
+    title: "Database",
+    description: "ORM using Drizzle and deployed on Subabase.",
+    icon: Supabase,
+  },
+  {
+    title: "Components",
+    description:
+      "UI components built using shadcn/ui and styled with Tailwind CSS.",
+    icon: Tailwind,
+  },
+  {
+    title: "Authentication",
+    description: "Authentication using NextAuth.js and middlewares.",
+    icon: Auth,
+  },
+  {
+    title: "Subscriptions",
+    description: "Free and paid subscriptions using Stripe.",
+    icon: Stripe,
+  },
+];
+
+export function TechStack() {
+  return (
+    <section
+      id="tech-stack"
+      className="container space-y-6 rounded-3xl bg-muted py-8 md:py-12 lg:py-24"
+    >
+      <div className="mx-auto flex max-w-3xl flex-col items-center space-y-4 text-center">
+        <h2 className="font-heading text-3xl drop-shadow-xl dark:bg-gradient-to-br dark:from-foreground dark:to-gray-500 dark:bg-clip-text dark:text-transparent sm:text-3xl md:text-6xl">
+          Tech Stack
+        </h2>
+
+        <p className="max-w-[85%] text-muted-foreground sm:text-lg">
+          This project is an experiment to see how a modern app, with features
+          like auth, subscriptions, API routes, and static pages would work in
+          Next.js app dir.
+        </p>
+      </div>
+
+      <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-5xl md:grid-cols-3">
+        {techs.map(({ title, description, icon: Icon }, i) => (
+          <div
+            key={i}
+            className="relative overflow-hidden rounded-lg border bg-background p-2"
+          >
+            <div className="flex h-44 flex-col justify-between rounded-md p-6">
+              <Icon size={48} />
+
+              <div className="space-y-2">
+                <h3 className="font-bold">{title}</h3>
+                <p className="text-sm text-muted-foreground">{description} </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}