Merge pull request #16 from hubcio2115/feat/homepage

Created Homepage

package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@t3-oss/env-nextjs": "^0.6.0",
     "@tanstack/react-query": "^4.32.6",
     "@trpc/client": "^10.37.1",

src/app/page.tsx

@@ -1,16 +1,57 @@
+import Image from "next/image";
+
+import Footer from "~/components/footer";
 import Navbar from "~/components/navbar";
 import PremiumPricingCard from "~/components/premiumPricingCard";
 import StandardPricingCard from "~/components/standardPricingCard";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen flex-col gap-4">
+    <div className="flex min-h-screen flex-col">
       <Navbar />
 
-      <div className="mx-auto flex gap-10">
+      <div className="bg-[url('/wiggle.svg')] py-24">
+        <div className="mx-auto flex max-w-3xl flex-col gap-4">
+          <h1 className="text-center text-4xl font-semibold">
+            Colaborate with your editors on your uploads without the stress of
+            bad actors.
+          </h1>
+
+          <p className="text-center text-xl">
+            A Git like colaboration platform for YouTubers and Freelance Video
+            Editors.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex justify-center gap-32 py-24">
+        <div className="my-auto flex max-w-3xl flex-col gap-4">
+          <h1 className="text-center text-4xl font-semibold">
+            No longer you have to trade security over funcitonality and
+            flexibility.
+          </h1>
+
+          <p className="text-center text-xl">
+            YouTube gives too much access to the editors event at the minimal
+            access rights!
+          </p>
+        </div>
+
+        <div className="max-w-3xl">
+          <Image
+            src="/img/invite_google_modal.png"
+            width={1200}
+            height={1200}
+            alt="youtube invite modal"
+          />
+        </div>
+      </div>
+
+      <div className="min-w-screen mt-10 flex justify-center gap-10 bg-[url('/wiggle.svg')] py-24 ">
         <StandardPricingCard />
         <PremiumPricingCard />
       </div>
+      <Footer />
     </div>
   );
 }

src/components/footer.tsx

@@ -0,0 +1,25 @@
+import { Monitor, Moon, Sun } from "lucide-react";
+
+import { Toggle } from "./ui/toggle";
+
+export default function Footer() {
+  return (
+    <nav className="flex items-center justify-between border-t border-slate-300 bg-slate-200 p-2">
+      <h1 className="text-l font-bold text-gray-900">
+        ©2023 <span className="text-fuchsia-900">Edit</span>
+        thing
+      </h1>
+      <div className="mr-3 flex">
+        <Toggle size="sm" className="mr-1">
+          <Moon size={16} />
+        </Toggle>
+        <Toggle size="sm" className="mr-1">
+          <Sun size={16} />
+        </Toggle>
+        <Toggle size="sm" className="mr-1">
+          <Monitor size={16} />
+        </Toggle>
+      </div>
+    </nav>
+  );
+}

src/components/premiumPricingCard.tsx

@@ -1,6 +1,5 @@
-import { type ComponentProps } from "react";
 import { Check } from "lucide-react";
-import { cn } from "~/lib/utils";
+import { type ComponentProps } from "react";
 
 import { Button } from "~/components/ui/button";
 import {
@@ -11,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
+import { cn } from "~/lib/utils";
 
 const featureList = [
   {
@@ -25,44 +25,49 @@ const featureList = [
     title: "Unlimited upload speeds",
     description: "Enjoy the fastest upload speeds possible.",
   },
-];
+] as const;
 
 type CardProps = ComponentProps<typeof Card>;
 
 export default function CardStandard({ className, ...props }: CardProps) {
   return (
     <Card
       className={cn(
-        "relative w-[360px] border-2 border-violet-500 shadow-lg shadow-fuchsia-900",
+        "relative w-[360px] border-2 border-violet-500 shadow-md shadow-fuchsia-200",
         className,
       )}
       {...props}
     >
-      <div className="absolute right-0 rounded-bl-md  bg-violet-500 p-1 font-semibold uppercase text-violet-100">
+      <div className="absolute right-0 rounded-bl-md bg-violet-500 p-1 text-xs font-semibold uppercase text-violet-100">
         recommended
       </div>
+
       <CardHeader>
         <CardTitle>
           <span className="font-bold text-fuchsia-900">Premium</span> Plan
         </CardTitle>
+
         <CardDescription>
           For large channels with even larger demands.
         </CardDescription>
       </CardHeader>
+
       <CardContent className="mb-10 grid gap-4">
         {featureList.map(({ title, description }) => (
           <div
             key={title}
             className="flex h-20 items-center space-x-4 rounded-md border p-4"
           >
             <Check className="text-fuchsia-700" />
+
             <div className="flex-1 space-y-1">
               <p className="text-sm font-medium leading-none">{title}</p>
               <p className="text-sm text-muted-foreground">{description}</p>
             </div>
           </div>
         ))}
       </CardContent>
+
       <CardFooter>
         {/* TODO - redirect to shop */}
         <Button className="w-full bg-purple-800 hover:bg-purple-600">

src/components/standardPricingCard.tsx

@@ -1,6 +1,5 @@
-import { type ComponentProps } from "react";
 import { Check } from "lucide-react";
-import { cn } from "~/lib/utils";
+import { type ComponentProps } from "react";
 
 import { Button } from "~/components/ui/button";
 import {
@@ -11,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "~/components/ui/card";
+import { cn } from "~/lib/utils";
 
 const featureList = [
   {
@@ -25,7 +25,7 @@ const featureList = [
     title: "Scheduled Video Uploads",
     description: "Automatically post videos to YouTube.",
   },
-];
+] as const;
 
 type CardProps = ComponentProps<typeof Card>;
 

src/components/ui/card.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
+
 import { cn } from "~/lib/utils";
 
 const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(

src/components/ui/navigation-menu.tsx

@@ -1,11 +1,11 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
 import {
-  forwardRef,
-  type ElementRef,
   type ComponentPropsWithoutRef,
+  type ElementRef,
+  forwardRef,
 } from "react";
-import NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
 
 import { cn } from "~/lib/utils";
 

src/components/ui/toggle.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps, cva } from "class-variance-authority";
+import {
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  forwardRef,
+} from "react";
+
+import { cn } from "~/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = forwardRef<
+  ElementRef<typeof TogglePrimitive.Root>,
+  ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };