🚀 worxpace 1 - Create landing page

apps/worxpace/src/app/(marketing)/_components/footer.tsx

@@ -0,0 +1,32 @@
+import { Button } from "@acme/ui/components";
+import { cn } from "@acme/ui/lib";
+
+import { theme } from "~/constants/theme";
+import Logo from "./logo";
+
+export default function Footer() {
+  return (
+    <div
+      className={cn(
+        theme.flex.center,
+        theme.background.navbar,
+        "z-50 w-full p-6",
+      )}
+    >
+      <Logo />
+      <div
+        className={cn(
+          theme.flex.gap2,
+          "w-full justify-between text-muted-foreground md:ml-auto md:justify-end",
+        )}
+      >
+        <Button variant="ghost" size="sm">
+          Privacy Policy
+        </Button>
+        <Button variant="ghost" size="sm">
+          Terms & Conditions
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/worxpace/src/app/(marketing)/_components/heading.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@acme/ui/components";
+
+import { theme } from "~/constants/theme";
+
+const Heading = () => {
+  return (
+    <div className="max-w-3xl space-y-4">
+      <h1 className="text-3xl font-bold sm:text-5xl md:text-6xl">
+        Your Ideas , Documents, & Plans. Unified. Welcome to{" "}
+        <span className="underline">Steeeee WorXpace</span>
+      </h1>
+      <h3 className="text-base font-medium sm:text-xl md:text-2xl">
+        Steeeee WorXpace is the connected workspace where <br />
+        better, faster work happens.
+      </h3>
+
+      <Button>
+        Get Started <ArrowRight className={`${theme.size.icon} ml-2`} />
+      </Button>
+    </div>
+  );
+};
+
+export default Heading;

apps/worxpace/src/app/(marketing)/_components/heroes.tsx

@@ -0,0 +1,42 @@
+import Image from "next/image";
+
+import { cn } from "@acme/ui/lib";
+
+import { theme } from "~/constants/theme";
+
+export default function Heroes() {
+  return (
+    <div className={cn(theme.flex.center, "max-w-5xl flex-col justify-center")}>
+      <div className={theme.flex.center}>
+        <div className="relative h-[300px] w-[300px] sm:h-[350px] sm:w-[350px] md:h-[400px] md:w-[400px] ">
+          <Image
+            src="/documents.png"
+            fill
+            className="object-contain dark:hidden"
+            alt="Documents"
+          />
+          <Image
+            src="/documents-dark.png"
+            fill
+            className="hidden object-contain dark:block"
+            alt="Documents"
+          />
+        </div>
+        <div className="relative hidden h-[400px] w-[400px] md:block">
+          <Image
+            src="/reading.png"
+            fill
+            className="object-contain dark:hidden"
+            alt="Reading"
+          />
+          <Image
+            src="/reading-dark.png"
+            fill
+            className="hidden object-contain dark:block"
+            alt="Reading"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/worxpace/src/app/(marketing)/_components/index.ts

@@ -0,0 +1,4 @@
+export { default as Heading } from "./heading";
+export { default as Heroes } from "./heroes";
+export { default as Footer } from "./footer";
+export { default as Navbar } from "./navbar";

apps/worxpace/src/app/(marketing)/_components/logo.tsx

@@ -0,0 +1,31 @@
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+
+import { cn } from "@acme/ui/lib";
+
+const font = Poppins({
+    subsets: ["latin"],
+    weight: ["400", "600"],
+});
+
+export default function Logo() {
+    return (
+        <div className="hidden md:flex items-center gap-x-2">
+            <Image
+                className="dark:hidden"
+                src="/notion.svg"
+                height="40"
+                width="40"
+                alt="Logo"
+            />
+            <Image
+                className="hidden dark:block"
+                src="/notion-dark.svg"
+                height="40"
+                width="40"
+                alt="Logo"
+            />
+            <p className={cn("font-semibold", font.className)}>WorXpace</p>
+        </div>
+    );
+}

apps/worxpace/src/app/(marketing)/_components/navbar.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeToggle } from "@acme/ui/components";
+import { useScrollTop } from "@acme/ui/hooks";
+import { cn } from "@acme/ui/lib";
+
+import { theme } from "~/constants/theme";
+import Logo from "./logo";
+
+export default function Navbar() {
+  const scrolled = useScrollTop();
+
+  return (
+    <div
+      className={cn(
+        theme.background.navbar,
+        theme.flex.center,
+        "fixed top-0 z-50 w-full p-6",
+        scrolled && "border-b shadow-sm",
+      )}
+    >
+      <Logo />
+      <div
+        className={cn(
+          theme.flex.gap2,
+          "w-full justify-between md:ml-auto md:justify-end",
+        )}
+      >
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+}

apps/worxpace/src/app/(marketing)/layout.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+
+import { Navbar } from "./_components";
+
+export default function MarketingLayout({ children }: PropsWithChildren) {
+    return (
+        <div className="h-full dark:bg-[#1F1F1F]">
+            <Navbar />
+            <main className="h-full pt-40">{children}</main>
+        </div>
+    );
+}

apps/worxpace/src/app/(marketing)/page.tsx

@@ -0,0 +1,15 @@
+import { Footer, Heading, Heroes } from "./_components";
+
+const Marketing = () => {
+    return (
+        <div className="min-h-full flex flex-col dark:bg-[#1F1F1F]">
+            <div className="flex flex-col items-center justify-center md:justify-start text-center gap-y-8 flex-1 px-6 pb-10">
+                <Heading />
+                <Heroes />
+            </div>
+            <Footer />
+        </div>
+    );
+};
+
+export default Marketing;

apps/worxpace/src/app/globals.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+:root {
+  height: 100%;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;

apps/worxpace/src/app/layout.tsx

@@ -1,29 +1,35 @@
 import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
 
-import { cn } from "@acme/ui/lib";
+import { ThemeProvider } from "@acme/ui/components";
 
 import { env } from "~/env";
 
 import "~/app/globals.css";
 
+const inter = Inter({ subsets: ["latin"] });
+
 export const metadata: Metadata = {
   metadataBase: new URL(
     env.VERCEL_ENV === "production"
-      ? "https://turbo.t3.gg"
-      : "http://localhost:3000",
+      ? "https://worxpace.steeeee0223.vercel.app"
+      : `http://localhost:${env.PORT}`,
   ),
-  title: "Create T3 Turbo",
-  description: "Simple monorepo with shared backend for web & mobile apps",
-  openGraph: {
-    title: "Create T3 Turbo",
-    description: "Simple monorepo with shared backend for web & mobile apps",
-    url: "https://create-t3-turbo.vercel.app",
-    siteName: "Create T3 Turbo",
-  },
-  twitter: {
-    card: "summary_large_image",
-    site: "@jullerino",
-    creator: "@jullerino",
+  title: "Steeeee WorXpace",
+  description: "The all-in-1 workspace where better, faster work happens",
+  icons: {
+    icon: [
+      {
+        media: "(prefers-color-scheme: light)",
+        url: "/notion.svg",
+        href: "/notion.svg",
+      },
+      {
+        media: "(prefers-color-scheme: dark)",
+        url: "/notion-dark.svg",
+        href: "/notion-dark.svg",
+      },
+    ],
   },
 };
 
@@ -34,15 +40,23 @@ export const viewport: Viewport = {
   ],
 };
 
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={cn(
-          "min-h-screen bg-background font-sans text-foreground antialiased",
-        )}
-      >
-        {props.children}
+      <body className={inter.className}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+          storageKey="notion-key-2"
+        >
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );