✨Removed white lines from 'AI' on landing (#1090)

* ✨fixed banner badge on landing

* 🎠 added left button to landing carousel

* ⚪ remove thin white line from AI

* 📏  fix height on HeroCards

* ◀️ fix mask on chevrons (reduced opacity)

* 💰 resized pre-seed banner badge

* 🔙 removed sparkles from pre-seed banner

* ✨remove opacity change on nav button hover

* ✨reduce font weight on investors / waitlist

* 🎨 nav bar contact us button bolded

* ✨Update Hero.tsx

* 📈 description font-weight increased

* Update next/src/styles/globals.css

---------

Co-authored-by: Adam Watkins <[email protected]>

next/src/components/BannerBadge.tsx

@@ -10,12 +10,11 @@ const BannerBadge = ({ children, className, ...props }: BadgeProps) => (
   <div className="rounded-full bg-gradient-to-tl from-[#A02BFE] via-[#02FCF1] to-[#A02BFE] p-[1px] subpixel-antialiased">
     <a
       className={clsx(
-        "animate-border-pulse py group relative flex w-max cursor-pointer items-center gap-2 rounded-full bg-black px-4 py-2 text-sm text-white",
+        "animate-border-pulse py group relative flex w-max cursor-pointer items-center gap-2 rounded-full bg-black px-4 py-2 text-xs text-white",
         className
       )}
       {...props}
     >
-      <IoSparkles />
       <span>{children}</span>
       <FaChevronRight
         size={10}

next/src/components/HeroCard.tsx

@@ -16,7 +16,7 @@ const HeroCard: React.FC<HeroCardProps> = ({ title, subtitle, leftIcon, onClick
     <div
       className={clsx(
         "flex flex-row items-center justify-center",
-        "max-h-20 w-72 p-3",
+        "max-h-16 w-72 p-3",
         "border-gradient rounded-full",
         "-z-10"
       )}

next/src/components/NavBar.tsx

@@ -61,7 +61,7 @@ export default function NavBar() {
                       key={item.name}
                       href={item.href}
                       className={clsx(
-                        "after-gradient relative flex flex-col items-center justify-center p-2 px-4 text-center font-inter text-sm tracking-normal transition-colors duration-700 before:absolute before:-bottom-[20px] before:-z-20 before:h-6 before:w-12 before:bg-white/60 before:blur-lg before:transition-opacity before:duration-700 after:absolute after:-bottom-[2.25px] after:h-[1px] after:w-16 after:px-2 after:transition-opacity after:duration-700  hover:text-white hover:before:opacity-100 hover:after:opacity-100",
+                        "after-gradient relative flex flex-col items-center justify-center p-2 px-4 text-center font-inter text-sm tracking-normal transition-colors duration-700 before:absolute before:-bottom-[20px] before:-z-20 before:h-6 before:w-12 before:bg-white/60 before:blur-lg before:transition-opacity before:duration-700 after:absolute after:-bottom-[2.25px] after:h-[1px] after:w-16 after:px-2 after:transition-opacity after:duration-700  hover:text-white",
                         currentIndex !== i && "text-white/50 before:opacity-0 after:opacity-0"
                       )}
                       onMouseEnter={() => setHoveredButtonIndex(i)}
@@ -95,7 +95,7 @@ export default function NavBar() {
                     <span>Contact Us</span>
                     <FaChevronRight
                       size="12"
-                      className="text-gray-400 transition-transform group-hover:translate-x-1"
+                      className="text-gray-700 transition-transform group-hover:translate-x-1"
                     />
                   </>
                 </PrimaryButton>

next/src/components/landing/Backing.tsx

@@ -24,15 +24,15 @@ const Backing = (props: { className?: string }) => (
       </div>
       <div className="hidden tracking-wide sm:flex">Backed By</div>
       <a
-        className="flex cursor-pointer flex-row items-center gap-1 font-medium text-white/95"
+        className="flex cursor-pointer flex-row items-center gap-1 font-light text-white/95"
         href="https://www.ycombinator.com/companies/reworkd"
         target="_blank"
       >
         Y Combinator
       </a>
       <span>and</span>
       <a
-        className="cursor-pointer font-medium text-white/95"
+        className="cursor-pointer font-light text-white/95"
         href="https://www.panache.vc/"
         target="_blank"
       >

next/src/components/landing/Hero.tsx

@@ -74,7 +74,7 @@ const Hero: React.FC<{ className?: string }> = ({ className }) => {
                 </span>
               </div>
             </h1>
-            <p className="my-3 inline-block bg-gradient-to-r from-white via-white via-50% to-neutral-500 bg-clip-text text-center align-top font-inter font-light leading-[24px] tracking-[.08rem] text-transparent sm:w-4/5 md:text-left">
+            <p className="my-3 inline-block bg-gradient-to-r from-white via-white via-50% to-neutral-500 bg-clip-text text-center align-top font-inter font-[400] leading-[24px] tracking-[.08rem] text-transparent sm:w-4/5 md:text-left">
               Leverage AI Agents to automate the workflows you once spent countless human hours on.
               Experience a new way of working.
             </p>
@@ -83,7 +83,7 @@ const Hero: React.FC<{ className?: string }> = ({ className }) => {
           <div className="relative hidden w-full items-center sm:max-w-[40em] md:flex">
             <button
               onClick={() => handleSliderButtonLeft(1)}
-              className="group absolute left-0 -translate-x-5 z-30 flex h-6 w-8 items-center justify-center rounded-full border border-white/20 bg-black bg-gradient-to-r from-white/10 to-black hover:border-white/30"
+              className="group absolute left-0 -translate-x-5 z-30 flex h-6 w-8 items-center justify-center rounded-full border border-white/20 bg-black bg-gradient-to-r from-white/10 to-black hover:border-white/30 opacity-75"
             >
               <FaChevronLeft
                 size={10}
@@ -115,7 +115,7 @@ const Hero: React.FC<{ className?: string }> = ({ className }) => {
             />
             <button
               onClick={() => handleSliderButtonRight(1)}
-              className="group absolute right-10 z-30 flex h-6 w-8 items-center justify-center rounded-full border border-white/20 bg-black bg-gradient-to-r from-white/10 to-black hover:border-white/30"
+              className="group absolute right-10 z-30 flex h-6 w-8 items-center justify-center rounded-full border border-white/20 bg-black bg-gradient-to-r from-white/10 to-black hover:border-white/30 opacity-75"
             >
               <FaChevronRight
                 size={10}
@@ -133,7 +133,7 @@ const Hero: React.FC<{ className?: string }> = ({ className }) => {
                 }}
               >
                 <>
-                  <span className="py-2 font-semibold">Join the Waitlist</span>
+                  <span className="py-2 font-medium">Join the Waitlist</span>
                   <FaChevronRight
                     size="10"
                     className="text-gray-400 transition-transform group-hover:translate-x-1"

next/src/styles/globals.css

@@ -8,7 +8,6 @@ body {
 
 .resend-font-effect-hero {
     /* #Resend */
-    -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.3);
     -webkit-text-fill-color: transparent;
     text-shadow: -1px -1px 0 hsla(0, 0%, 100%, .15), 1px 1px 0 rgba(0, 0, 0, .1);
 }