New app: Steeeee WorXpace

apps/worxpace/README.md

@@ -0,0 +1,28 @@
+# Create T3 App
+
+This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
+
+## What's next? How do I make an app with this?
+
+We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
+
+If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
+
+- [Next.js](https://nextjs.org)
+- [NextAuth.js](https://next-auth.js.org)
+- [Drizzle](https://orm.drizzle.team)
+- [Tailwind CSS](https://tailwindcss.com)
+- [tRPC](https://trpc.io)
+
+## Learn More
+
+To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
+
+- [Documentation](https://create.t3.gg/)
+- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
+
+You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
+
+## How do I deploy this?
+
+Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.

apps/worxpace/next.config.js

@@ -0,0 +1,20 @@
+// Importing env files here to validate on build
+import "./src/env.js";
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+
+  /** Enables hot reloading for local packages without a build step */
+  transpilePackages: [
+    "@acme/prisma",
+    "@acme/ui",
+    "@acme/validators",
+  ],
+
+  /** We already do linting and typechecking as separate tasks in CI */
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
+};
+
+export default config;

apps/worxpace/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@acme/worxpace",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "pnpm with-env next build",
+    "clean": "git clean -xdf .next .turbo node_modules",
+    "dev": "pnpm with-env next dev -p 3001",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
+    "start": "pnpm with-env next start",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env --"
+  },
+  "dependencies": {
+    "@acme/prisma": "workspace:*",
+    "@acme/ui": "workspace:^0.1.0",
+    "@acme/validators": "workspace:^0.1.0",
+    "@t3-oss/env-nextjs": "^0.7.1",
+    "next": "^14.0.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "superjson": "2.2.1",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@acme/eslint-config": "workspace:^0.2.0",
+    "@acme/prettier-config": "workspace:^0.1.0",
+    "@acme/tailwind-config": "workspace:^0.1.0",
+    "@acme/tsconfig": "workspace:^0.1.0",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "dotenv-cli": "^7.3.0",
+    "eslint": "^8.56.0",
+    "prettier": "^3.1.1",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@acme/eslint-config/base",
+      "@acme/eslint-config/nextjs",
+      "@acme/eslint-config/react"
+    ]
+  },
+  "prettier": "@acme/prettier-config"
+}

apps/worxpace/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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;