update: landing-page

apps/web/src/app/globals.css

@@ -39,7 +39,7 @@
     --sidebar-ring: 0 0% 3.9%;
   }
   .dark {
-    --background: 0 0% 8%;
+    --background: 0 0% 6%;
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;

apps/web/src/app/page.tsx

@@ -1,6 +1,7 @@
 import { Hero } from "@/components/landing/hero";
 import { Header } from "@/components/header";
 import { getWaitlistCount } from "@/lib/waitlist";
+import Image from "next/image";
 
 // Force dynamic rendering so waitlist count updates in real-time
 export const dynamic = "force-dynamic";
@@ -10,6 +11,13 @@ export default async function Home() {
 
   return (
     <div>
+      <Image
+        className="fixed top-0 left-0 -z-50 size-full object-cover"
+        src="/landing-page-bg.png"
+        height={1903.5}
+        width={1269}
+        alt="landing-page.bg"
+      />
       <Header />
       <Hero signupCount={signupCount} />
     </div>

apps/web/src/components/header.tsx

@@ -29,8 +29,7 @@ export function Header() {
 
   const leftContent = (
     <Link href="/" className="flex items-center gap-3">
-      <Image src="/logo.png" alt="OpenCut Logo" width={24} height={24} />
-      <span className="font-medium tracking-tight">OpenCut</span>
+      <Image src="/logo.svg" alt="OpenCut Logo" width={142} height={32} />
     </Link>
   );
 
@@ -59,5 +58,11 @@ export function Header() {
     </nav>
   );
 
-  return <HeaderBase leftContent={leftContent} rightContent={rightContent} />;
+  return (
+    <HeaderBase
+      className="bg-[#1D1D1D] border border-white/10 rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
+      leftContent={leftContent}
+      rightContent={rightContent}
+    />
+  );
 }

apps/web/src/components/landing/hero.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useToast } from "@/hooks/use-toast";
 import { getStars } from "@/lib/fetchGhStars";
+import Image from "next/image";
 
 interface HeroProps {
   signupCount: number;
@@ -82,7 +83,7 @@ export function Hero({ signupCount }: HeroProps) {
   };
 
   return (
-    <div className="min-h-[calc(100vh-4rem)] flex flex-col justify-between items-center text-center px-4">
+    <div className="min-h-[calc(100vh-6rem)] flex flex-col justify-between items-center text-center px-4">
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -93,14 +94,24 @@ export function Hero({ signupCount }: HeroProps) {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.2, duration: 0.8 }}
-          className="inline-block"
+          className="inline-block font-bold tracking-tighter text-4xl md:text-[4rem]"
         >
-          <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter">
-            The open source
-          </h1>
-          <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter mt-2">
-            video editor
-          </h1>
+          <h1>The First Open Source</h1>
+          <div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
+            <span className="md:pl-24 ">Online</span>
+            <div className="relative -rotate-[3.76deg] max-w-[250px] md:max-w-[454px]">
+              <Image
+                className="mt-2.5 md:mt-0"
+                src="/frame.svg"
+                height={79}
+                width={459}
+                alt="frame"
+              />
+              <span className="absolute inset-0 flex items-center justify-center ">
+                Video Editor
+              </span>
+            </div>
+          </div>
         </motion.div>
 
         <motion.p