update: landing-page

2 files changed, 27 insertions, 11 deletions

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