From fe289228e1c1f0bb91c3808034b01c557e3299ca Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Sat, 8 Nov 2025 16:11:43 +0100
Subject: [PATCH] Enhance responsive layout for homepage sections

- Updated `DemoSection`, `PhilosophySection`, `FeatureCard`, and `TechStackSection` to ensure proper alignment and height consistency.
- Added `h-full` and `flex` utility classes for better flexbox behavior and layout responsiveness.
- Improved text and description alignment within cards by introducing `flex-1`.
---
 frontend/src/components/home/DemoSection.tsx       | 4 ++--
 frontend/src/components/home/FeatureCard.tsx       | 4 ++--
 frontend/src/components/home/PhilosophySection.tsx | 4 ++--
 frontend/src/components/home/TechStackSection.tsx  | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/home/DemoSection.tsx b/frontend/src/components/home/DemoSection.tsx
index d256151..330d59e 100644
--- a/frontend/src/components/home/DemoSection.tsx
+++ b/frontend/src/components/home/DemoSection.tsx
@@ -62,7 +62,7 @@ export function DemoSection() {
         {demos.map((demo, index) => (
           <motion.div
             key={demo.title}
-            className="rounded-lg border bg-card p-6 hover:shadow-lg transition-shadow"
+            className="h-full flex flex-col rounded-lg border bg-card p-6 hover:shadow-lg transition-shadow"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-100px' }}
@@ -75,7 +75,7 @@ export function DemoSection() {
             </div>
 
             <h3 className="text-xl font-semibold mb-2">{demo.title}</h3>
-            <p className="text-muted-foreground mb-4 leading-relaxed">
+            <p className="text-muted-foreground mb-4 leading-relaxed flex-1">
               {demo.description}
             </p>
 
diff --git a/frontend/src/components/home/FeatureCard.tsx b/frontend/src/components/home/FeatureCard.tsx
index d2e3a3b..b6dbebc 100644
--- a/frontend/src/components/home/FeatureCard.tsx
+++ b/frontend/src/components/home/FeatureCard.tsx
@@ -28,7 +28,7 @@ export function FeatureCard({
 }: FeatureCardProps) {
   return (
     <motion.div
-      className="group relative rounded-lg border bg-card p-6 hover:shadow-lg transition-all"
+      className="group relative h-full flex flex-col rounded-lg border bg-card p-6 hover:shadow-lg transition-all"
       whileHover={{ y: -4 }}
       transition={{ duration: 0.2 }}
     >
@@ -48,7 +48,7 @@ export function FeatureCard({
       </div>
 
       {/* Description */}
-      <p className="text-muted-foreground mb-4 leading-relaxed">{description}</p>
+      <p className="text-muted-foreground mb-4 leading-relaxed flex-1">{description}</p>
 
       {/* CTA Link */}
       <Link
diff --git a/frontend/src/components/home/PhilosophySection.tsx b/frontend/src/components/home/PhilosophySection.tsx
index 063a771..bbe8117 100644
--- a/frontend/src/components/home/PhilosophySection.tsx
+++ b/frontend/src/components/home/PhilosophySection.tsx
@@ -55,7 +55,7 @@ export function PhilosophySection() {
         <div className="grid md:grid-cols-2 gap-8 mt-12">
           {/* What You Won't Find */}
           <motion.div
-            className="rounded-lg border bg-card p-6"
+            className="h-full rounded-lg border bg-card p-6"
             initial={{ opacity: 0, x: -20 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true, margin: '-100px' }}
@@ -77,7 +77,7 @@ export function PhilosophySection() {
 
           {/* What You Will Find */}
           <motion.div
-            className="rounded-lg border bg-card p-6"
+            className="h-full rounded-lg border bg-card p-6"
             initial={{ opacity: 0, x: 20 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true, margin: '-100px' }}
diff --git a/frontend/src/components/home/TechStackSection.tsx b/frontend/src/components/home/TechStackSection.tsx
index 622d68d..08492ea 100644
--- a/frontend/src/components/home/TechStackSection.tsx
+++ b/frontend/src/components/home/TechStackSection.tsx
@@ -78,14 +78,14 @@ export function TechStackSection() {
         {technologies.map((tech, index) => (
           <motion.div
             key={tech.name}
-            className="group relative"
+            className="group relative h-full"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-100px' }}
             transition={{ duration: 0.4, delay: index * 0.05 }}
             whileHover={{ scale: 1.05 }}
           >
-            <div className="rounded-lg border bg-card p-6 text-center hover:shadow-lg transition-all">
+            <div className="h-full flex flex-col items-center justify-center rounded-lg border bg-card p-6 text-center hover:shadow-lg transition-all">
               {/* Tech Badge */}
               <div className={`inline-block rounded-full bg-gradient-to-r ${tech.color} px-4 py-2 text-white font-semibold text-sm mb-2`}>
                 {tech.name}