feat (theme): global color change

app/_components/Bio.tsx

@@ -0,0 +1,10 @@
+import { Section } from "./Section";
+
+export const Bio = () => {
+  return (
+    <Section>
+      <h1 className="font-caption text-5xl font-bold text-primary max-md:text-4xl max-sm:text-3xl">Who am I?</h1>
+      <p>A graphic designer who got lost in the emptiness of code.</p>
+    </Section>
+  );
+};

app/_components/Contact.tsx

@@ -1,5 +1,8 @@
 import { Badge } from "@/app/_components/ui/badge";
 import { Section } from "./Section";
+import { Button } from "./ui/button";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 export const Contact = () => {
   return (
@@ -19,6 +22,12 @@ export const Contact = () => {
         hesitate to reach out. I’m eager to connect and discuss how we can work
         together.
       </h3>
+      <Link href={"/contact"} passHref>
+        <Button className="rounded-full font-semibold bg-accent-foreground flex items-center">
+          Contact me
+          <ArrowRight size={16} className="ml-1" />
+        </Button>
+      </Link>
     </Section>
   );
 };

app/_components/Form.tsx

@@ -0,0 +1,65 @@
+import { Section } from "./Section";
+import { Textarea } from "./ui/textarea";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+export const Form = () => {
+  return (
+    <Section className="flex flex-col items-start justify-between gap-4 min-h-[calc(100vh-170px)]">
+      <form className="m-auto mr-56 ml-56 max-lg:mr-24 max-lg:ml-24 max-sm:mr-8 max-sm:ml-8">
+        <h1 className="font-caption text-5xl font-bold text-primary max-md:text-4xl max-sm:text-3xl">
+          Let&apos;s talk!
+        </h1>
+        <h2 className="font-caption font-extralight text-xl max-sm:text-xl">
+          If you have a question, a job opportunity, or a project in mind, don’t
+          hesitate to reach out. I’m eager to connect and discuss how we can
+          work together.
+        </h2>
+        <div className="flex flex-col gap-4 mt-8">
+          <div className="flex gap-4 max-lg:flex-col">
+            <div className="flex flex-[2] flex-col gap-1">
+              <label className="text-xs">First Name</label>
+              <Input
+                className="flex-1 rounded-lg p-3 hover:bg-accent/20"
+                required
+              />
+            </div>
+            <div className="flex flex-[2] flex-col gap-1">
+              <label className="text-xs">Last Name</label>
+              <Input
+                className="flex-1 rounded-lg p-3 hover:bg-accent/20"
+                required
+              />
+            </div>
+          </div>
+          <div className="flex gap-4 max-lg:flex-col">
+            <div className="flex flex-[2] flex-col gap-1">
+              <label className="text-xs">Email</label>
+              <Input
+                className="flex-1 rounded-lg p-3 hover:bg-accent/20"
+                required
+              />
+            </div>
+            <div className="flex flex-[2] flex-col gap-1">
+              <label className="text-xs">Company</label>
+              <Input className="flex-1 rounded-lg p-3 hover:bg-accent/20" />
+            </div>
+          </div>
+          <div className="flex flex-[2] flex-col gap-1">
+            <label className="text-xs">Your message</label>
+            <Textarea
+              placeholder="Type your message here."
+              className="flex-1 rounded-lg p-3 hover:bg-accent/20 resize-y min-h-[130px]"
+              required
+            />
+          </div>
+          <div className="m-auto items-center mt-4">
+            <Button className="rounded-full font-semibold text-lg w-36">
+              Send
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Section>
+  );
+};

app/_components/Header.tsx

@@ -37,13 +37,13 @@ export const Header = () => {
         <nav className="hidden sm:flex items-center">
           <ul className="inline-flex items-center">
             <div className="flex items-center gap-4 pr-4 border-r border-accent-foreground/30 h-4">
-              <Link href={"#"} className={"text-foreground hover:text-primary"}>
+              <Link href={"/about"} className={"text-foreground hover:text-primary"}>
                 About
               </Link>
-              <Link href={"#"} className={"text-foreground hover:text-primary"}>
+              <Link href={"/work"} className={"text-foreground hover:text-primary"}>
                 Work
               </Link>
-              <Link href={"#"} className={"text-foreground hover:text-primary"}>
+              <Link href={"/contact"} className={"text-foreground hover:text-primary"}>
                 Contact
               </Link>
             </div>

app/_components/Skills.tsx

@@ -9,11 +9,11 @@ export const Skills = () => {
     <Section className="flex flex-col items-start justify-between gap-4">
       <Badge
         variant="outline"
-        className="rounded-full text-primary border-primary"
+        className="rounded-full text-violet-400 border-violet-400"
       >
         Skills
       </Badge>
-      <h2 className="font-caption font-extralight text-4xl max-sm:text-xl">
+      <h2 className="font-caption font-extralight text-4xl max-sm:text-xl text-slate-300">
         I love working on...
       </h2>
 
@@ -26,10 +26,10 @@ export const Skills = () => {
               style={{ animationDuration: "20s" }}
             />
           </div>
-          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight mb-2">
+          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight mb-2 text-white">
             React.js
           </h3>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-slate-300/80">
             Experienced in building dynamic, responsive web applications using
             React and Next.js, with a focus on server-side rendering, static
             site generation, and efficient routing for enhanced performance
@@ -40,10 +40,10 @@ export const Skills = () => {
           <div className="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:h-12 lg:w-12 ">
             <TailwindIcon size={64} />
           </div>
-          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight mb-2">
+          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight mb-2 text-white">
             Tailwind CSS
           </h3>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-slate-300/80">
             Proficient in using Tailwind CSS to create custom, responsive
             designs quickly, ensuring clean and scalable UI development with
             utility-first styling.
@@ -54,10 +54,10 @@ export const Skills = () => {
           <div className="flex justify-center items-center mb-4 w-10 h-10 rounded-full lg:h-12 lg:w-12 ">
             <PythonIcon size={64} />
           </div>
-          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight mb-2">
+          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight mb-2 text-white">
             Python
           </h3>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-slate-300/80">
             Skilled in Python programming for various applications, from web
             development to data manipulation, with a focus on clean code and
             automation.

app/_components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

app/_components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

app/about/page.tsx

@@ -0,0 +1,12 @@
+import { Bio } from "../_components/Bio";
+import { Spacing } from "../_components/Spacing";
+
+export default function About() {
+  return (
+    <main>
+      <Spacing size="lg" />
+      <Bio/>
+      <Spacing size="lg" />
+    </main>
+  );
+}

app/contact/page.tsx

@@ -0,0 +1,9 @@
+import { Form } from "../_components/Form";
+
+export default function Contact() {
+  return (
+    <main>
+      <Form/>
+    </main>
+  );
+}

app/globals.css

@@ -37,25 +37,26 @@ body {
   }
 
   .dark {
-    --background: 214 17% 8%;
+    --background: 200 5% 5%;
     --foreground: 218 7% 78%;
-    --muted: 214 12% 15%;
+    --muted: 214 8% 15%;
     --muted-foreground: 214 12% 65%;
-    --popover: 214 17% 5%;
+    --popover: 214 5% 5%;
     --popover-foreground: 218 7% 88%;
-    --card: 214 17% 6%;
+    --card: 214 5% 6%;
     --card-foreground: 218 7% 83%;
     --border: 214 7% 13%;
     --input: 214 7% 16%;
     --primary: 270 84% 66%;
     --primary-foreground: 0 0% 0%;
     --secondary: 270 30% 25%;
     --secondary-foreground: 270 30% 85%;
-    --accent: 214 17% 23%;
+    --accent: 214 10% 23%;
     --accent-foreground: 214 17% 83%;
     --destructive: 2 89% 56%;
     --destructive-foreground: 0 0% 100%;
     --ring: 270 84% 66%;
+    --radius: 0.5rem;
   }
 }
 

app/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import { Anek_Telugu } from "next/font/google";
 import "./globals.css";
+import { Header } from "./_components/Header";
+import { Footer } from "./_components/Footer";
 
 const AnekTelugu = Anek_Telugu({
   subsets: ["latin"],
@@ -34,7 +36,9 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} ${AnekTelugu.variable} "font-sans h-full" antialiased`}
       >
+        <Header />
         {children}
+        <Footer />
       </body>
     </html>
   );

app/page.tsx

@@ -1,25 +1,25 @@
 import { Contact } from "./_components/Contact";
-import { Footer } from "./_components/Footer";
-import { Header } from "./_components/Header";
 import { Hero } from "./_components/Hero";
 import { Skills } from "./_components/Skills";
 import { Spacing } from "./_components/Spacing";
 import { Status } from "./_components/Status";
 
 export default function Home() {
   return (
-    <main>
-      <Header />
-      <Spacing size="md" />
-      <Hero />
-      <Spacing size="md" />
+    <main className="">
+      <div className="p-28 border-b">
+        <Hero />
+      </div>
+      <div className="bg-gradient-to-t from-violet-600/0 via-violet-600/0 to-violet-600/5 p-24 border-b ">
       <Status />
-      <Spacing size="md" />
+      </div>
+      <div className="bg-violet-950 p-28 border-b bg-grid-pattern bg-grid-size">
       <Skills />
-      <Spacing size="md" />
+      </div>
+      <div className="p-28">
       <Contact />
+      </div>
       <Spacing size="md" />
-      <Footer />
     </main>
   );
 }