Refactor Hero and Clubs sections

Author: lovable-dev[bot]

src/components/Hero.tsx

@@ -45,7 +45,7 @@ const Hero: React.FC = () => {
           initial={{ opacity: 0, y: -30 }}
           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 sw-title-glow mb-6"
+          className="text-3xl sm:text-4xl lg:text-6xl font-nasalization font-extrabold leading-tight text-center starwars-text mb-6"
         >
           <span className="text-alien-green">Δlieπ</span>
           <span className="text-alien-gold">FlΦw</span>
@@ -55,7 +55,7 @@ const Hero: React.FC = () => {
 
         {/* Crawl Star Wars */}
         <div className="star-wars-crawl">
-          <div className="star-wars-content">
+          <div className="star-wars-content starwars-text">
             <p>
               Access the DAO with Innovative Solutions, Unlocks Energy Efficiency & Environmental Sustainability.
             </p>

src/index.css

@@ -166,32 +166,60 @@
   background: linear-gradient(145deg, hsl(var(--sidebar-accent)), hsl(var(--sidebar-primary)));
 }
 
+/* Star Wars text styling */
+.starwars-text {
+  color: #FFE81F;
+  text-shadow: 
+    0 0 5px #FFE81F,
+    0 0 10px #FFE81F,
+    0 0 20px #FFE81F,
+    0 0 40px #FFE81F,
+    0 0 80px #FFE81F;
+  font-family: 'Nasalization', sans-serif;
+  font-weight: bold;
+  letter-spacing: 2px;
+}
+
 /* Star Wars scrolling text effect - COMPACTO Y MEJORADO */
 .star-wars-crawl {
-  perspective: 500px;
+  perspective: 300px;
+  height: 200px;
   overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  max-width: 100%;
+  margin: 2rem 0;
 }
+
 .star-wars-content {
-  transform: rotateX(15deg);
-  transform-origin: center top;
-  animation: star-wars-float-compact 3s ease-out forwards;
-  width: 100%;
+  animation: crawl 15s linear infinite;
+  transform-origin: 50% 100%;
+  transform: rotateX(25deg);
+  color: #FFE81F;
+  text-align: justify;
+  max-width: 600px;
+  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);
 }
-@keyframes star-wars-float-compact {
+
+@keyframes crawl {
   0% {
-    transform: rotateX(15deg) translateY(30px);
+    transform: rotateX(25deg) translateY(50px);
     opacity: 0;
   }
   20% {
     opacity: 1;
   }
   100% {
-    transform: rotateX(15deg) translateY(0);
-    opacity: 1;
+    transform: rotateX(25deg) translateY(-200px);
+    opacity: 0;
   }
 }
 

src/pages/Clubs.tsx

@@ -61,7 +61,7 @@ const Clubs: React.FC = () => {
   const featuredClubs: ClubProps[] = [
     {
       name: 'Δ CashFlow',
-      description: 'Advanced earning strategies and winning analysis for interplanetary assets.',
+      description: 'Advanced earning strategies and winning analysis for interplanetary assets through DeFi protocols, yield farming, and strategic portfolio management.',
       members: 314159,
       icon: <Zap className="h-6 w-6 text-alien-gold" />,
       category: 'CashFlow',
@@ -70,7 +70,7 @@ const Clubs: React.FC = () => {
     },
     {
       name: 'Δ EcoFlow',
-      description: "Shaping the planet's present through collaborative decision-making with budgets and proposals.",
+      description: "Shaping the planet's present through collaborative decision-making with budgets, proposals, and sustainable governance mechanisms for environmental impact.",
       members: 161803,
       icon: <Shield className="h-6 w-6 text-alien-gold" />,
       category: 'DAO',
@@ -79,8 +79,8 @@ const Clubs: React.FC = () => {
     },
     {
       name: 'ΔGameFlow ΔWeedFlow ΔXFlow',
-      description: 'Discovering and creating digital artifacts across the multiverse with utility in reality.',
-      members: 3712,
+      description: 'Discovering and creating digital artifacts across the multiverse with utility in reality through gaming, wellness, and cross-chain experiences.',
+      members: 37128,
       icon: <Rocket className="h-6 w-6 text-alien-gold" />,
       category: 'NFTs',
       categoryColor: 'bg-pink-500/80 text-white border border-pink-400/50',
@@ -153,12 +153,14 @@ const Clubs: React.FC = () => {
   ];
 
   const partners = [
-    { name: 'Discord', url: 'https://discord.com/' },
-    { name: 'Telegram', url: 'https://telegram.org/' },
-    { name: 'Twitter', url: 'https://twitter.com/' },
-    { name: 'GitHub', url: 'https://github.com/' },
-    { name: 'Medium', url: 'https://medium.com/' },
-    { name: 'Reddit', url: 'https://reddit.com/' },
+    { name: 'CoinGecko', url: 'https://coingecko.com/', logo: '/lovable-uploads/CoinGeckoLogo.svg' },
+    { name: 'CoinMarketCap', url: 'https://coinmarketcap.com/', logo: '/lovable-uploads/CoinMarketCapLogo.jpeg' },
+    { name: 'DappRadar', url: 'https://dappradar.com/', logo: '/lovable-uploads/DappRadarLogo.jpeg' },
+    { name: 'Aragon DAO', url: 'https://aragon.org/', logo: '/lovable-uploads/AragonDAOLogo.svg' },
+    { name: 'Unity Learn', url: 'https://learn.unity.com/', logo: '/lovable-uploads/UnityLearnLogo.svg' },
+    { name: 'Climate Reanalyzer', url: 'https://climatereanalyzer.org/', logo: '/lovable-uploads/ClimateReanalyzerLogo.svg' },
+    { name: 'CoinGlass', url: 'https://coinglass.com/', logo: '/lovable-uploads/CoinGlassLogo.jpeg' },
+    { name: 'Behance', url: 'https://behance.net/', logo: '/lovable-uploads/BehanceLogo.jpeg' },
   ];
 
   return (
@@ -281,17 +283,24 @@ const Clubs: React.FC = () => {
           {/* Partners */}
           <div className="text-center">
             <h2 className="text-3xl font-bold text-alien-gold mb-8 font-nasalization text-glow">Community Partners</h2>
-            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
               {partners.map((partner, index) => (
                 <a
                   key={index}
                   href={partner.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="bg-alien-space-dark/80 backdrop-blur-md rounded-xl p-6 border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300 hover:transform hover:scale-105 group"
+                  className="bg-alien-space-dark/80 backdrop-blur-md rounded-xl p-4 border border-alien-gold/30 hover:border-alien-gold/60 transition-all duration-300 hover:transform hover:scale-105 group"
                 >
                   <div className="text-center">
-                    <h3 className="text-alien-gold font-semibold text-sm group-hover:text-alien-gold-light transition-colors font-[Exo]">
+                    {partner.logo && (
+                      <img
+                        src={partner.logo}
+                        alt={`${partner.name} logo`}
+                        className="h-8 w-8 object-contain mx-auto mb-2 group-hover:scale-110 transition-transform"
+                      />
+                    )}
+                    <h3 className="text-alien-gold font-semibold text-xs group-hover:text-alien-gold-light transition-colors font-[Exo]">
                       {partner.name}
                     </h3>
                   </div>