From d413fa8f897ae45988ab430f879d31c9abeb91e7 Mon Sep 17 00:00:00 2001
From: Neeraj Rekwar <88387699+neerajrekwar@users.noreply.github.com>
Date: Tue, 9 Jul 2024 14:03:00 +0000
Subject: [PATCH] gfsd

---
 app/components/DeviceAddress.tsx      | 14 +++--
 app/components/StickyRelativeDemo.tsx | 76 ++++++++++++++++++---------
 app/components/backgroundBeams.tsx    | 67 +++++++++++++++--------
 app/components/reviewSection.tsx      | 14 +++--
 app/globals.css                       | 33 +++++++++---
 app/layout.tsx                        |  2 +-
 app/page.tsx                          |  4 ++
 tailwind.config.ts                    | 38 ++++++++++----
 8 files changed, 168 insertions(+), 80 deletions(-)

diff --git a/app/components/DeviceAddress.tsx b/app/components/DeviceAddress.tsx
index 89ef0be61..b02fa023e 100644
--- a/app/components/DeviceAddress.tsx
+++ b/app/components/DeviceAddress.tsx
@@ -1,6 +1,6 @@
 // components/DeviceAddress.tsx
-'use client';
-import { useEffect, useState } from 'react';
+"use client";
+import { useEffect, useState } from "react";
 
 type DeviceAddress = {
   ip: string;
@@ -16,9 +16,9 @@ const DeviceAddress: React.FC = () => {
   useEffect(() => {
     const fetchDeviceAddress = async () => {
       try {
-        const response = await fetch('https://ipapi.co/json/');
+        const response = await fetch("https://ipapi.co/json/");
         if (!response.ok) {
-          throw new Error('Failed to fetch device address');
+          throw new Error("Failed to fetch device address");
         }
         const data: DeviceAddress = await response.json();
         setAddress(data);
@@ -38,13 +38,11 @@ const DeviceAddress: React.FC = () => {
             <p>Error: {error}</p>
           </div>
         ) : address ? (
-          <div>
+          <div className="flex gap-1 text-primaryText font-semibold">
             {/* <h2 className="text-2xl font-bold mb-4 text-center">Device Address</h2> */}
             {/* <p className="text-lg"><strong>IP:</strong> {address.ip}</p> */}
-            <p className=""> {address.city}</p>
-            <p className=""> {address.region}</p>
+            <p className=""> {address.city},</p>
             <p className=""> {address.country}</p>
-            
           </div>
         ) : (
           <div className="text-center">
diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx
index 73558cff3..a1f144928 100644
--- a/app/components/StickyRelativeDemo.tsx
+++ b/app/components/StickyRelativeDemo.tsx
@@ -4,17 +4,18 @@ import Image from "next/image";
 import Link from "next/link";
 import { Source_Code_Pro } from "next/font/google";
 
-
 const source_Code_Pro = Source_Code_Pro({
-  weight: '400',
-  subsets: ['latin'],
+  weight: "400",
+  subsets: ["latin"],
 });
 
 const StickyRelativeDemo: NextPage = () => {
   return (
     <div className="m-auto justify-between p-2 max-h-fit max-w-6xl">
-      <div className="justify-start text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-primaryText visible sm:text-4xl">
-        <div className="text-secondaryText text-4xl sm:text-6xl sm:mx-2">&#8226;</div>
+      <div className="justify-start text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-secondaryText font-semibold visible sm:text-4xl">
+        <div className="text-thirdText text-4xl sm:text-6xl sm:mx-2">
+          &#8226;
+        </div>
         Recent projects
       </div>
 
@@ -22,16 +23,16 @@ const StickyRelativeDemo: NextPage = () => {
         <div className="relative visible  top-0 flex min-h-full basis-1/2 flex-col justify-between  border-rose-500 sm:gap-10">
           <div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center  border-green-500">
             <div className="flex flex-wrap border-yellow-400">
-              <div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-sBorder text-primaryText  px-3 py-1 text-sm">
+              <div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
                 2024
               </div>
             </div>
             <div className="border-yellow-400 sm:pr-10">
               <div className="max-w-2xl">
-                <h2 className="text-2xl py-2 pb-3 font-semibold text-primaryText">
+                <h2 className="text-2xl py-2 pb-3 font-semibold text-secondaryText">
                   Craft &amp; Code: Building the Future, One Line at a Time
                 </h2>
-                <div >
+                <div>
                   <p className="text-secondaryText text-base">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
                     Repudiandae quo natus accusantium eius molestiae expedita
@@ -42,23 +43,34 @@ const StickyRelativeDemo: NextPage = () => {
                 </div>
               </div>
               <div className="text-sm  pt-12 ">
-                <ul className=" flex justify-between font-semibold text-secondaryText py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Role</li>
                   <li>Digital Marketing</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
-                  <li className="text-secondaryText font-normal">Deliverables</li>
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
+                  <li className="text-secondaryText font-normal">
+                    Deliverables
+                  </li>
                   <li>Survey checks</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Company</li>
                   <li>VMR</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Visit Site</li>
                   <li className="px-2">
                     <Link href="https://veecrew.com" className="">
-                      <svg xmlns="http://www.w3.org/2000/svg" className="fill-secondaryText hover:fill-third" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" /></svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="fill-secondaryText hover:fill-third"
+                        height="24px"
+                        viewBox="0 -960 960 960"
+                        width="24px"
+                        fill="#5f6368"
+                      >
+                        <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
+                      </svg>
                     </Link>
                   </li>
                 </ul>
@@ -67,7 +79,7 @@ const StickyRelativeDemo: NextPage = () => {
           </div>
         </div>
         <div className="relative basis-1/2 pt-10 overflow-hidden  border-rose-500">
-          <div className=" mb-4 max-w-fit rounded-full border-2 bg-secondary border-pBorder text-primaryText  px-3 py-1 text-sm">
+          <div className="mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
             Showcase
           </div>
           <div className="grid gap-4 p-2 pt-4 sm:gap-10">
@@ -99,17 +111,17 @@ const StickyRelativeDemo: NextPage = () => {
         <div className="relative visible  top-0 flex min-h-full basis-1/2 flex-col justify-between  border-rose-500 sm:gap-10">
           <div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center  border-green-500">
             <div className="flex flex-wrap border-yellow-400">
-              <div className=" mb-4 max-w-fit rounded-full border-2 bg-secondary border-pBorder text-primaryText  px-3 py-1 text-sm">
+              <div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
                 2024
               </div>
             </div>
             <div className="border-yellow-400 sm:pr-10">
               <div className="max-w-2xl">
-                <h2 className="text-2xl py-2 pb-3 font-semibold text-primaryText">
+                <h2 className="text-2xl py-2 pb-3 font-semibold text-secondaryText">
                   Craft &amp; Code: Building the Future, One Line at a Time
                 </h2>
-                <div >
-                  <p className="text-secondaryText text-base">
+                <div>
+                  <p className="text-fourText text-base">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
                     Repudiandae quo natus accusantium eius molestiae expedita
                     possimus accusamus, aspernatur, quia quae asperiores
@@ -119,23 +131,34 @@ const StickyRelativeDemo: NextPage = () => {
                 </div>
               </div>
               <div className="text-sm  pt-12 ">
-                <ul className=" flex justify-between font-semibold text-secondaryText py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Role</li>
                   <li>Digital Marketing</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
-                  <li className="text-secondaryText font-normal">Deliverables</li>
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
+                  <li className="text-secondaryText font-normal">
+                    Deliverables
+                  </li>
                   <li>Survey checks</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Company</li>
                   <li>VMR</li>
                 </ul>
-                <ul className="flex justify-between font-semibold py-6 border-b-1 border-pBorder">
+                <ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
                   <li className="text-secondaryText font-normal">Visit Site</li>
                   <li className="px-2">
                     <Link href="https://veecrew.com" className="">
-                      <svg xmlns="http://www.w3.org/2000/svg" className="fill-secondaryText hover:fill-third" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" /></svg>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="fill-secondaryText hover:fill-third"
+                        height="24px"
+                        viewBox="0 -960 960 960"
+                        width="24px"
+                        fill="#5f6368"
+                      >
+                        <path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
+                      </svg>
                     </Link>
                   </li>
                 </ul>
@@ -144,7 +167,7 @@ const StickyRelativeDemo: NextPage = () => {
           </div>
         </div>
         <div className="relative basis-1/2 pt-10 overflow-hidden  border-rose-500">
-          <div className=" mb-4 max-w-fit rounded-full border-2 bg-secondary border-pBorder text-primaryText  px-3 py-1 text-sm">
+          <div className="mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-fourText  px-3 py-1 text-sm">
             Showcase
           </div>
           <div className="grid gap-4 p-2 pt-4 sm:gap-10">
@@ -174,6 +197,7 @@ const StickyRelativeDemo: NextPage = () => {
       </div>
       
       
+      
     </div>
   );
 };
diff --git a/app/components/backgroundBeams.tsx b/app/components/backgroundBeams.tsx
index 1037b9947..3052553bf 100644
--- a/app/components/backgroundBeams.tsx
+++ b/app/components/backgroundBeams.tsx
@@ -3,13 +3,33 @@ import React from "react";
 import { motion } from "framer-motion";
 import { BackgroundBeams } from "./ui/background-beams";
 import TextFlipper from "./TextFlipper";
-import AdminWeather from "./AdminWeather";
 import Link from "next/link";
+import Image from "next/image";
 
 export function BackgroundBeamsDemo() {
   return (
     <div className="min-h-screen w-full bg-primary relative flex flex-col items-start justify-center antialiased">
       <div className="max-w-6xl text-left mx-auto p-4">
+        {/* <motion.div className="gap-2 flex  flex-row justify-start items-center  text-secondaryText text-semibold">
+          <Image
+            src={"/me.jpg"}
+            width={24}
+            height={24}
+            alt="Digital marketing for expert"
+            className="aspact-square h-10 w-10 rounded-full"
+          />
+          <div className="font-semibold text-secondaryText">
+            <p>Neeraj Rekwar</p>
+            <div className="flex gap-1 h-4">
+              <p className="text-thirdText flex flex-row justify-start items-center text-3xl">
+                &#8226;
+              </p>
+              <p className="text-secondaryText flex flex-row justify-start items-center font-normal text-sm">
+                Available for freelance work
+              </p>
+            </div>
+          </div>
+        </motion.div> */}
         <motion.h1
           initial={{ opacity: 0, y: 100 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -37,9 +57,7 @@ export function BackgroundBeamsDemo() {
             ease: "backIn",
           }}
           className="flex w-full flex-col items-center justify-center"
-        >
-          <AdminWeather />
-        </motion.div>
+        ></motion.div>
         <p></p>
         <motion.p
           initial={{ opacity: 0, y: 100 }}
@@ -58,29 +76,32 @@ export function BackgroundBeamsDemo() {
           covered.
         </motion.p>
         <motion.div 
-          className="text-secondaryText flex gap-2 pt-8 justify-center items-center max-w-fit"
+          initial={{ opacity: 0, y: 100 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{
+            delay: 0.3,
+            duration: 0.6,
+            ease: "easeInOut",
+          }}
+          className="flex mt-8 gap-2 max-w-fit text-secondaryText">
+          <motion.button
+            initial={{ opacity: 0, y: 100 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{
+              delay: 0.3,
+              duration: 0.8,
+              ease: "easeInOut",
+            }}
+            className="bg-third text-thirdText border-2 border-fBorderp-1 px-3 md:p-2 md:px-4 rounded-full text-secondaryText"
           >
-          <Link href={"blog"}>
-            <motion.button
-              initial={{ opacity: 0, y: 100 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{
-                delay: 0.3,
-                duration: 0.8,
-                ease: "easeInOut",
-              }}
-              className="bg-third border-2 border-tBorder rounded-full p-2"
-            >
-              Get started
-            </motion.button>
-          </Link>
+            Get started
+          </motion.button>
           <Link
             href={
               "https://058d7161-3d82-455c-8a08-75929c749baa-00-33ncm1e7y6818.pike.replit.dev/"
             }
             className=""
           >
-            
             <motion.button
               initial={{ opacity: 0, y: 100 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -89,9 +110,9 @@ export function BackgroundBeamsDemo() {
                 duration: 0.8,
                 ease: "easeInOut",
               }}
-              className="bg-primary border-2 border-tBorder rounded-full p-2 px-3"
-            >
-              Learn more
+              className="bg-secondary border-2 border-tBorder text-base p-1 px-3 md:p-2 md:px-4 rounded-full text-fourText"
+              > {/*  ▲ Next.js 14.2.3 */}
+              Let's talk
             </motion.button>
           </Link>
         </motion.div>
diff --git a/app/components/reviewSection.tsx b/app/components/reviewSection.tsx
index 96d828606..100ed1e58 100644
--- a/app/components/reviewSection.tsx
+++ b/app/components/reviewSection.tsx
@@ -1,13 +1,21 @@
 import { InfiniteMovingCardsDemo } from "./infiniteCard";
+import { motion } from "framer-motion";
 
 export function ReviewSection() {
     return (
         <>
-            <div className="justify-start m-auto max-w-6xl text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-primaryText visible sm:text-4xl">
-                <div className="text-secondaryText text-4xl sm:text-6xl sm:mx-2">&#8226;</div>
+            <div className="justify-start text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-secondaryText font-semibold visible sm:text-4xl">
+                <div className="text-thirdText text-4xl sm:text-6xl sm:mx-2">
+                  &#8226;
+                </div>
                 Recent projects
+              </div>
+            <div 
+              className="border-2 border-sBorder max-w-fit"
+              >
+             
             </div>
             <InfiniteMovingCardsDemo />
         </>
     );
-};
\ No newline at end of file
+}
diff --git a/app/globals.css b/app/globals.css
index 6c3fbdf04..b878b0775 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,24 +6,41 @@
 @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
 :root {
   --color-primary-bg: #FFFFFF;
-  --color-secondary-bg: #D9D9D9;
+  --color-secondary-bg: #cdf4e6;
   --color-third-bg: #0a0a0a;
+  --color-four-bg: #79a091;
   
   --color-primary-text: #0a0a0a;
-  --color-secondary-text: #5e716a;
-  --color-third-text: #709b8c;
-  --color-four-text: #2b312f;
+  --color-secondary-text: #4d5150;
+  --color-third-text: #d9d9d9;
+  --color-four-text: #464e4b;
 
   --color-primary-border: #e7f5f3;
-  --color-secondary-border: #545454;
-  --color-third-border: #3535359a;
+  --color-secondary-border: #abd4c5;
+  --color-third-border: #79a091;
+  --color-four-border: #cdf4e6;
 
 }
 
 /* Dark mode variables */
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-primary-bg: #100c13;
+    --color-primary-bg: #0a0a0a;
+    --color-secondary-bg: #D9D9D9;
+    --color-third-bg: #FFFFFF;
+     --color-four-bg: #709b8c;
+
+    --color-primary-text: #0a0a0a;
+    --color-secondary-text: #709b8c;
+    --color-third-text: #5e716a;
+    --color-four-text: #2b312f;
+
+    --color-third-border: #e7f5f3;
+    --color-secondary-border: #abd4c5;
+    --color-primary-border: #3535359a;
+    --color-four-border: #b7d2c7;
+    
+    /* --color-primary-bg: #100c13;
     --color-secondary-bg: #7e6194;
     --color-third-bg: #d6b4ee;
 
@@ -34,7 +51,7 @@
     --color-primary-border: #705D97;
     --color-secondary-border: #47236067; 
     --color-third-border: #47236067; 
- 
+  */
 
   
   }
diff --git a/app/layout.tsx b/app/layout.tsx
index 209a8f42c..92c3b0780 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,7 +10,7 @@ const dm_Sans = DM_Sans({
   subsets: ['latin'],
 });
 
-const source_Code_Pro = Source_Code_Pro({
+const alata = Alata({
   weight: '400',
   subsets: ['latin'],
 });
diff --git a/app/page.tsx b/app/page.tsx
index 72d0e73b9..18cae68a8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,6 +5,7 @@ import IntroSection from "./components/introSection";
 import DeviceAddress from "./components/DeviceAddress";
 import { InfiniteMovingCardsDemo } from "./components/infiniteCard";
 import { ReviewSection } from "./components/reviewSection";
+import DarkModeToggle from "./components/DarkModeToggle";
 
 export const metadata: Metadata = {
   title: "nee. - Portfolio Framer Template For Freelancers",
@@ -25,6 +26,9 @@ export default function Home() {
        <ReviewSection/>
       </section>
       <section className="h-screen flex flex-col justify-center items-center">
+        <div>
+         <DarkModeToggle/>
+        </div>
         Vision to learn
       </section>
       <div className="flex flex-col bg-primary items-center justify-center min-h-screen py-2">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1da9dcce4..ebeb26a58 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./node_modules/@nextui-org/theme/dist/components/[object Object].js",
   ],
-  darkMode:  "class",
+  darkMode: ["class","selector"],
   theme: {
     extend: {
       backgroundImage: {
@@ -26,9 +26,11 @@ module.exports = {
         primaryText: "var(--color-primary-text)",
         thirdText: "var(--color-third-text)",
         secondaryText: "var(--color-secondary-text)",
+        fourText: "var(--color-four-text)",
         pBorder: "var(--color-primary-border)",
         sBorder: "var(--color-secondary-border)",
         tBorder: "var(--color-third-border)",
+        fBorder: "var(--color-four-border)",
       },
       animation: {
         aurora: "aurora 60s linear infinite",
@@ -59,19 +61,33 @@ module.exports = {
     plugin(function ({ addBase, theme }) {
       addBase({
         ":root": {
-          "--color-primary": theme("colors.primary"),
-          "--color-secondary": theme("colors.secondary"),
-          "--color-white": theme("colors.white"),
-          "--color-gray-light": theme("colors.grayLight"),
-          "--color-dark": theme("colors.dark"),
+          "--color-primary-bg": theme("colors.primary"),
+          "--color-secondary-bg": theme("colors.secondary"),
+          "--color-third-bg": theme("colors.third"),
+          "--color-four-bg": theme("colors.four"),
+          "--color-primary-text": theme("colors.primaryText"),
+          "--color-secondary-text": theme("colors.seconadaryText"),
+          "--color-third-text": theme("colors.thirdText"),
+          "--color-four-text": theme("colors.fourText"),
+          "--color-primary-border": theme("colors.pBorder"),
+          "--color-secondary-border": theme("colors.sBorder"),
+          "--color-third-border": theme("colors.tBorder"),
+          "--color-four-border": theme("colors.fBorder"),
         },
         "@media (prefers-color-scheme: dark)": {
           ":root": {
-            "--color-primary": theme("colors.secondary"),
-            "--color-secondary": theme("colors.dark"),
-            "--color-white": theme("colors.primary"),
-            "--color-gray-light": theme("colors.primary"),
-            "--color-dark": theme("colors.grayLight"),
+            "--color-primary-bg": theme("colors.primary"),
+              "--color-secondary-bg": theme("colors.secondary"),
+              "--color-third-bg": theme("colors.third"),
+              "--color-four-bg": theme("colors.four"),
+              "--color-primary-text": theme("colors.primaryText"),
+              "--color-secondary-text": theme("colors.seconadaryText"),
+              "--color-third-text": theme("colors.thirdText"),
+              "--color-four-text": theme("colors.fourText"),
+              "--color-primary-border": theme("colors.pBorder"),
+              "--color-secondary-border": theme("colors.sBorder"),
+              "--color-third-border": theme("colors.tBorder"),
+              "--color-four-border": theme("colors.fBorder"),
           },
         },
       });