Merge pull request #24 from RITIK-KHARYA/feature/auth-page

Feature/auth page
SkidGod4444 · Nov 10, 2024 · 620a319 · 620a319
2 parents 15e6f19 + a22da54
commit 620a319
Show file tree

Hide file tree

Showing 17 changed files with 557 additions and 143 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,6 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+
+
diff --git a/apps/www/.gitignore b/apps/www/.gitignore
@@ -37,4 +37,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
diff --git a/apps/www/app/(routes)/usage/layout.tsx b/apps/www/app/(routes)/usage/layout.tsx
@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+
+interface AppLayoutProps {
+  children: ReactNode;
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x px-3 overflow-hidden">
+      {children}
+    </div>
+  );
+}
diff --git a/apps/www/app/(routes)/usage/page.tsx b/apps/www/app/(routes)/usage/page.tsx
@@ -0,0 +1,28 @@
+import UsageHome from "@/components/custom/usage-home";
+import LeftSidebar from "@/components/ui/Leftsidebar";
+import RightSidebar from "@/components/ui/Rightsidebar";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+export default function UsagePage() {
+  return (
+    <div>
+      <div className="flex flex-col lg:flex-row w-full h-screen overflow-hidden">
+        <div className="w-full lg:w-[20rem] p-4 lg:p-6 hidden lg:block">
+          <LeftSidebar />
+        </div>
+        <ScrollArea>
+          <div className="flex-1 w-full p-4 lg:p-0 ">
+            <UsageHome />
+            <UsageHome />
+            <UsageHome />
+          </div>
+        </ScrollArea>
+        <div className="w-full lg:w-[16rem] p-4 hidden lg:block">
+          <RightSidebar />
+        </div>
+      </div>
+      <hr className="w-full border" />
+    </div>
+  );
+}
diff --git a/apps/www/app/globals.css b/apps/www/app/globals.css
@@ -98,6 +98,7 @@
   }
   body {
     @apply bg-background text-foreground;
+
     /* font-feature-settings: "rlig" 1, "calt" 1; */
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
@@ -108,4 +109,4 @@
   .container {
     @apply px-4;
   }
-}
+}
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -16,15 +16,15 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`min-h-screen bg-background font-sans ${GeistSans.variable} antialiased`}
+        className={` bg-background font-sans min-h-screen  ${GeistSans.variable} antialiased`}
       >
         <ThemeProvider
           attribute="class"
           defaultTheme="dark"
           enableSystem
           disableTransitionOnChange
         >
-          <div className="relative flex min-h-screen flex-col bg-background mx-auto">
+          <div className="relative flex  flex-col bg-background mx-auto">
             {children}
           </div>
         </ThemeProvider>

diff --git a/apps/www/app/sign-in/[[...sign-in]]/layout.tsx b/apps/www/app/sign-in/[[...sign-in]]/layout.tsx
@@ -0,0 +1,16 @@
+import { SiteFooter } from "@/components/custom/site/footer";
+import { SiteHeader } from "@/components/custom/site/header";
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
+      <SiteHeader />
+      <main className="flex-1 px-3">{children}</main>
+      <SiteFooter />
+    </div>
+  );
+}
diff --git a/apps/www/app/sign-in/[[...sign-in]]/page.tsx b/apps/www/app/sign-in/[[...sign-in]]/page.tsx
@@ -0,0 +1,63 @@
+import { Button } from "@/components/ui/button";
+import { PiGithubLogoBold } from "react-icons/pi";
+import { SiDiscord } from "react-icons/si";
+import { FcGoogle } from "react-icons/fc";
+import { Input } from "@/components/ui/input";
+import Link from "next/link";
+export default function SignInPage() {
+  return (
+    <div className="container relative">
+      <div className="absolute bottom-0 left-[-20%] right-0 top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(211,211,211,0.15),rgba(255,255,255,0))]" />
+      <div className="h-screen w-full flex flex-col items-center justify-center  ">
+        <div className="flex-col w-[26rem]  items-center justify-center font-bold  bg-clip-text text-transparent bg-gradient-to-b from-neutral-800 to-neutral-700 dark:from-neutal-900 to:neutral-700 drop-shadow-sm dark:to-white relative lg:text-4xl  pb-10 z-20 font-sans mx-auto flex gap-4  py-12 md:py-16  lg:py-12 text-center  ">
+          <h1 className=" w-full text-3xl md:text-5xl lg:text-3xl ">
+            Transform how you work.
+          </h1>
+          <article className=" w-full text-3xl md:text-5xl lg:text-3xl">
+            Log In Your Plura Account
+          </article>
+        </div>
+        <div className="w-[26rem] h-[500px] flex flex-col justify-start  items-center ">
+          <div className="w-full space-y-4  top-0 pt-14 ">
+            <Button className="w-full border  border-border text-xl rounded-lg h-10 bg-transparent text-white hover:bg-neutral-900/90 font-thin ">
+              <FcGoogle size={30} />
+              <span>Continue with Google</span>
+            </Button>
+            <Button className="w-full border border-border text-xl rounded-lg h-10 bg-transparent text-white hover:bg-neutral-900/90  font-thin flex items-center justify-center  ">
+              <PiGithubLogoBold size={24} />
+              <span>Continue with Github</span>
+            </Button>
+            <Button className="w-full border border-border text-xl rounded-lg h-10 bg-transparent text-white hover:bg-neutral-900/90  font-thin flex items-center justify-center space-x-1">
+              <SiDiscord />
+              <span>Continue with Discord</span>
+            </Button>
+          </div>
+          <div className="w-full h-10"></div>
+          <div className="w-full h-10"></div>
+          <div className="flex w-full flex-col space-y-2">
+            <span className=" ml-2 text-muted-foreground text-sm font-normal flex flex-row items-center justify-start">
+              Email
+            </span>
+            <Input
+              className="h-12 "
+              placeholder="type your email here"
+              type="email"
+              name="email"
+            />
+            <Button
+              className="bg-neutral-900 text-white border border-border hover:bg-neutral-800"
+              type="submit"
+            >
+              Continue
+            </Button>
+            <span className="text-muted-foreground text-sm flex flex-row items-center justify-center hover:underline ">
+              <Link href={"/sign-up"}>already a member</Link>
+            </span>
+          </div>
+        </div>
+        {/* experiment here*/}
+        <div className=""></div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/www/components/custom/navbar/navbar.tsx b/apps/www/components/custom/navbar/navbar.tsx
@@ -39,10 +39,10 @@ export function MainNav() {
           Demo
         </Link>
         <Link
-          href="/examples"
+          href="/usage"
           className={cn(
             "transition-colors hover:text-foreground/80",
-            pathname?.startsWith("/examples")
+            pathname?.startsWith("/usage")
               ? "text-foreground"
               : "text-foreground/60",
           )}

diff --git a/apps/www/components/custom/usage-home.tsx b/apps/www/components/custom/usage-home.tsx
@@ -0,0 +1,33 @@
+export default function UsageHome() {
+  return (
+    <div className=" w-full flex flex-col items-center overflow-x-hidden  px-4 sm:px-6 ">
+      <h1 className="font-semibold text-2xl sm:text-3xl text-white flex justify-start items-center w-full h-12 mt-4 ml-4 sm:ml-6 lg:ml-10">
+        Introduction
+      </h1>
+      <div className="w-full flex items-start justify-start p-2 ml-4 sm:ml-6 lg:ml-10">
+        <div className="max-w-full sm:max-w-lg lg:max-w-xl font-normal text-base sm:text-lg text-muted-foreground tracking-wide">
+          Beautifully designed components that you can copy and paste into your
+          apps. Accessible. Customizable. Open Source.
+        </div>
+      </div>
+      <div className="mt-8 sm:mt-10 flex flex-col items-start justify-start w-full">
+        <div className="w-full flex flex-col items-start justify-start gap-y-6 sm:gap-y-8 lg:gap-y-10 px-4 sm:px-6 lg:px-10">
+          <section className="font-normal text-start w-full text-base sm:text-lg text-white">
+            This is NOT a component library. It&apos; a collection of re-usable
+            components that you can copy and paste into your apps.
+          </section>
+          <section className="font-normal text-start w-full text-base sm:text-lg text-white">
+            What do you mean by not a component library? I mean you do not
+            install it as a dependency. It is not available or distributed via
+            npm. Pick the components you need.
+          </section>
+          <section className="font-normal text-start w-full text-base sm:text-lg text-white">
+            Copy and paste the code into your project and customize to your
+            needs. The code is yours. Use this as a reference to build your own
+            component libraries.
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/www/components/ui/Leftsidebar.tsx b/apps/www/components/ui/Leftsidebar.tsx
@@ -0,0 +1,48 @@
+import { ScrollArea } from "./scroll-area";
+export default function LeftSidebar() {
+  const items = [
+    { label: "Introduction" },
+    { label: "Getting Started" },
+    { label: "Features" },
+    { label: "Pricing" },
+    { label: "FAQ" },
+    { label: "Blog" },
+    { label: "Introduction" },
+    { label: "Getting Started" },
+    { label: "Features" },
+    { label: "Pricing" },
+    { label: "FAQ" },
+    { label: "Blog" },
+    { label: "Contact Us" },
+    { label: "Introduction" },
+    { label: "Getting Started" },
+    { label: "Features" },
+    { label: "Pricing" },
+    { label: "FAQ" },
+    { label: "Blog" },
+    { label: "Contact Us" },
+    { label: "Contact Us" },
+  ];
+
+  return (
+    <div className="hidden lg:flex lg:flex-col md:mr-16 border-r text-sm lg:items-start lg:justify-start lg:w-full lg:h-full lg:top-8 lg:sticky lg:border-border lg:font-semibold">
+      <ScrollArea className="w-full h-full">
+        <div className="flex flex-col ml-4 w-full">
+          <h1 className="text-white h-12 w-full text-base flex items-center mt-3">
+            Getting Started
+          </h1>
+          <div className="w-full h-full">
+            {items.map((item, index) => (
+              <div
+                key={`${item.label}-${index}`}
+                className="text-white w-full h-10 flex items-center hover:opacity-90 cursor-pointer "
+              >
+                {item.label}
+              </div>
+            ))}
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}