fda

neerajrekwar · Jul 8, 2024 · 67b9692 · 67b9692
1 parent 52706fd
commit 67b9692
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 19 deletions.
diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx
@@ -22,7 +22,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-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-sBorder text-primaryText  px-3 py-1 text-sm">
                 2024
               </div>
             </div>

diff --git a/app/components/backgroundBeams.tsx b/app/components/backgroundBeams.tsx
@@ -20,10 +20,10 @@ export function BackgroundBeamsDemo() {
           }}
           className="relative z-10 md:pb-4 text-2xl sm:text-lg md:text-7xl  bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600  text-left font-sans font-bold"
         >
-
           Build the right to way <br />
           <div>
-            with <pre className="font-bold z-999 inline-flex ">
+            with{" "}
+            <pre className="font-bold z-999 inline-flex ">
               <TextFlipper />
             </pre>
           </div>
@@ -34,7 +34,7 @@ export function BackgroundBeamsDemo() {
           transition={{
             delay: 0.3,
             duration: 0.8,
-            ease: "easeInOut",
+            ease: "backIn",
           }}
           className="flex w-full flex-col items-center justify-center"
         >
@@ -49,15 +49,18 @@ export function BackgroundBeamsDemo() {
             duration: 0.8,
             ease: "easeInOut",
           }}
-          className="text-neutral-500 max-w-4xl mx-auto my-2 text-sm text-left relative z-10">
+          className="text-neutral-500 max-w-4xl mx-auto my-2 text-sm text-left 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
           covered.
         </motion.p>
-        <motion.div>
-          <Link href={'blog'}>
+        <motion.div 
+          className="text-secondaryText flex gap-2 pt-8 justify-center items-center max-w-fit"
+          >
+          <Link href={"blog"}>
             <motion.button
               initial={{ opacity: 0, y: 100 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -66,12 +69,18 @@ export function BackgroundBeamsDemo() {
                 duration: 0.8,
                 ease: "easeInOut",
               }}
-              className="rounded-full border border-neutral-800 focus:ring-2 focus:ring-teal-500  text-white px-3 py-2 text-sm relative z-10 mt-4  bg-neutral-950 placeholder:text-neutral-700"
+              className="bg-third border-2 border-tBorder rounded-full p-2"
             >
               Get started
             </motion.button>
           </Link>
-          <Link href={"https://058d7161-3d82-455c-8a08-75929c749baa-00-33ncm1e7y6818.pike.replit.dev/"} className="relative z-10 md:pb-4 text-2xl sm:text-lg md:text-7xl  bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600  text-left font-sans font-bold">
+          <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 }}
@@ -80,7 +89,7 @@ export function BackgroundBeamsDemo() {
                 duration: 0.8,
                 ease: "easeInOut",
               }}
-              className="rounded-full ml-2 text-secondary border border-neutral-800 focus:ring-2 font-medium focus:ring-teal-500  bg-white px-3 py-2 text-sm relative z-10 mt-4 "
+              className="bg-primary border-2 border-tBorder rounded-full p-2 px-3"
             >
               Learn more
             </motion.button>

diff --git a/app/components/homeSectionHeader.tsx b/app/components/homeSectionHeader.tsx
@@ -19,9 +19,9 @@ export default function HomeSectionHeader() {
         <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">
           <div className={caveat.className}>
-            <Link href={"/"} className="ml-4 text-secondaryText text-2xl sm:text-4xl md:text-5xl font-bold">
+            <Link href={"/"} className="sm:mx-8 mx-6 text-primaryText 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> */}
-              ne.
+              nee.
             </Link>
           </div>
           <div className="grid justify-items-end">

diff --git a/app/globals.css b/app/globals.css
@@ -7,15 +7,15 @@
 :root {
   --color-primary-bg: #FFFFFF;
   --color-secondary-bg: #D9D9D9;
-  --color-third-bg: #5e716a;
+  --color-third-bg: #0a0a0a;
 
-  --color-primary-text: #242424;
+  --color-primary-text: #0a0a0a;
   --color-secondary-text: #5e716a;
   --color-third-text: #709b8c;
-  --color-four-text: #0a0a0a;
+  --color-four-text: #2b312f;
 
   --color-primary-border: #e7f5f3;
-  --color-secondary-border: #3535359a;
+  --color-secondary-border: #545454;
   --color-third-border: #3535359a;
 
 }
@@ -24,8 +24,8 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --color-primary-bg: #100c13;
-    --color-secondary-bg: #32243D;
-    --color-third-bg: #472360;
+    --color-secondary-bg: #7e6194;
+    --color-third-bg: #d6b4ee;
 
     --color-primary-text: #2B2031;
     --color-secondary-text: #472360;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -22,7 +22,7 @@ module.exports = {
       colors: {
         primary: "var(--color-primary-bg)",
         secondary: "var(--color-secondary-bg)",
-        third: "var(--color-third-text)",
+        third: "var(--color-third-bg)",
         primaryText: "var(--color-primary-text)",
         thirdText: "var(--color-third-text)",
         secondaryText: "var(--color-secondary-text)",