gfs

neerajrekwar · Jul 14, 2024 · 0979227 · 0979227
1 parent 7a715f1
commit 0979227
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 6 deletions.
diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx
@@ -23,7 +23,7 @@ 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 bg-five border-sBorder font-semibold   px-3 py-1 antialiased ">
+              <div className=" mb-4 max-w-fit rounded-full border bg-seven border-sBorder font-semibold   px-3 py-1 antialiased ">
                 2024
               </div>
             </div>
@@ -77,7 +77,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 bg-five border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
+          <div className="mb-4 max-w-fit rounded-full border bg-seven border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
             Showcase
           </div>
           <div className="grid gap-4 p-2 pt-4 sm:gap-10">

diff --git a/app/components/backgroundBeams.tsx b/app/components/backgroundBeams.tsx
@@ -91,7 +91,7 @@ export function BackgroundBeamsDemo() {
                 duration: 0.8,
                 ease: "easeInOut",
               }}
-              className="bg-secondary justify-center items-center bg-four gap-2 text-sm font-normal border-1 border-pBorder p-2 px-4 md:p-3 md:px-5 rounded-full transition-all hover:px-10 hover:bg-primary hover:text-third hover:pr-2 hover:mr-2 duration-1000  hover:bg-slate-800 hover:text-white "
+              className="bg-secondary justify-center items-center bg-four gap-2 text-sm font-normal border-1 border-pBorder p-2 px-4 md:p-3 md:px-5 rounded-full transition-all hover:px-10 hover:bg-primary hover:text-third hover:pr-2 hover:mr-2 duration-800  hover:bg-[#262626d6] hover:text-white "
             >
 
               Get started

diff --git a/app/components/typeWriter.tsx b/app/components/typeWriter.tsx
@@ -17,13 +17,13 @@ export function TypewriterEffectSmoothDemo() {
     },
     {
       text: "neeraj rekwar.",
-      className: "text-fourText",
+      className: "text-five",
     },
   ];
   return (
     <div className="flex flex-col items-center justify-center h-[40rem] ">
       <div className="flex flex-col items-center justify-center h-[40rem] w-full">
-        <p className="text-thirdText sm:text-base  ">
+        <p className="text-four sm:text-base  ">
           The road to make unique from here
         </p>
         <TypewriterEffectSmooth words={words} />

diff --git a/app/components/ui/typewriter-effect.tsx b/app/components/ui/typewriter-effect.tsx
@@ -124,7 +124,7 @@ export const TypewriterEffectSmooth = ({
               {word.text.map((char, index) => (
                 <span
                   key={`char-${index}`}
-                  className={cn(`text-thirdText `, word.className)}
+                  className={cn(`text-secondary`, word.className)}
                 >
                   {char}
                 </span>

diff --git a/app/globals.css b/app/globals.css
@@ -12,6 +12,7 @@
   --color-four: #4d5150;
   --color-five: #79a091;
   --color-six: #e6e6e6;
+  --color-seven: #79a09140;
   --font-families-secondary: 'Caveat', cursive;
 
   /* --color-primary-bg: #FFFFFF;
@@ -40,6 +41,7 @@
     --color-four: #4d5150;
     --color-five: #79a091;
     --color-six: #e6e6e6;
+    --color-seven: #79a09187;
     /* --color-primary-bg: #100c13;
     --color-secondary-bg: #7e6194;
     --color-third-bg: #d6b4ee;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -26,6 +26,7 @@ module.exports = {
         four: "var(--color-four)",
         five: "var(--color-five)",
         six: "var(--color-six)",
+        seven: "var(--color-seven)",
 
       },
       animation: {
@@ -63,6 +64,7 @@ module.exports = {
           "--color-four": theme("colors.four"),
           "--color-five": theme("colors.five"),
           "--color-six": theme("colors.six"),
+          "--color-seven": theme("colors.seven"),
         },
         "@media (prefers-color-scheme: dark)": {
           ":root": {
@@ -72,6 +74,7 @@ module.exports = {
             "--color-four": theme("colors.four"),
             "--color-five": theme("colors.five"),
             "--color-six": theme("colors.six"),
+          "--color-seven": theme("colors.seven"),
           },
         },
       });