Initial Commit

app/(marketing)/_components/footer.tsx

@@ -0,0 +1,20 @@
+import { Logo } from "@/components/logo";
+import { Button } from "@/components/ui/button";
+
+export const Footer = () => {
+  return (
+    <div className="fixed bottom-0 w-full p-4 border-t bg-slate-100">
+      <div className="md:max-w-screen-2xl mx-auto flex items-center w-full justify-between">
+        <Logo />
+        <div className="space-x-4 md:block md:w-auto flex items-center justify-between w-full">
+          <Button size="sm" variant="ghost">
+            Privacy Policy
+          </Button>
+          <Button size="sm" variant="ghost">
+            Terms of Service
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

app/(marketing)/_components/navbar.tsx

@@ -0,0 +1,21 @@
+import { Logo } from "@/components/logo";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export const Navbar = () => {
+  return (
+    <div className="fixed top-0 w-full h-14 px-4 border-b shadow-sm bg-white flex items-center">
+      <div className="md:max-w-screen-2xl mx-auto flex items-center w-full justify-between">
+        <Logo />
+        <div className="space-x-4 md:block md:w-auto flex items-center justify-between w-full">
+          <Button size="sm" variant="outline" asChild>
+            <Link href="sign-in">Login</Link>
+          </Button>
+          <Button size="sm" asChild>
+            <Link href="sign-up">Get Tasko for Free</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

app/(marketing)/layout.tsx

@@ -0,0 +1,14 @@
+import { Footer } from "./_components/footer";
+import { Navbar } from "./_components/navbar";
+
+const MarketingLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="h-full bg-slate-100">
+      <Navbar />
+      <main className="pt-40 pb-20 bg-slate-100">{children}</main>
+      <Footer />
+    </div>
+  );
+};
+
+export default MarketingLayout;

app/(marketing)/page.tsx

@@ -0,0 +1,54 @@
+import { Medal } from "lucide-react";
+import localFont from "next/font/local";
+import { Poppins } from "next/font/google";
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+const headingFont = localFont({ src: "../../public/fonts/font.woff2" });
+
+const textFont = Poppins({
+  subsets: ["latin"],
+  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+});
+
+const MarketingPage = () => {
+  return (
+    <div className="flex items-center justify-center flex-col">
+      <div
+        className={cn(
+          "flex items-center justify-center flex-col",
+          headingFont.className
+        )}
+      >
+        <div className="mb-4 flex items-center border shadow-sm p-4 bg-amber-100 text-amber-700 rounded-full uppercase">
+          <Medal className="h-6 w-6 mr-2" />
+          No 1 task management app
+        </div>
+        <h1 className="text-3xl md:text-6xl text-center text-neutral-800 mb-6">
+          Tasko helps teams move
+        </h1>
+        <div className="text-3xl md:text-6xl bg-gradient-to-r from-fuchsia-600 to-pink-600 text-white px-4 p-2 rounded-md pb-4 w-fit">
+          Work forward
+        </div>
+      </div>
+      <div
+        className={cn(
+          "text-sm md:text-xl text-neutral-400 mt-4 max-w-xs md:max-w-2xl text-center mx-auto",
+          textFont.className
+        )}
+      >
+        Collaborate, manage projects, and reach new productivity peaks. From
+        high rises to the home office, the way your team works is unique -
+        accomplish it all with Tasko.
+      </div>
+      <Button className="mt-6" size="lg" asChild>
+        <Link href="/sign-up">Get Tasko for free</Link>
+      </Button>
+    </div>
+  );
+};
+
+export default MarketingPage;