feat: add landing page

README.md

@@ -28,7 +28,7 @@ The architecture of this project revolves around a streamlined development and d
 
 - [x] Deploy the application to Vercel
 - [x] Add app configuration
-- [ ] Setup home page
+- [x] Add landing page
 - [ ] Add auth
       and more
 

docker-compose.yml

@@ -9,7 +9,6 @@ services:
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/byte
     volumes:
       - .:/app
-      - /app/node_modules
     depends_on:
       - db
 

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@loglib/tracker": "^0.8.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@t3-oss/env-nextjs": "^0.10.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -28,6 +29,7 @@
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-wrap-balancer": "^1.1.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.6"

src/app/(landing)/layout.tsx

@@ -0,0 +1,7 @@
+export default function LandingLayout({ children }: React.PropsWithChildren) {
+  return (
+    <div className="relative flex min-h-screen flex-col">
+      <main className="flex-1">{children}</main>
+    </div>
+  )
+}

src/app/(landing)/page.tsx

@@ -0,0 +1,66 @@
+import type { Viewport } from "next"
+import Link from "next/link"
+import Balancer from "react-wrap-balancer"
+
+import { siteConfig } from "@/config/site"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "@/components/ui/badge"
+import { buttonVariants } from "@/components/ui/button"
+
+export const viewport: Viewport = {
+  colorScheme: "dark",
+}
+
+export default function HomePage() {
+  return (
+    <section className="container flex min-h-screen w-full flex-col items-center justify-center space-y-4 text-center">
+      <div className="absolute inset-0 -z-10 bg-dot"></div>
+
+      <Link
+        href={siteConfig.githubLink}
+        className={cn(
+          badgeVariants({
+            variant: "outline",
+          }),
+          "animate-fade-up text-zinc-300 transition-colors duration-150 hover:text-white"
+        )}
+        target="_blank"
+        rel="noreferrer"
+        style={{ animationDelay: "0.10s", animationFillMode: "both" }}
+      >
+        Star on Github
+        <span className="ml-1 text-zinc-400 transition-transform duration-150 ease-in-out">
+          -&gt;
+        </span>
+      </Link>
+
+      <h1
+        className="max-w-3xl animate-fade-up bg-gradient-to-b from-neutral-200 via-zinc-200 to-neutral-500 bg-clip-text font-heading text-4xl font-semibold tracking-tight text-transparent md:text-6xl lg:text-8xl"
+        style={{ animationDelay: "0.20s", animationFillMode: "both" }}
+      >
+        <Balancer>One Platform for Virtual Learning</Balancer>
+      </h1>
+
+      <p
+        className="max-w-lg animate-fade-up text-base text-zinc-400 sm:pb-2 sm:text-lg"
+        style={{ animationDelay: "0.30s", animationFillMode: "both" }}
+      >
+        Plan, organize, and manage virtual workshop sessions
+      </p>
+
+      <Link
+        href="/app/dashboard"
+        className={cn(
+          buttonVariants(),
+          "animate-fade-up bg-gradient-to-r from-neutral-200 via-zinc-100 to-neutral-200 text-zinc-900"
+        )}
+        style={{ animationDelay: "0.40s", animationFillMode: "both" }}
+      >
+        Get Started
+        <span className="ml-1 text-zinc-400 transition-transform duration-150 ease-in-out">
+          -&gt;
+        </span>
+      </Link>
+    </section>
+  )
+}

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border 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",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/config/site.ts

@@ -2,5 +2,5 @@ export const siteConfig = {
   title: "Byte",
   description: "A platform for developers to plan and manage virtual workshops",
   url: "https://byte.raphico.tech",
-  github: "https://github.com/raphico/byte",
+  githubLink: "https://github.com/raphico/byte",
 }

tailwind.config.ts

@@ -60,6 +60,23 @@ const config = {
         sm: "calc(var(--radius) - 4px)",
       },
       keyframes: {
+        /**
+         * Original source:
+         * @see https://github.com/juliusmarminge/acme-corp/blob/main/tooling/tailwind/index.ts
+         */
+        "fade-up": {
+          "0%": {
+            opacity: "0",
+            transform: "translateY(10px)",
+          },
+          "75%": {
+            opacity: "0.6",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateY(0)",
+          },
+        },
         "accordion-down": {
           from: { height: "0" },
           to: { height: "var(--radix-accordion-content-height)" },
@@ -72,11 +89,15 @@ const config = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-up": "fade-up 0.5s",
       },
       fontFamily: {
         sans: ["var(--font-geist-sans)", ...fontFamily.sans],
         heading: ["var(--font-heading)", ...fontFamily.sans],
       },
+      backgroundImage: {
+        dot: "url('/images/dot.svg')",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],