chore: update styles and layout

- Update hero section with new styles and animations - Modify app layout with background color sections - Adjust nav item styles for active state - Optimize image assets with brightness and invert filters
ikumar200 · Jan 3, 2025 · 4122472 · 4122472
1 parent ec7a914
commit 4122472
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 15 deletions.
diff --git a/public/yc.png b/public/yc.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,7 @@ import { InstallTabs } from "./Install"
 
 export default function App() {
   return (
-    <div className="max-w-6xl mx-auto">
+    <div className="">
 
       <div className="relative min-h-screen">
         {/* Stars as background */}
@@ -22,11 +22,16 @@ export default function App() {
         </div>
 
         {/* Main content */}
-        <div className="relative z-10 container mx-auto px-4 md:px-8">
-          <Hero />
+        <div className="relative z-10">
+          <div className="container mx-auto">
+            <Hero />
+          </div>
 
-          <div className="space-y-32 md:space-y-48 lg:space-y-64">
+          <div className="bg-[#0A0A1F] w-full">
             <Step123 />
+          </div>
+
+          <div className="space-y-32 md:space-y-48 lg:space-y-64">
 
             <DeploymentSteps />
 

diff --git a/src/Hero.tsx b/src/Hero.tsx
@@ -72,7 +72,7 @@ export default function Hero() {
             ))}
           </div> */}
         </motion.div>
-        <div>
+        <div className="">
           <Link to="https://calendly.com/founders-asteroid-hhaf/30min">
             <Button
               size="lg"
@@ -87,9 +87,13 @@ export default function Hero() {
                 "overflow-hidden"
               )}
             >
-              <span className="relative z-10 flex items-center font-bold tracking-wide">
+              <span className="relative z-10 flex items-center gap-2 font-semibold tracking-wide transition-all duration-700">
                 Book a demo
-                <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform duration-300" size={20} />
+                <img
+                  src="/favicon/favicon-32x32.png"
+                  alt="Asteroid Logo"
+                  className="w-6 h-6 group-hover:rotate-[360deg] transition-transform duration-700 ease-in-out"
+                />
               </span>
             </Button>
           </Link>
@@ -108,15 +112,15 @@ export default function Hero() {
             <img
               src="/yc.png"
               alt="Y Combinator"
-              className="h-8"
+              className="h-8 brightness-0 invert"
             />
           </motion.div>
         </div>
 
-      </div>
+      </div >
 
       {/* Scroll indicator */}
-      <div className="absolute bottom-16 w-full flex justify-center">
+      < div className="absolute bottom-16 w-full flex justify-center" >
         <ChevronDown
           size={48}
           className="text-white/50 hover:text-white/70 transition-colors cursor-pointer animate-bounce"
@@ -127,8 +131,8 @@ export default function Hero() {
             });
           }}
         />
-      </div>
-    </div>
+      </div >
+    </div >
   )
 }
 
diff --git a/src/Nav.tsx b/src/Nav.tsx
@@ -95,15 +95,17 @@ const NavItem = ({ item, index, mobile = false, onClick }: {
         to={item.href}
         className={cn(
           navigationMenuTriggerStyle(),
-          "bg-transparent text-white hover:text-white/80 hover:bg-transparent data-[state=open]:bg-transparent active:bg-transparent focus:bg-transparent focus:outline-none"
+          "bg-transparent text-white hover:text-white/80 hover:bg-transparent data-[state=open]:bg-transparent active:bg-transparent focus:bg-transparent focus:outline-none",
+          "hover:bg-transparent active:bg-transparent focus:bg-transparent active:text-white",
+          "data-[active]:bg-transparent data-[state=open]:bg-transparent"
         )}
         initial="initial"
         animate="animate"
         whileHover="hover"
         variants={navItemVariants}
         custom={index}
       >
-        <motion.div {...iconMotionProps} className="flex items-center gap-2">
+        <motion.div {...iconMotionProps} className="flex items-center gap-2 text-white">
           <div>
 
             <item.icon className="h-4 w-4" />
@@ -197,7 +199,7 @@ export default function Nav() {
               "overflow-hidden"
             )}
           >
-            <span className="relative z-10 flex items-center font-bold tracking-wide">
+            <span className="relative z-10 flex items-center font-semibold tracking-wide">
               Book a demo
               <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform duration-300" size={16} />
             </span>