gfds

neerajrekwar · Jul 13, 2024 · e87ae58 · e87ae58
1 parent 08a4aec
commit e87ae58
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 92 deletions.
diff --git a/app/add.css b/app/add.css
@@ -2,24 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --color-primary: #ffffff;
-  --color-secondary: #416165;
-  --color-third: #B3FFB3;
-  --color-gray-light: #D1FFD7;
-  --color-dark: #FFC800;
-  --color-dark-light: #101010;
+.button-three {
+  @apply border-none bg-transparent;
+  --button-color: #000;
 }
 
-/* Dark mode variables */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-primary: #0a0a0a;
-    --color-secondary: #3C6E71;
-    --color-white: #ffffff;
-    --color-gray-light: #D9D9D9;
-    --color-dark: #284B63;
-  }
+.button-three .hamburger {
+  transition: translate 1s, rotate 1s;
+}
+
+.button-three[aria-expanded="true"] .hamburger {
+  translate: 0px 0px;
+}
+
+.button-three .line {
+  transition: 1s;
+  stroke-dasharray: 60 31 60 300;
+}
+
+.button-three[aria-expanded="true"] .line {
+  stroke-dasharray: 60 105 60 300;
+  stroke-dashoffset: -90;
 }
 
 .workSecion{

diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx
@@ -12,9 +12,9 @@ const source_Code_Pro = Source_Code_Pro({
 
 const StickyRelativeDemo: NextPage = () => {
   return (
-    <div className="m-auto scroll-smooth  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-secondaryText font-semibold visible sm:text-4xl">
-        <div className="text-thirdText text-4xl sm:text-6xl sm:mx-2">
+    <div className="m-auto scroll-smooth text-four 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  font-semibold visible sm:text-4xl">
+        <div className="text-4xl text-third sm:text-5xl sm:mx-2">
           &#8226;
         </div>
         Recent projects
@@ -23,17 +23,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 bg-primary border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
+              <div className=" mb-4 max-w-fit rounded-full border bg-five border-sBorder font-semibold   px-3 py-1 antialiased ">
                 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-thirdText">
+                <h2 className="text-2xl py-3 pb-3 font-semibold ">
                   Craft &amp; Code: Building the Future, One Line at a Time
                 </h2>
                 <div>
-                  <p className="text-thirdText text-base">
+                  <p className="text-base">
                     Lorem ipsum dolor sit amet consectetur adipisicing elit.
                     Repudiandae quo natus accusantium eius molestiae expedita
                     possimus accusamus, aspernatur, quia quae asperiores
@@ -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-primary border-tBorder font-semibold text-thirdText  px-3 py-1 antialiased text-sm">
+          <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">
             Showcase
           </div>
           <div className="grid gap-4 p-2 pt-4 sm:gap-10">

diff --git a/app/components/TextFlipper.tsx b/app/components/TextFlipper.tsx
@@ -15,12 +15,12 @@ const TextFlipper: React.FC = () => {
   useEffect(() => {
     const interval = setInterval(() => {
       setIndex((prevIndex) => (prevIndex + 1) % words.length);
-    }, 3000); // Change word every 3 seconds
+    }, 4000); // Change word every 4 seconds
     return () => clearInterval(interval);
   }, []);
 
   return (
-<div className="inline-flex text-left md:h-20 lg:h-24 font-bold">
+<div className="inline-flex text-four text-left md:h-20 lg:h-24 font-bold">
      <div className={caveat.className}>
        <motion.div
          key={index}

diff --git a/app/components/backgroundBeams.tsx b/app/components/backgroundBeams.tsx
@@ -40,7 +40,7 @@ export function BackgroundBeamsDemo() {
             duration: 0.8,
             ease: "easeInOut",
           }}
-          className="relative text-four font-bold z-10 md:pb-4 text-3xl sm:text-lg md:text-7xl  text-left "
+          className="relative text-secondary font-bold z-10 md:pb-4 text-2xl sm:text-lg md:text-7xl  text-left"
         >
           Build the right to way <br />
           <div>
@@ -62,20 +62,18 @@ export function BackgroundBeamsDemo() {
         >
 
         </motion.div>
-        <motion.p
+        <motion.p 
           initial={{ opacity: 0, y: 100 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{
             delay: 0.3,
             duration: 0.8,
             ease: "easeInOut",
           }}
-          className="text-thirdText font-semibold mx-auto my-2 text-sm text-left relative z-10"
+          className="text-four  mx-auto my-2 text-sm sm:text-base relative z-10"
         >
-          Welcome to MailJet, the best transactional email service on the web.
-          We provide reliable, scalable, and customizable email solutions for
-          your business. Whether you&apos;re sending order confirmations,
-          password reset emails, or promotional campaigns, MailJet has got you
+          We could be best on the web, We provide reliable, scalable, and customizable web solutions for
+          your business. Whether you&apos;re sending order any bug fix in your web, or tools, nee. has got you
           covered.
         </motion.p>
 
@@ -93,7 +91,7 @@ export function BackgroundBeamsDemo() {
                 duration: 0.8,
                 ease: "easeInOut",
               }}
-              className="bg-secondary  justify-center items-center gap-2 text-Text  font-normal border-1 border-pBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
+              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"
             >
 
               Get started
@@ -112,7 +110,7 @@ export function BackgroundBeamsDemo() {
                 duration: 0.8,
                 ease: "easeInOut",
               }}
-              className=" bg-primary justify-center items-center gap-2 text-thirdText  font-normal border-2 border-fBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
+              className=" bg-primary justify-center items-center gap-2 text-secondary text-capitlize font-semibold text-sm border-2 border-fBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
             >
 
               Explore more

diff --git a/app/components/homeSectionHeader.tsx b/app/components/homeSectionHeader.tsx
@@ -17,9 +17,9 @@ export default function HomeSectionHeader() {
     <header className="min-h-screen text-primary overflow-hidden">
       <div className="">
         <BackgroundBeamsDemo />
-        <span className="absolute w-full opacity-75 flex justify-between text-[.6rem] md:text-[.5rem] lg:text-[.7rem] top-2 text-white z-999  text-right top-2 right-2">
+        <span className="absolute w-full opacity-75 flex justify-between text-[.6rem] md:text-[.5rem] lg:text-[.7rem] top-2 text-four z-999  text-right top-2 right-2">
           <div className={caveat.className}>
-            <Link href={"/"} className="sm:mx-8 mx-6 text-primaryText text-3xl sm:text-4xl md:text-5xl font-bold">
+            <Link href={"/"} className="sm:mx-8 mx-6 text-secondary text-3xl sm:text-4xl md:text-5xl font-bold">
               {/* <i className="bg-white px-[.2rem] my-1 h-[3rem] rounded  border text-black not-italic"></i> */}
               nee.
             </Link>

diff --git a/app/globals.css b/app/globals.css
@@ -1,27 +1,17 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import './add.css';
+@import 'add.css';
 
 @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
 
-
 :root {
-  --color-primary-bg: #FFFFFF;
-  --color-secondary-bg: #0a0a0a;
-  --color-third-bg: #5e716a;
-  --color-four-bg: #4d5150;
-  --color-five-bg: #eeeded;
-
-  --color-primary-text: #0a0a0a;
-  --color-secondary-text: #d9d9d9;
-  --color-third-text: #4d5150;
-  --color-four-text: #E2C044;
-  --color-five-text: #79a091;
-
-  --color-primary-border: #d1e5e0;
-  --color-secondary-border: #d9d9d9;
-  --color-third-border: #E2C044;
+  --color-primary: #FFFFFF;
+  --color-secondary: #262626;
+  --color-third: #2cffbf;
+  --color-four: #4d5150;
+  --color-five: #79a091;
+  --color-six: #e6e6e6;
   --font-families-secondary: 'Caveat', cursive;
 
   /* --color-primary-bg: #FFFFFF;
@@ -75,7 +65,28 @@
 
   }
 }
+.button-three {
+  @apply border-none bg-transparent;
+  --button-color: #000;
+}
+
+.button-three .hamburger {
+  transition: translate 1s, rotate 1s;
+}
 
+.button-three[aria-expanded="true"] .hamburger {
+  translate: 0px 0px;
+}
+
+.button-three .line {
+  transition: 1s;
+  stroke-dasharray: 60 31 60 300;
+}
+
+.button-three[aria-expanded="true"] .line {
+  stroke-dasharray: 60 105 60 300;
+  stroke-dashoffset: -90;
+}
 
 /* Additional custom styles */
 .flipper {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,26 +13,20 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./node_modules/@nextui-org/theme/dist/components/[object Object].js",
   ],
-  darkMode: ["class","selector"],
+  darkMode: ["class", "selector"],
   theme: {
     extend: {
       backgroundImage: {
-        'custom-image': "url('/projects/kukai-art-mmkzdAN_jzQ-unsplash.jpg')",
+        "custom-image": "url('/projects/kukai-art-mmkzdAN_jzQ-unsplash.jpg')",
       },
       colors: {
-        primary: "var(--color-primary-bg)",
-        secondary: "var(--color-secondary-bg)",
-        third: "var(--color-third-bg)",
-        four: "var(--color-four-bg)",
-        five: "var(--color-five-bg)",
-        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)",
+        primary: "var(--color-primary)",
+        secondary: "var(--color-secondary)",
+        third: "var(--color-third)",
+        four: "var(--color-four)",
+        five: "var(--color-five)",
+        six: "var(--color-six)",
+
       },
       animation: {
         aurora: "aurora 60s linear infinite",
@@ -63,33 +57,21 @@ module.exports = {
     plugin(function ({ addBase, theme }) {
       addBase({
         ":root": {
-          "--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-five-bg": theme("colors.five"),
-          "--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-primary": theme("colors.primary"),
+          "--color-secondary": theme("colors.secondary"),
+          "--color-third": theme("colors.third"),
+          "--color-four": theme("colors.four"),
+          "--color-five": theme("colors.five"),
+          "--color-six": theme("colors.six"),
         },
         "@media (prefers-color-scheme: dark)": {
           ":root": {
-              "--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-five-bg": theme("colors.five"),
-              "--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-primary": theme("colors.primary"),
+            "--color-secondary": theme("colors.secondary"),
+            "--color-third": theme("colors.third"),
+            "--color-four": theme("colors.four"),
+            "--color-five": theme("colors.five"),
+            "--color-six": theme("colors.six"),
           },
         },
       });