Skip to content

Commit c5d6851

Browse files
carlosdennercarlosdenner
committed
Add scroll indicators and reduce hero padding to improve above-fold visibility
1 parent f0e2cbf commit c5d6851

4 files changed

Lines changed: 48 additions & 6 deletions

File tree

‎src/pages/en/force-field.astro‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function getIcon(iconName: string): string {
4545

4646
<main>
4747
<!-- Hero Section -->
48-
<section class="relative overflow-hidden py-20 md:py-28 lg:py-36 bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
48+
<section class="relative overflow-hidden py-12 md:py-16 lg:py-20 bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
4949
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMxNEI4QTYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0di0yaDEyek0zNiAyNHYySDI0di0yaDEyeiIvPjwvZz48L2c+PC9zdmc+')] opacity-40"></div>
5050
<div class="container-custom relative">
5151
<div class="mx-auto max-w-4xl text-center">
@@ -89,13 +89,24 @@ function getIcon(iconName: string): string {
8989
</div>
9090
</div>
9191

92+
<!-- Scroll Indicator -->
93+
<div class="mt-12 flex justify-center">
94+
<a href="#problem" class="scroll-indicator group flex flex-col items-center gap-2 text-secondary-400 hover:text-primary-400 transition-colors">
95+
<span class="text-xs font-medium uppercase tracking-widest">Scroll</span>
96+
<svg class="h-6 w-6 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
97+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
98+
</svg>
99+
</a>
100+
</div>
101+
</div>
102+
92103
<!-- Decorative gradient orbs -->
93104
<div class="absolute top-1/4 left-0 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl -translate-x-1/2"></div>
94105
<div class="absolute bottom-0 right-0 w-96 h-96 bg-primary-600/10 rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>
95106
</section>
96107

97108
<!-- Problem Section -->
98-
<section class="section-padding bg-white dark:bg-secondary-900">
109+
<section id="problem" class="section-padding scroll-mt-24 bg-white dark:bg-secondary-900">
99110
<div class="container-custom">
100111
<div class="mx-auto max-w-4xl">
101112
<h2 class="mb-8 text-center text-3xl md:text-4xl font-bold text-secondary-900 dark:text-white">

‎src/pages/en/index.astro‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const pageTitle = `${siteContent.company} | ${siteContent.tagline}`;
2020

2121
<main>
2222
<!-- Hero Section with LLM Firewall Sidebar -->
23-
<section class="section-padding bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-secondary-900 dark:via-secondary-800 dark:to-primary-900/20 relative overflow-hidden">
23+
<section class="py-12 md:py-16 lg:py-20 bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-secondary-900 dark:via-secondary-800 dark:to-primary-900/20 relative overflow-hidden">
2424
<!-- Subtle security motif background -->
2525
<div class="absolute inset-0 opacity-5 dark:opacity-10">
2626
<svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px]" viewBox="0 0 200 200" fill="none">
@@ -110,6 +110,16 @@ const pageTitle = `${siteContent.company} | ${siteContent.tagline}`;
110110
</a>
111111
</div>
112112
</div>
113+
114+
<!-- Scroll Indicator -->
115+
<div class="mt-12 flex justify-center">
116+
<a href="#services" class="scroll-indicator group flex flex-col items-center gap-2 text-secondary-400 hover:text-primary-600 dark:text-secondary-500 dark:hover:text-primary-400 transition-colors">
117+
<span class="text-xs font-medium uppercase tracking-widest">Scroll</span>
118+
<svg class="h-6 w-6 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
119+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
120+
</svg>
121+
</a>
122+
</div>
113123
</div>
114124
</section>
115125

‎src/pages/fr/force-field.astro‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function getIcon(iconName: string): string {
4545

4646
<main>
4747
<!-- Hero Section -->
48-
<section class="relative overflow-hidden py-20 md:py-28 lg:py-36 bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
48+
<section class="relative overflow-hidden py-12 md:py-16 lg:py-20 bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
4949
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMxNEI4QTYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0di0yaDEyek0zNiAyNHYySDI0di0yaDEyeiIvPjwvZz48L2c+PC9zdmc+')] opacity-40"></div>
5050
<div class="container-custom relative">
5151
<div class="mx-auto max-w-4xl text-center">
@@ -89,13 +89,24 @@ function getIcon(iconName: string): string {
8989
</div>
9090
</div>
9191

92+
<!-- Scroll Indicator -->
93+
<div class="mt-12 flex justify-center">
94+
<a href="#problem" class="scroll-indicator group flex flex-col items-center gap-2 text-secondary-400 hover:text-primary-400 transition-colors">
95+
<span class="text-xs font-medium uppercase tracking-widest">Defiler</span>
96+
<svg class="h-6 w-6 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
97+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
98+
</svg>
99+
</a>
100+
</div>
101+
</div>
102+
92103
<!-- Decorative gradient orbs -->
93104
<div class="absolute top-1/4 left-0 w-96 h-96 bg-primary-500/20 rounded-full blur-3xl -translate-x-1/2"></div>
94105
<div class="absolute bottom-0 right-0 w-96 h-96 bg-primary-600/10 rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>
95106
</section>
96107

97108
<!-- Problem Section -->
98-
<section class="section-padding bg-white dark:bg-secondary-900">
109+
<section id="problem" class="section-padding scroll-mt-24 bg-white dark:bg-secondary-900">
99110
<div class="container-custom">
100111
<div class="mx-auto max-w-4xl">
101112
<h2 class="mb-8 text-center text-3xl md:text-4xl font-bold text-secondary-900 dark:text-white">

‎src/pages/fr/index.astro‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const pageTitle = `${siteContent.company} | ${siteContent.tagline}`;
2020

2121
<main>
2222
<!-- Hero Section with LLM Firewall Sidebar -->
23-
<section class="section-padding bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-secondary-900 dark:via-secondary-800 dark:to-primary-900/20 relative overflow-hidden">
23+
<section class="py-12 md:py-16 lg:py-20 bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-secondary-900 dark:via-secondary-800 dark:to-primary-900/20 relative overflow-hidden">
2424
<!-- Subtle security motif background -->
2525
<div class="absolute inset-0 opacity-5 dark:opacity-10">
2626
<svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px]" viewBox="0 0 200 200" fill="none">
@@ -110,6 +110,16 @@ const pageTitle = `${siteContent.company} | ${siteContent.tagline}`;
110110
</a>
111111
</div>
112112
</div>
113+
114+
<!-- Scroll Indicator -->
115+
<div class="mt-12 flex justify-center">
116+
<a href="#services" class="scroll-indicator group flex flex-col items-center gap-2 text-secondary-400 hover:text-primary-600 dark:text-secondary-500 dark:hover:text-primary-400 transition-colors">
117+
<span class="text-xs font-medium uppercase tracking-widest">Defiler</span>
118+
<svg class="h-6 w-6 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
119+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
120+
</svg>
121+
</a>
122+
</div>
113123
</div>
114124
</section>
115125

0 commit comments

Comments
 (0)