Home page design improvements

src/ui/design-system/src/lib/Pages/HomePage/BrowseByCategory.tsx

@@ -2,6 +2,16 @@ import React from 'react';
 import { event } from '@site/src/utils/gtags.client';
 import { GA_EVENTS, GA_CATEGORIES } from '@site/src/constants/ga-events';
 
+const CATEGORY_COLORS: Record<string, string> = {
+  Defi: '#10b981',
+  Tutorials: '#3b82f6',
+  Cadence: '#a855f7',
+  EVM: '#f97316',
+  Tools: '#64748b',
+  Networks: '#06b6d4',
+  Ecosystem: '#ec4899',
+};
+
 const CATEGORIES = [
   {
     title: 'Defi',
@@ -117,38 +127,52 @@ const BrowseByCategory: React.FC = () => {
 
   return (
     <section className="container mx-auto py-12">
-      <h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-8">Browse by category</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">Browse by category</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
         {CATEGORIES.map((cat) => {
           const firstLink = cat.links[0];
           const remainingLinks = cat.links.slice(1);
 
+          const color = CATEGORY_COLORS[cat.title] || '#64748b';
+
           return (
-            <div key={cat.title} className="bg-white dark:bg-gray-900 rounded-lg shadow p-6 flex flex-col">
-              <a
-                href={firstLink.href}
-                target={firstLink.href.startsWith('http') ? '_blank' : undefined}
-                rel={firstLink.href.startsWith('http') ? 'noopener noreferrer' : undefined}
-                onClick={() => handleLinkClick(firstLink.label, firstLink.href, cat.title)}
-                className="text-xl font-semibold text-primary-green-600 dark:text-primary-green-400 mb-4 hover:text-primary-green-700 dark:hover:text-primary-green-300 transition-colors underline"
-              >
-                {cat.title}
-              </a>
-              <ul className="space-y-2">
-                {remainingLinks.map((link) => (
-                  <li key={link.label}>
-                    <a
-                      href={link.href}
-                      target={link.href.startsWith('http') ? '_blank' : undefined}
-                      rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
-                      onClick={() => handleLinkClick(link.label, link.href, cat.title)}
-                      className="text-base text-gray-800 dark:text-gray-100 hover:text-primary-green-500 dark:hover:text-primary-green-300 transition-colors"
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
+            <div
+              key={cat.title}
+              className="rounded-xl bg-white dark:bg-gray-900 shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden"
+            >
+              {/* Color bar at top */}
+              <div style={{ height: '4px', backgroundColor: color }} />
+
+              <div className="flex flex-col p-5">
+                {/* Category Header */}
+                <a
+                  href={firstLink.href}
+                  target={firstLink.href.startsWith('http') ? '_blank' : undefined}
+                  rel={firstLink.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                  onClick={() => handleLinkClick(firstLink.label, firstLink.href, cat.title)}
+                  className="text-base font-bold text-gray-900 dark:text-white mb-4 hover:text-[#00EF8B] transition-colors no-underline group flex items-center gap-1"
+                >
+                  {cat.title}
+                  <span className="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
+                </a>
+
+                {/* Links */}
+                <ul className="space-y-2 flex-1">
+                  {remainingLinks.map((link) => (
+                    <li key={link.label}>
+                      <a
+                        href={link.href}
+                        target={link.href.startsWith('http') ? '_blank' : undefined}
+                        rel={link.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                        onClick={() => handleLinkClick(link.label, link.href, cat.title)}
+                        className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
             </div>
           );
         })}

src/ui/design-system/src/lib/Pages/HomePage/FeatureSection.tsx

@@ -31,19 +31,18 @@ interface FeatureSectionProps {
 }
 
 const FeatureSection: React.FC<FeatureSectionProps> = ({ sections }) => {
-  // Flatten all cards from all sections into a single array
   const allCards = sections.flatMap(section => section.cards);
 
   return (
-    <section className="container mx-auto pt-1 pb-6">
+    <section className="container mx-auto pb-12">
       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
         {allCards.map((card, cardIdx) => (
           <Tooltip key={cardIdx} description={card.description}>
             <a
               href={card.href}
               target={card.target}
               rel={card.target === '_blank' ? 'noopener noreferrer' : undefined}
-              className="group flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600 shadow-lg hover:shadow-md transition-all duration-200 cursor-pointer no-underline hover:no-underline h-full min-h-[80px]"
+              className="group flex items-center gap-4 p-4 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-[#00EF8B] dark:hover:border-[#00EF8B] transition-colors duration-200 cursor-pointer no-underline hover:no-underline"
               onClick={(e) => {
                 event({
                   action: GA_EVENTS.ACTION_CARD_CLICK,
@@ -53,13 +52,13 @@ const FeatureSection: React.FC<FeatureSectionProps> = ({ sections }) => {
                 });
               }}
             >
-              <span className="flex items-center justify-center w-8 h-8 rounded-md bg-green-100 dark:bg-green-900 group-hover:bg-green-200 dark:group-hover:bg-green-800 transition-colors shrink-0">
-                {card.icon && <Icon name={card.icon} className="w-5 h-5 flex-none text-green-600 dark:text-green-400" />}
+              <span className="flex items-center justify-center w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 shrink-0">
+                {card.icon && <Icon name={card.icon} className="w-5 h-5 text-gray-700 dark:text-gray-300" />}
               </span>
-              <div className="flex-1">
-                <span className="font-medium text-gray-900 dark:text-gray-100 group-hover:text-green-600 dark:group-hover:text-green-400 transition-colors">{card.heading}</span>
-              </div>
-              <span className="text-gray-400 group-hover:text-green-500 transition-colors">
+
+              <span className="flex-1 font-medium text-gray-900 dark:text-white">{card.heading}</span>
+
+              <span className="text-gray-400 group-hover:text-[#00EF8B] transition-colors duration-200">
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                 </svg>

src/ui/design-system/src/lib/Pages/HomePage/GrowSection.tsx

@@ -8,39 +8,41 @@ const GrowSection: React.FC = () => {
   const cards = growGridData.sections[0].cards;
 
   return (
-    <section className="py-8">
+    <section className="pb-12">
       <div className="container mx-auto">
-        <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 py-10 border border-purple-100 dark:border-purple-900">
-          <div className="flex items-baseline mb-8">
-            <span className="flex items-center justify-center w-10 h-10 rounded-md bg-[#C084FC] mr-3">
-              <Icon name={growGridData.icon} className="w-6 h-6 text-black" />
-            </span>
-            <h2 className="text-3xl font-bold text-gray-900 dark:text-white">Builder toolkit to start, grow, and win</h2>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            {cards.map((card, idx) => (
-              <a
-                key={idx}
-                href={card.href}
-                {...(typeof (card as any).target === 'string' ? { target: (card as any).target, rel: (card as any).target === '_blank' ? 'noopener noreferrer' : undefined } : {})}
-                className="flex flex-col items-start bg-purple-50 dark:bg-purple-950 rounded-xl p-6 shadow hover:shadow-lg transition group h-full border border-purple-100 dark:border-purple-800 hover:border-purple-400 dark:hover:border-purple-400 hover:underline hover:decoration-purple-500 dark:hover:decoration-white"
-                onClick={(e) => {
-                  event({
-                    action: GA_EVENTS.ACTION_CARD_CLICK,
-                    category: GA_CATEGORIES.ACTION_CARD,
-                    label: card.heading,
-                    location: true,
-                  });
-                }}
-              >
-                <span className="flex items-center justify-center w-10 h-10 rounded-md bg-purple-100 dark:bg-purple-800 mb-4">
-                  {card.icon && <Icon name={card.icon} className="w-6 h-6 text-purple-700 dark:text-purple-200" />}
-                </span>
-                <h3 className="text-lg font-semibold text-purple-900 dark:text-purple-100 mb-2 group-hover:text-purple-600 dark:group-hover:text-purple-300">{card.heading}</h3>
-                <p className="text-sm text-purple-800 dark:text-purple-300">{card.description}</p>
-              </a>
-            ))}
-          </div>
+        <div className="flex items-center gap-3 mb-6">
+          <span className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#A855F7]">
+            <Icon name={growGridData.icon} className="w-5 h-5 text-white" />
+          </span>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white m-0">Builder toolkit to start, grow, and win</h2>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {cards.map((card, idx) => (
+            <a
+              key={idx}
+              href={card.href}
+              {...(typeof (card as any).target === 'string' ? { target: (card as any).target, rel: (card as any).target === '_blank' ? 'noopener noreferrer' : undefined } : {})}
+              className="group flex flex-col p-5 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-[#A855F7] dark:hover:border-[#A855F7] transition-all duration-200 no-underline hover:no-underline hover:-translate-y-1 hover:shadow-md"
+              onClick={(e) => {
+                event({
+                  action: GA_EVENTS.ACTION_CARD_CLICK,
+                  category: GA_CATEGORIES.ACTION_CARD,
+                  label: card.heading,
+                  location: true,
+                });
+              }}
+            >
+              <span className="flex items-center justify-center w-10 h-10 rounded-lg bg-[#A855F7]/10 mb-4">
+                {card.icon && <Icon name={card.icon} className="w-5 h-5 text-[#A855F7]" />}
+              </span>
+              <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-1">
+                {card.heading}
+                <span className="opacity-0 group-hover:opacity-100 transition-opacity">→</span>
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{card.description}</p>
+            </a>
+          ))}
         </div>
       </div>
     </section>

src/ui/design-system/src/lib/Pages/HomePage/HeroSection.tsx

@@ -4,29 +4,26 @@ import { event } from '@site/src/utils/gtags.client';
 import { GA_EVENTS, GA_CATEGORIES, GA_ACTIONS } from '@site/src/constants/ga-events';
 
 const HeroSection: React.FC = () => {
-  // const { colorMode } = useColorMode();
-  // const calendarSrc = colorMode === 'dark'
-  //   ? 'https://lu.ma/embed/calendar/cal-DBqbEn6mwZR13qQ/events?lt=dark'
-  //   : 'https://lu.ma/embed/calendar/cal-DBqbEn6mwZR13qQ/events';
   return (
-    <section className="container mx-auto pt-16 pb-6">
-      <div className="flex flex-col lg:flex-row items-center justify-between">
-        {/* Left: Hero Content */}
-        <div className="flex-1 max-w-2xl text-left">
-          <h1 className="text-3xl md:text-4xl font-bold mb-3 text-gray-900 dark:text-white">
+    <section className="container mx-auto pt-20 pb-16">
+      <div className="flex flex-col items-center text-center">
+        <div className="max-w-3xl">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight tracking-tight text-gray-900 dark:text-white">
             Turn decentralized finance into personal finance.
           </h1>
-          <p className="text-base md:text-lg text-gray-700 dark:text-gray-200 mb-4 max-w-xl">
-            <strong>Flow</strong> is the leading consumer layer-one network,
+
+          <p className="text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
+            <strong className="text-gray-900 dark:text-white font-semibold">Flow</strong> is the leading consumer layer-one network,
             trusted by 1 million monthly active users. Chosen by top global brands
             like NBA, Disney, PayPal, NFL, and Ticketmaster,
             it is the foundation for the next generation of consumer finance:{" "}
-            <strong>global, always-on, and in real-time.</strong>
+            <strong className="text-gray-900 dark:text-white font-semibold">global, always-on, and in real-time.</strong>
           </p>
-          <div className="flex flex-col sm:flex-row gap-3 mb-4">
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
             <a
               href="/blockchain-development-tutorials/forte"
-              className="px-6 py-2 rounded-lg bg-primary-purple text-white hover:text-white focus:text-white no-underline hover:no-underline font-bold text-base shadow-lg border border-gray-200 dark:border-gray-700 hover:opacity-90 focus:ring-2 focus:ring-primary-purple transition-colors text-center"
+              className="px-7 py-3 rounded-full bg-[#00EF8B] hover:bg-[#00D67D] text-black no-underline hover:no-underline font-semibold text-base transition-colors duration-200 text-center"
               onClick={() => {
                 event({
                   action: GA_EVENTS.ACTION_CARD_CLICK,
@@ -38,6 +35,7 @@ const HeroSection: React.FC = () => {
             >
               Automate DeFi
             </a>
+
             <button
               type="button"
               onClick={() => {
@@ -49,30 +47,12 @@ const HeroSection: React.FC = () => {
                 });
                 window.location.href = '/blockchain-development-tutorials/cadence/getting-started';
               }}
-              className="px-6 py-2 rounded-lg bg-transparent text-black dark:text-white underline font-bold text-base border-none shadow-none focus:outline-none focus:underline hover:underline hover:text-green-600 dark:hover:text-green-400 transition-colors text-center cursor-pointer"
-              style={{ background: 'transparent' }}
+              className="px-7 py-3 rounded-full bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-semibold text-base border-none hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors duration-200 text-center cursor-pointer"
             >
               Quickstart
             </button>
           </div>
         </div>
-        {/* Right: Calendar card (visible on lg and up) */}
-        {/* <div className="flex-1 hidden lg:flex justify-end items-center pl-8">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 p-4 w-[560px] max-w-full flex flex-col items-center">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Upcoming Events</h3>
-            <iframe
-              src={calendarSrc}
-              width="520"
-              height="260"
-              frameBorder="0"
-              style={{ border: '1px solid #bfcbda88', borderRadius: 8 }}
-              allowFullScreen
-              aria-hidden="false"
-              tabIndex={0}
-              title="Flow Events Calendar"
-            />
-          </div>
-        </div> */}
       </div>
     </section>
   );