diff --git a/app/pages/index.vue b/app/pages/index.vue
index d4350e0..5de44b9 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,89 +1,164 @@
 <template>
-  <Stack gap="12">
-    <!-- How it works -->
-    <Section variant="plain">
-      <Stack gap="6" align="center">
-        <Heading :level="2">{{ $t('howto.title') }}</Heading>
-        <Grid :cols="1" :md="3" :gap="6">
-          <Card padding="lg">
-            <Stack gap="3" align="center">
-              <IconCircle tone="primary">🔍</IconCircle>
-              <Heading :level="3" weight="semibold">{{ $t('howto.step1.title') }}</Heading>
-              <Text tone="muted" align="center">{{ $t('howto.step1.description') }}</Text>
-            </Stack>
-          </Card>
-          <Card padding="lg">
-            <Stack gap="3" align="center">
-              <IconCircle tone="primary">🤝</IconCircle>
-              <Heading :level="3" weight="semibold">{{ $t('howto.step2.title') }}</Heading>
-              <Text tone="muted" align="center">{{ $t('howto.step2.description') }}</Text>
-            </Stack>
-          </Card>
-          <Card padding="lg">
-            <Stack gap="3" align="center">
-              <IconCircle tone="primary">⚡</IconCircle>
-              <Heading :level="3" weight="semibold">{{ $t('howto.step3.title') }}</Heading>
-              <Text tone="muted" align="center">{{ $t('howto.step3.description') }}</Text>
-            </Stack>
-          </Card>
-        </Grid>
-      </Stack>
-    </Section>
+  <div class="space-y-16 pb-16">
+    <!-- How it works - Photo Glass Cards -->
+    <section class="container mx-auto px-4">
+      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
+        {{ $t('howto.title') }}
+      </h2>
 
-    <!-- Who it's for -->
-    <Section variant="plain">
-      <Stack gap="8" align="center">
-        <Heading :level="2">{{ $t('roles.title') }}</Heading>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- Step 1: Search -->
+        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
+          <img
+            src="/images/promo/search.jpg"
+            alt=""
+            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
+          <div class="absolute inset-0 p-6 flex flex-col justify-end">
+            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
+              <Icon name="lucide:search" size="24" class="text-white" />
+            </div>
+            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step1.title') }}</h3>
+            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step1.description') }}</p>
+          </div>
+        </div>
 
-        <Grid :cols="1" :md="3" :gap="6">
-          <Card padding="lg">
-            <Stack gap="4" align="center">
-              <IconCircle tone="primary">🏭</IconCircle>
-              <Heading :level="3">{{ $t('roles.producers.title') }}</Heading>
-              <Text tone="muted" align="center">{{ $t('roles.producers.description') }}</Text>
-              <Stack tag="ul" gap="1">
-                <li>✓ {{ $t('roles.producers.benefit1') }}</li>
-                <li>✓ {{ $t('roles.producers.benefit2') }}</li>
-                <li>✓ {{ $t('roles.producers.benefit3') }}</li>
-                <li>✓ {{ $t('roles.producers.benefit4') }}</li>
-              </Stack>
-              <Button :full-width="true" variant="outline">{{ $t('roles.producers.cta') }}</Button>
-            </Stack>
-          </Card>
+        <!-- Step 2: Compare -->
+        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
+          <img
+            src="/images/promo/compare.jpg"
+            alt=""
+            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
+          <div class="absolute inset-0 p-6 flex flex-col justify-end">
+            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
+              <Icon name="lucide:git-compare" size="24" class="text-white" />
+            </div>
+            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step2.title') }}</h3>
+            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step2.description') }}</p>
+          </div>
+        </div>
 
-          <Card padding="lg">
-            <Stack gap="4" align="center">
-              <IconCircle tone="primary">🏢</IconCircle>
-              <Heading :level="3">{{ $t('roles.buyers.title') }}</Heading>
-              <Text tone="muted" align="center">{{ $t('roles.buyers.description') }}</Text>
-              <Stack tag="ul" gap="1">
-                <li>✓ {{ $t('roles.buyers.benefit1') }}</li>
-                <li>✓ {{ $t('roles.buyers.benefit2') }}</li>
-                <li>✓ {{ $t('roles.buyers.benefit3') }}</li>
-                <li>✓ {{ $t('roles.buyers.benefit4') }}</li>
-              </Stack>
-              <Button :full-width="true" variant="outline">{{ $t('roles.buyers.cta') }}</Button>
-            </Stack>
-          </Card>
+        <!-- Step 3: Services -->
+        <div class="relative overflow-hidden rounded-2xl h-72 group cursor-pointer">
+          <img
+            src="/images/promo/services.jpg"
+            alt=""
+            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10" />
+          <div class="absolute inset-0 p-6 flex flex-col justify-end">
+            <div class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mb-3">
+              <Icon name="lucide:sparkles" size="24" class="text-white" />
+            </div>
+            <h3 class="text-xl font-bold text-white mb-1">{{ $t('howto.step3.title') }}</h3>
+            <p class="text-white/70 text-sm line-clamp-2">{{ $t('howto.step3.description') }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
 
-          <Card padding="lg">
-            <Stack gap="4" align="center">
-              <IconCircle tone="primary">⚙️</IconCircle>
-              <Heading :level="3">{{ $t('roles.services.title') }}</Heading>
-              <Text tone="muted" align="center">{{ $t('roles.services.description') }}</Text>
-              <Stack tag="ul" gap="1">
-                <li>✓ {{ $t('roles.services.benefit1') }}</li>
-                <li>✓ {{ $t('roles.services.benefit2') }}</li>
-                <li>✓ {{ $t('roles.services.benefit3') }}</li>
-                <li>✓ {{ $t('roles.services.benefit4') }}</li>
-              </Stack>
-              <Button :full-width="true" variant="outline">{{ $t('roles.services.cta') }}</Button>
-            </Stack>
-          </Card>
-        </Grid>
-      </Stack>
-    </Section>
-  </Stack>
+    <!-- Who it's for - Photo Glass Cards with CTA -->
+    <section class="container mx-auto px-4">
+      <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-base-content">
+        {{ $t('roles.title') }}
+      </h2>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- Producers -->
+        <div class="relative overflow-hidden rounded-2xl h-96 group">
+          <img
+            src="/images/promo/producer.jpg"
+            alt=""
+            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
+          <div class="absolute inset-0 p-6 flex flex-col justify-end">
+            <div class="w-12 h-12 rounded-xl bg-violet-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
+              <Icon name="lucide:factory" size="24" class="text-violet-200" />
+            </div>
+            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.producers.title') }}</h3>
+            <p class="text-white/70 text-sm mb-4">{{ $t('roles.producers.description') }}</p>
+            <ul class="space-y-1 mb-4 text-sm">
+              <li class="flex items-center gap-2 text-white/80">
+                <Icon name="lucide:check" size="14" class="text-violet-400" />
+                {{ $t('roles.producers.benefit1') }}
+              </li>
+              <li class="flex items-center gap-2 text-white/80">
+                <Icon name="lucide:check" size="14" class="text-violet-400" />
+                {{ $t('roles.producers.benefit2') }}
+              </li>
+            </ul>
+            <button class="btn btn-sm bg-violet-500 hover:bg-violet-600 border-0 text-white">
+              {{ $t('roles.producers.cta') }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Buyers -->
+        <div class="relative overflow-hidden rounded-2xl h-96 group">
+          <img
+            src="/images/promo/buyer.jpg"
+            alt=""
+            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
+          <div class="absolute inset-0 p-6 flex flex-col justify-end">
+            <div class="w-12 h-12 rounded-xl bg-cyan-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
+              <Icon name="lucide:building-2" size="24" class="text-cyan-200" />
+            </div>
+            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.buyers.title') }}</h3>
+            <p class="text-white/70 text-sm mb-4">{{ $t('roles.buyers.description') }}</p>
+            <ul class="space-y-1 mb-4 text-sm">
+              <li class="flex items-center gap-2 text-white/80">
+                <Icon name="lucide:check" size="14" class="text-cyan-400" />
+                {{ $t('roles.buyers.benefit1') }}
+              </li>
+              <li class="flex items-center gap-2 text-white/80">
+                <Icon name="lucide:check" size="14" class="text-cyan-400" />
+                {{ $t('roles.buyers.benefit2') }}
+              </li>
+            </ul>
+            <button class="btn btn-sm bg-cyan-500 hover:bg-cyan-600 border-0 text-white">
+              {{ $t('roles.buyers.cta') }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Services -->
+        <div class="relative overflow-hidden rounded-2xl h-96 group">
+          <img
+            src="/images/promo/partner.jpg"
+            alt=""
+            class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
+          <div class="absolute inset-0 p-6 flex flex-col justify-end">
+            <div class="w-12 h-12 rounded-xl bg-rose-500/30 backdrop-blur-sm flex items-center justify-center mb-3">
+              <Icon name="lucide:handshake" size="24" class="text-rose-200" />
+            </div>
+            <h3 class="text-xl font-bold text-white mb-2">{{ $t('roles.services.title') }}</h3>
+            <p class="text-white/70 text-sm mb-4">{{ $t('roles.services.description') }}</p>
+            <ul class="space-y-1 mb-4 text-sm">
+              <li class="flex items-center gap-2 text-white/80">
+                <Icon name="lucide:check" size="14" class="text-rose-400" />
+                {{ $t('roles.services.benefit1') }}
+              </li>
+              <li class="flex items-center gap-2 text-white/80">
+                <Icon name="lucide:check" size="14" class="text-rose-400" />
+                {{ $t('roles.services.benefit2') }}
+              </li>
+            </ul>
+            <button class="btn btn-sm bg-rose-500 hover:bg-rose-600 border-0 text-white">
+              {{ $t('roles.services.cta') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/public/images/promo/buyer.jpg b/public/images/promo/buyer.jpg
new file mode 100644
index 0000000..142beb1
Binary files /dev/null and b/public/images/promo/buyer.jpg differ
diff --git a/public/images/promo/compare.jpg b/public/images/promo/compare.jpg
new file mode 100644
index 0000000..228d4b6
Binary files /dev/null and b/public/images/promo/compare.jpg differ
diff --git a/public/images/promo/partner.jpg b/public/images/promo/partner.jpg
new file mode 100644
index 0000000..017893e
Binary files /dev/null and b/public/images/promo/partner.jpg differ
diff --git a/public/images/promo/producer.jpg b/public/images/promo/producer.jpg
new file mode 100644
index 0000000..e4528d6
Binary files /dev/null and b/public/images/promo/producer.jpg differ
diff --git a/public/images/promo/search.jpg b/public/images/promo/search.jpg
new file mode 100644
index 0000000..004dc02
Binary files /dev/null and b/public/images/promo/search.jpg differ
diff --git a/public/images/promo/services.jpg b/public/images/promo/services.jpg
new file mode 100644
index 0000000..94aadad
Binary files /dev/null and b/public/images/promo/services.jpg differ