feat: home page

DEEKSHITIH · Jun 25, 2023 · 794a08f · 794a08f
1 parent 3265ebc
commit 794a08f
Show file tree

Hide file tree

Showing 23 changed files with 1,988 additions and 17 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,10 +1,15 @@
 import { cn } from "@/lib/utils";
 import "./globals.css";
-import { Inter } from "next/font/google";
+import { Inter as FontSans } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
 import SiteHeader from "@/components/layout/site-header";
+import SiteFooter from "@/components/layout/site-footer";
 
-const inter = Inter({ subsets: ["latin"] });
+const fontSans = FontSans({
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  variable: "--font-sans",
+});
 
 export const metadata = {
   title: "Frontend Freaks",
@@ -21,14 +26,14 @@ export default function RootLayout({
       <body
         className={cn(
           "min-h-screen bg-background font-sans antialiased",
-          inter.className
+          fontSans.className
         )}
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <div className="relative flex min-h-screen flex-col">
             <SiteHeader />
             <div className="flex-1">{children}</div>
-            {/* <SiteFooter /> */}
+            <SiteFooter />
           </div>
         </ThemeProvider>
       </body>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,128 @@
+import { Faq } from "@/components/faq";
+import Tracks from "@/components/tracks";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import Image from "next/image";
+
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <h1>HI</h1>
+    <main className="container flex min-h-screen flex-col items-center justify-between mb-10">
+      <section
+        className="min-h-[80vh] w-full bg-contain bg-no-repeat flex items-center"
+        style={{
+          backgroundImage: `url("/background.svg")`,
+        }}
+      >
+        <div className="flex flex-col gap-4">
+          <div className="text-5xl font-bold text-slate-700">
+            <h1>
+              <span className="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
+                Unleash
+              </span>{" "}
+              Your
+            </h1>
+            Frontend{" "}
+            <span className="bg-gradient-to-r from-red-400 via-orange-300 to-amber-200 bg-clip-text text-transparent">
+              Superpowers
+            </span>
+          </div>
+          <p className="max-w-md">
+            Elearn is a global training provider based across the UK that
+            specialises in accredited and bespoke training courses. We crush
+            the...
+          </p>
+          <div className="flex gap-4">
+            <Button variant="secondary">Join Community</Button>
+            <Button>Join Mentorship</Button>
+          </div>
+        </div>
+      </section>
+
+      <section className="w-full flex justify-center gap-40 bg-amber-100/20 px-20 pt-10 md:my-20">
+        <Image
+          src="/bg.svg"
+          alt="girl working on a laptop"
+          width={500}
+          height={500}
+          className="-mb-10"
+        />
+        <div className="max-w-md flex flex-col gap-10">
+          <h4 className="md:text-5xl font-bold text-slate-700">
+            Premium{" "}
+            <span className="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
+              Learning
+            </span>{" "}
+            Experience
+          </h4>
+
+          <div className="flex flex-col gap-4">
+            <div className="flex gap-4 items-center">
+              <Image
+                src="/icons/learn.svg"
+                alt="learn"
+                width={40}
+                height={40}
+              />
+              <div>
+                <p className="font-bold md:text-xl">Learn</p>
+                <p className="text-sm text-slate-500">
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-4 items-center">
+              <Image
+                src="/icons/build.svg"
+                alt="learn"
+                width={40}
+                height={40}
+              />
+              <div>
+                <p className="font-bold md:text-xl">Build</p>
+                <p className="text-sm text-slate-500">
+                  Lorem ipsum dolor sit amet.
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-4 items-center">
+              <Image src="/icons/hire.svg" alt="learn" width={40} height={40} />
+              <div>
+                <p className="font-bold md:text-xl">Hire</p>
+                <p className="text-sm text-slate-500">
+                  Lorem ipsum dolor sit amet consectetu.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* tracks section */}
+      <Tracks />
+      <Faq />
+
+      {/* newsletter */}
+      <section className="w-full rounded-xl h-80 mt-10 flex justify-center items-center">
+        <div
+          style={{
+            backgroundImage: `url("/news_bg.svg")`,
+          }}
+          className="py-20 px-60 rounded-xl text-white text-center justify-center items-center flex flex-col bg-contain bg-no-repeat"
+        >
+          <h5 className="md:text-4xl font-bold">Subscribe to our newsletter</h5>
+          <p className="text-sm text-slate-100 mt-2">
+            Lorem Ipsum is simply dummy text of the printing.
+          </p>
+
+          <div className="flex gap-2 bg-slate-100 rounded-full p-1 mt-4 text-black">
+            <Input
+              placeholder="Enter your Email "
+              className="bg-transparent border-none placeholder:text-slate-400 focus-visible:ring-offset-0 focus-visible:ring-0 focus-visible:outline-none"
+            />
+            <Button className="rounded-full">Subscribe</Button>
+          </div>
+        </div>
+      </section>
     </main>
   );
 }
diff --git a/components/faq.tsx b/components/faq.tsx
@@ -0,0 +1,61 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export function Faq() {
+  return (
+    <section className="container flex flex-col gap-6 py-10">
+      <h4 className="text-center md:text-4xl font-bold text-slate-600">FAQ</h4>
+
+      <div className="grid gap-20 grid-cols-2">
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It comes with default styles that matches the other
+              components&apos; aesthetic.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It&apos;s animated by default, but you can disable it if you
+              prefer.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It adheres to the WAI-ARIA design pattern.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It comes with default styles that matches the other
+              components&apos; aesthetic.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It&apos;s animated by default, but you can disable it if you
+              prefer.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </section>
+  );
+}
diff --git a/components/layout/main-nav.tsx b/components/layout/main-nav.tsx
@@ -18,11 +18,11 @@ export default function MainNav({ items, children }: MainNavProps) {
   const [showMobileMenu, setShowMobileMenu] = React.useState<boolean>(false);
 
   return (
-    <div className="flex gap-6 md:gap-10">
+    <div className="flex gap-6 md:gap-10 justify-between w-full">
       <Link href="/" className="hidden items-center space-x-2 md:flex">
         <Icons.logo />
         <span className="hidden text-lg font-bold sm:inline-block">
-          Tipsycode
+          Frontend Freaks
         </span>
       </Link>
       {items?.length ? (
@@ -33,7 +33,7 @@ export default function MainNav({ items, children }: MainNavProps) {
                 href={item.href}
                 key={index}
                 className={cn(
-                  "flex items-center md:text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm capitalize"
+                  "flex items-center font-medium transition-colors hover:text-foreground/80 sm:text-sm capitalize text-foreground/60"
                 )}
               >
                 {item.title}

diff --git a/components/layout/site-footer.tsx b/components/layout/site-footer.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+type Props = {};
+
+export default function SiteFooter({}: Props) {
+  return <div>Footer</div>;
+}
diff --git a/components/layout/site-header.tsx b/components/layout/site-header.tsx
@@ -1,14 +1,16 @@
 import React from "react";
 import MainNav from "./main-nav";
 import { navConfig } from "@/config/nav";
+import { Button } from "../ui/button";
 
 type Props = {};
 
 export default function SiteHeader({}: Props) {
   return (
-    <header className="sticky top-0 z-40 w-full bg-background/95 backdrop-blur">
-      <div className="container flex h-14 items-center">
+    <header className="sticky top-0 z-40 w-full bg-background/95 backdrop-blur p-3">
+      <div className="container flex h-14 items-center gap-6">
         <MainNav items={navConfig} />
+        <Button className="rounded-full">Mentorship</Button>
       </div>
     </header>
   );

diff --git a/components/tracks.tsx b/components/tracks.tsx
@@ -0,0 +1,55 @@
+import Image from "next/image";
+import React from "react";
+import { Button } from "./ui/button";
+
+type Props = {};
+
+export default function Tracks({}: Props) {
+  return (
+    <section className="text-center md:my-20">
+      <h4 className="md:text-3xl text-black font-bold">Our Tracks</h4>
+      <p>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde, autem.
+      </p>
+
+      <div className="flex gap-6 mt-8">
+        <div className="flex flex-col gap-3 items-center border p-4 rounded-lg">
+          <Image src="/learn_img.svg" alt="learn" width={250} height={250} />
+          <div className="flex flex-col gap-2">
+            <h3 className="text-xl font-bold ">Learn The Latest Skills</h3>
+            <p className="text-xs text-slate-600 max-w-xs">
+              Contrary to popular belief, Lorem Ipsum is not simply random text.
+              It has roots in a BC, making it over 2000 years old. It has roots
+              in a BC, making it over 2000 years old.
+            </p>
+          </div>
+          <Button className="rounded-full px-8 py-2 mt-4">Join</Button>
+        </div>
+        <div className="flex flex-col gap-3 items-center border p-4 rounded-lg">
+          <Image src="/build_img.svg" alt="learn" width={250} height={250} />
+          <div className="flex flex-col gap-2">
+            <h3 className="text-xl font-bold ">Build Projects</h3>
+            <p className="text-xs text-slate-600 max-w-xs">
+              Contrary to popular belief, Lorem Ipsum is not simply random text.
+              It has roots in a BC, making it over 2000 years old. It has roots
+              in a BC, making it over 2000 years old.
+            </p>
+          </div>
+          <Button className="rounded-full px-8 py-2 mt-4">Join</Button>
+        </div>
+        <div className="flex flex-col gap-3 items-center border p-4 rounded-lg">
+          <Image src="/hire_img.svg" alt="learn" width={250} height={250} />
+          <div className="flex flex-col gap-2">
+            <h3 className="text-xl font-bold ">Get Hired</h3>
+            <p className="text-xs text-slate-600 max-w-xs">
+              Contrary to popular belief, Lorem Ipsum is not simply random text.
+              It has roots in a BC, making it over 2000 years old. It has roots
+              in a BC, making it over 2000 years old.
+            </p>
+          </div>
+          <Button className="rounded-full px-8 py-2 mt-4">Join</Button>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }