Refine hero section design

Author: lovable-dev[bot]

src/components/Hero.tsx

@@ -16,77 +16,87 @@ const Hero: React.FC = () => {
     if (spacesSection) spacesSection.scrollIntoView({ behavior: 'smooth' });
   };
 
-  if (!mounted) return null; // ✅ Eliminado flash "loading..."
+  if (!mounted) return null;
 
   return (
-    <section className="relative flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] py-16 overflow-hidden">
-      {/* Fondo de estrellas */}
-      <div className="absolute inset-0 bg-stars bg-cover bg-center opacity-40"></div>
+    <section className="relative flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] py-12 sm:py-16 overflow-hidden">
+      {/* Background layers */}
+      <div className="absolute inset-0 bg-stars bg-cover bg-center opacity-30"></div>
       <div className="absolute inset-0 bg-glow-radial"></div>
 
-      <div className="container relative z-10 px-4 mx-auto text-center">
-        {/* Logo flotante */}
+      <div className="container relative z-10 px-4 mx-auto text-center max-w-6xl">
+        {/* Floating logo */}
         <motion.img
           src="/lovable-uploads/ALogo.png"
           alt="AlienFlowSpaceDAO Logo"
-          className="h-24 md:h-28 gold-glow z-20 mb-8 mx-auto"
-          initial={{ scale: 0.8 }}
+          className="h-20 sm:h-24 md:h-28 logo-glow z-20 mb-6 sm:mb-8 mx-auto"
+          initial={{ scale: 0.9, opacity: 0 }}
           animate={{
-            scale: [1, 1.05, 1],
-            rotate: [0, 2, 0],
-            y: [0, -10, 0]
+            scale: [1, 1.02, 1],
+            opacity: 1,
+            y: [0, -5, 0]
+          }}
+          transition={{ 
+            duration: 4, 
+            repeat: Infinity, 
+            repeatType: "reverse",
+            opacity: { duration: 0.8 }
           }}
-          transition={{ duration: 6, repeat: Infinity, repeatType: "reverse" }}
           loading="lazy"
         />
 
-        {/* Título */}
+        {/* Main title */}
         <motion.h1
-          initial={{ opacity: 0, y: -30 }}
+          initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1.2, ease: 'easeOut' }}
-          className="text-3xl sm:text-4xl lg:text-6xl font-nasalization font-extrabold leading-tight text-center starwars-text mb-6"
+          transition={{ duration: 1, ease: 'easeOut' }}
+          className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-nasalization font-extrabold leading-tight text-center hero-title mb-8 sm:mb-12"
         >
           <span className="text-alien-green">Δlieπ</span>
           <span className="text-alien-gold">FlΦw</span>
           <span className="text-alien-green"> $pac€</span>
           <span className="text-alien-gold"> DAO</span>
         </motion.h1>
 
-        {/* Crawl Star Wars */}
-        <div className="star-wars-crawl">
-          <div className="star-wars-content starwars-text">
-            <p>
+        {/* Star Wars inspired description */}
+        <motion.div 
+          className="star-wars-crawl"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.5, duration: 1 }}
+        >
+          <div className="star-wars-content">
+            <p className="mb-4 text-sm sm:text-base lg:text-lg">
               Access the DAO with Innovative Solutions, Unlocks Energy Efficiency & Environmental Sustainability.
             </p>
-            <p>
+            <p className="text-sm sm:text-base lg:text-lg opacity-90">
               Advantages Boosting the BENEFITS, for Connecting you and Raise your QUALITY of LIFE, with Mutual PROFITS…
             </p>
           </div>
-        </div>
+        </motion.div>
 
-        {/* Botones */}
+        {/* Action buttons */}
         <motion.div
-          className="flex flex-wrap justify-center gap-4 mt-8"
+          className="flex flex-col sm:flex-row flex-wrap justify-center gap-3 sm:gap-4 mt-8 sm:mt-12"
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 1.5, duration: 1 }}
+          transition={{ delay: 1, duration: 0.8 }}
         >
-          <Link to="/about">
-            <Button className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-4 sm:py-5 text-sm sm:text-base rounded-full transition-colors shadow-lg">
+          <Link to="/about" className="w-full sm:w-auto">
+            <Button className="w-full sm:w-auto bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-3 sm:py-4 text-sm sm:text-base rounded-full transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105">
               <Orbit className="mr-2 h-4 w-4" /> About Enter Portal
             </Button>
           </Link>
 
-          <Link to="/alien-trip">
-            <Button className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-4 sm:py-5 text-sm sm:text-base rounded-full transition-colors shadow-lg">
+          <Link to="/alien-trip" className="w-full sm:w-auto">
+            <Button className="w-full sm:w-auto bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-3 sm:py-4 text-sm sm:text-base rounded-full transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105">
               <ScrollText className="mr-2 h-4 w-4" /> Alientrip Manifesto
             </Button>
           </Link>
 
           <Button
             onClick={scrollToSpaces}
-            className="bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-4 sm:py-5 text-sm sm:text-base rounded-full transition-colors shadow-lg"
+            className="w-full sm:w-auto bg-alien-green text-alien-gold hover:bg-alien-gold hover:text-alien-green font-nasalization px-6 sm:px-8 py-3 sm:py-4 text-sm sm:text-base rounded-full transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
           >
             <Globe className="mr-2 h-4 w-4" /> Join the Journey
           </Button>

src/index.css

@@ -166,63 +166,65 @@
   background: linear-gradient(145deg, hsl(var(--sidebar-accent)), hsl(var(--sidebar-primary)));
 }
 
-/* Star Wars text styling */
+/* Professional Star Wars text styling - Subtle and harmonious */
 .starwars-text {
-  color: #FFE81F;
+  color: hsl(var(--primary));
   text-shadow: 
-    0 0 5px #FFE81F,
-    0 0 10px #FFE81F,
-    0 0 20px #FFE81F,
-    0 0 40px #FFE81F,
-    0 0 80px #FFE81F;
+    0 1px 3px rgba(0, 0, 0, 0.3),
+    0 0 8px hsl(var(--primary) / 0.2);
   font-family: 'Nasalization', sans-serif;
   font-weight: bold;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
 }
 
-/* Star Wars scrolling text effect - COMPACTO Y MEJORADO */
+/* Clean Star Wars crawl - No background box, subtle animation */
 .star-wars-crawl {
-  perspective: 300px;
-  height: 200px;
-  overflow: hidden;
+  perspective: 400px;
+  height: auto;
+  overflow: visible;
   margin: 2rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .star-wars-content {
-  animation: crawl 15s linear infinite;
-  transform-origin: 50% 100%;
-  transform: rotateX(25deg);
-  color: #FFE81F;
-  text-align: justify;
-  max-width: 600px;
+  transform: rotateX(12deg);
+  transform-origin: center top;
+  max-width: 700px;
   margin: 0 auto;
-  padding: 2rem;
-  font-size: 1.1rem;
-  line-height: 1.6;
-  text-shadow: 
-    0 0 5px #FFE81F,
-    0 0 10px #FFE81F,
-    0 0 15px #FFE81F;
-  background: rgba(0, 0, 0, 0.8);
-  border-radius: 12px;
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 232, 31, 0.3);
+  padding: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.7;
+  text-align: center;
+  color: hsl(var(--foreground) / 0.9);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  animation: subtle-float 4s ease-in-out infinite;
 }
 
-@keyframes crawl {
-  0% {
-    transform: rotateX(25deg) translateY(50px);
-    opacity: 0;
+@keyframes subtle-float {
+  0%, 100% {
+    transform: rotateX(12deg) translateY(0px);
   }
-  20% {
-    opacity: 1;
-  }
-  100% {
-    transform: rotateX(25deg) translateY(-200px);
-    opacity: 0;
+  50% {
+    transform: rotateX(12deg) translateY(-3px);
   }
 }
 
+/* Professional title glow - Subtle and elegant */
+.hero-title {
+  text-shadow: 
+    0 0 20px hsl(var(--primary) / 0.3),
+    0 0 40px hsl(var(--secondary) / 0.2),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Refined logo glow */
+.logo-glow {
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) 
+          drop-shadow(0 0 12px hsl(var(--primary) / 0.2));
+}
+
 /* Responsive improvements */
 @media (max-width: 768px) {
   .star-wars-content {