diff options
Diffstat (limited to 'apps/web/src')
| -rw-r--r-- | apps/web/src/app/globals.css | 2 | ||||
| -rw-r--r-- | apps/web/src/app/page.tsx | 8 | ||||
| -rw-r--r-- | apps/web/src/components/header.tsx | 11 | ||||
| -rw-r--r-- | apps/web/src/components/landing/hero.tsx | 27 |
4 files changed, 36 insertions, 12 deletions
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 2169dbbc..1c8a7887 100644 --- a/apps/web/src/app/globals.css +++ b/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%; diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index dcedab32..e9957e1b 100644 --- a/apps/web/src/app/page.tsx +++ b/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>
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx index 27503cd0..d99a4fc5 100644 --- a/apps/web/src/components/header.tsx +++ b/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}
+ />
+ );
}
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx index 7b4588c8..fadc043a 100644 --- a/apps/web/src/components/landing/hero.tsx +++ b/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
|