Merge branch 'main' of https://github.com/mazeincoding/AppCut

7 files changed, 104 insertions, 47 deletions

diff --git a/apps/web/src/app/favicon.ico b/apps/web/src/app/favicon.ico
deleted file mode 100644
index cb20127b..00000000
--- a/apps/web/src/app/favicon.ico
+++ /dev/null
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/layout.tsx b/apps/web/src/app/layout.tsx
index 5d33100d..ee045647 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { Analytics } from "@vercel/analytics/react";
@@ -6,46 +5,14 @@ import Script from "next/script";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { baseMetaData } from "./metadata";
 
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
 });
 
-export const metadata: Metadata = {
-  title: "OpenCut",
-  description:
-    "A simple but powerful video editor that gets the job done. In your browser.",
-  openGraph: {
-    title: "OpenCut",
-    description:
-      "A simple but powerful video editor that gets the job done. In your browser.",
-    url: "https://opencut.app",
-    siteName: "OpenCut",
-    locale: "en_US",
-    type: "website",
-    images: [
-      {
-        url: "https://opencut.app/opengraph-image.jpg",
-        width: 1200,
-        height: 630,
-        alt: "OpenCut",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "OpenCut",
-    description:
-      "A simple but powerful video editor that gets the job done. In your browser.",
-    creator: "@opencutapp",
-    images: ["/opengraph-image.jpg"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+export const metadata = baseMetaData;
 
 export default function RootLayout({
   children,
diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts
new file mode 100644
index 00000000..4e387014
--- /dev/null
+++ b/apps/web/src/app/metadata.ts
@@ -0,0 +1,66 @@
+import { Metadata } from "next";
+
+const title = "OpenCut";
+const description = "A simple but powerful video editor that gets the job done. In your browser.";
+const openGraphImageUrl = "https://opencut.app/opengraph-image.jpg";
+const twitterImageUrl = "/opengraph-image.jpg";
+
+export const baseMetaData: Metadata = {
+    title: title,
+    description: description,
+    openGraph: {
+        title: title,
+        description: description,
+        url: "https://opencut.app",
+        siteName: "OpenCut",
+        locale: "en_US",
+        type: "website",
+        images: [
+            {
+                url: openGraphImageUrl,
+                width: 1200,
+                height: 630,
+                alt: "OpenCut",
+            },
+        ],
+    },
+    twitter: {
+        card: "summary_large_image",
+        title: title,
+        description: description,
+        creator: "@opencutapp",
+        images: [twitterImageUrl],
+    },
+    robots: {
+        index: true,
+        follow: true,
+    },
+    icons: {
+        icon: [
+            { url: "/favicon.ico" },
+            { url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+            { url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+            { url: "/icons/favicon-96x96.png", sizes: "96x96", type: "image/png" },
+        ],
+        apple: [
+            { url: "/icons/apple-icon-57x57.png", sizes: "57x57", type: "image/png" },
+            { url: "/icons/apple-icon-60x60.png", sizes: "60x60", type: "image/png" },
+            { url: "/icons/apple-icon-72x72.png", sizes: "72x72", type: "image/png" },
+            { url: "/icons/apple-icon-76x76.png", sizes: "76x76", type: "image/png" },
+            { url: "/icons/apple-icon-114x114.png", sizes: "114x114", type: "image/png" },
+            { url: "/icons/apple-icon-120x120.png", sizes: "120x120", type: "image/png" },
+            { url: "/icons/apple-icon-144x144.png", sizes: "144x144", type: "image/png" },
+            { url: "/icons/apple-icon-152x152.png", sizes: "152x152", type: "image/png" },
+            { url: "/icons/apple-icon-180x180.png", sizes: "180x180", type: "image/png" },
+        ],
+        shortcut: ["/favicon.ico"]
+    },
+    appleWebApp: {
+        capable: true,
+        title: title,
+    },
+    manifest: "/manifest.json",
+    other: {
+        "msapplication-config": "/browserconfig.xml"
+    }
+};
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 7366dd31..74ba9359 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