Skip to content

feat: mobile-friendly refactor #256

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marco-souza merged 1 commit into from
Apr 26, 2026
Merged

feat: mobile-friendly refactor #256

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/components/marketing/Hero.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const { content } = Astro.props;
---

<section
class="from-base-100 via-base-200/40 to-base-100 relative overflow-hidden border-b border-base-300/60 bg-linear-to-br py-28 md:py-36"
class="from-base-100 via-base-200/40 to-base-100 relative overflow-hidden border-b border-base-300/60 bg-linear-to-br py-16 md:py-28 lg:py-36"
aria-labelledby="hero-heading"
>
<div
Expand All @@ -25,17 +25,17 @@ const { content } = Astro.props;
>
</div>

<div class="relative mx-auto grid grid-cols-2 max-w-6xl gap-10 px-4 py-16 md:flex-row md:items-center md:py-24 lg:gap-16">
<div class="flex-1">
<p class="text-primary mb-3 text-sm font-semibold tracking-wide uppercase">{content.eyebrow}</p>
<h1 id="hero-heading" class="mb-5 text-4xl leading-tight font-bold tracking-tight md:text-5xl lg:text-6xl">
<div class="relative mx-auto flex flex-col md:flex-row max-w-6xl gap-8 md:gap-10 lg:gap-16 px-4 py-12 md:py-16 lg:py-24 items-center">
<div class="flex-1 text-center md:text-left">
<p class="text-primary mb-2 md:mb-3 text-xs md:text-sm font-semibold tracking-wide uppercase">{content.eyebrow}</p>
<h1 id="hero-heading" class="mb-4 md:mb-5 text-3xl md:text-5xl lg:text-6xl leading-tight font-bold tracking-tight">
{content.headline}
</h1>
<p class="text-base-content/90 mb-8 text-lg leading-relaxed md:text-xl">
<p class="text-base-content/90 mb-6 md:mb-8 text-base md:text-lg leading-relaxed md:text-xl">
{content.subhead}
</p>
{(content.primaryCta ?? content.secondaryCta) && (
<div class="flex flex-wrap gap-3">
<div class="flex flex-wrap gap-3 justify-center md:justify-start">
{content.primaryCta && (
<a href={content.primaryCta.href} class="btn btn-primary btn-lg no-underline">
{content.primaryCta.label}
Expand All @@ -50,6 +50,6 @@ const { content } = Astro.props;
)}
</div>

<Logo size="full" showTitle={false} class="mb-4 scale-scale"/>
<Logo size="full" showTitle={false} class="mb-4 scale-scale hidden md:block"/>
</div>
</section>
2 changes: 1 addition & 1 deletion src/components/marketing/HowToHelp.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const { items } = Astro.props;
const t = useTranslations();
---

<div class="grid gap-6 md:grid-cols-3">
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{
items.map((item) => (
<article class="card border-base-300 bg-base-100 border shadow-sm">
Expand Down
8 changes: 4 additions & 4 deletions src/components/marketing/Section.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ const bg =
---

<section id={id} class:list={[bg, 'scroll-mt-28 border-b border-base-300/60', className]}>
<div class="mx-auto max-w-6xl px-4 py-16 md:py-24">
<div class="mx-auto max-w-6xl px-4 py-12 md:py-16 lg:py-24">
{
eyebrow && (
<p class="text-primary mb-2 text-sm font-semibold tracking-wide uppercase">{eyebrow}</p>
<p class="text-primary mb-2 text-xs md:text-sm font-semibold tracking-wide uppercase">{eyebrow}</p>
)
}
<h2 class="mb-4 text-3xl font-bold tracking-tight md:text-4xl">{title}</h2>
{subtitle && <p class="text-base-content/85 mb-8 max-w-3xl text-lg leading-relaxed">{subtitle}</p>}
<h2 class="mb-3 md:mb-4 text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight">{title}</h2>
{subtitle && <p class="text-base-content/85 mb-6 md:mb-8 max-w-3xl text-base md:text-lg leading-relaxed">{subtitle}</p>}
<slot />
</div>
</section>
2 changes: 1 addition & 1 deletion src/components/marketing/TestimonialGrid.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const { items } = Astro.props;
const t = useTranslations();
---

<div class="grid gap-8 md:grid-cols-2">
<div class="grid gap-4 md:gap-8 grid-cols-1 md:grid-cols-2">
{
items.map((item) => (
<figure class="border-base-300 bg-base-100/80 flex flex-col gap-4 rounded-2xl border p-6 shadow-sm">
Expand Down
22 changes: 10 additions & 12 deletions src/components/ui/CallToAction.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,24 @@ import { Icon } from 'astro-icon/components';
interface Props {
icon: string;
title: string;
description: string;
description?: string;
class?: string;
}

const { icon, title, description, class: className = '' } = Astro.props;
---

<section class={`py-16 md:py-24 relative overflow-hidden ${className}`}>
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-base-100 to-secondary/5"></div>
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent"></div>
<section class={`relative overflow-hidden bg-linear-to-br from-primary/5 via-base-100 to-secondary/5 py-12 md:py-16 lg:py-24 ${className}`}>
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent"></div>

<div class="relative mx-auto max-w-6xl px-4">
<div class="max-w-2xl mx-auto text-center">
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/20 mx-auto mb-6">
<Icon name={icon} class="w-8 h-8 text-primary-content" />
</div>
<h2 class="text-3xl font-bold mb-4">{title}</h2>
<p class="text-lg text-base-content/70 mb-8">{description}</p>
<div class="relative mx-auto max-w-4xl px-4 text-center">
<div class="w-12 h-12 md:w-16 md:h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg shadow-primary/20 mx-auto mb-4 md:mb-6">
<Icon name={icon} class="w-6 h-6 md:w-8 md:h-8 text-primary-content" />
</div>
<h2 class="text-xl md:text-2xl lg:text-3xl font-bold mb-3 md:mb-4">{title}</h2>
{description && <p class="text-base-content/70 mb-6 md:mb-8 max-w-2xl mx-auto text-base md:text-lg leading-relaxed">{description}</p>}
<div class="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center">
<slot />
</div>
<slot name="footer" />
</div>
</section>
20 changes: 10 additions & 10 deletions src/components/ui/HeroSection.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,26 +27,26 @@ const { eyebrow, title, subtitle, stats, class: className = '' } = Astro.props;
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-to-r from-primary/3 to-secondary/3 rounded-full blur-3xl"></div>
</div>

<div class="relative mx-auto max-w-6xl px-4 py-24 md:py-32">
<div class="relative mx-auto max-w-6xl px-4 py-16 md:py-20 lg:py-32">
{eyebrow && (
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6">
<div class="inline-flex items-center gap-2 px-3 py-1.5 md:px-4 md:py-2 rounded-full bg-primary/10 text-primary text-xs md:text-sm font-medium mb-4 md:mb-6">
<slot name="eyebrow-icon" />
<span>{eyebrow}</span>
</div>
)}

<h1 class="text-5xl md:text-6xl font-bold tracking-tight mb-6 bg-gradient-to-r from-base-content via-base-content to-base-content/70 bg-clip-text">
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight mb-4 md:mb-6 bg-gradient-to-r from-base-content via-base-content to-base-content/70 bg-clip-text">
{title}
</h1>

{subtitle && (
<p class="text-xl text-base-content/70 max-w-2xl leading-relaxed">
<p class="text-base md:text-lg lg:text-xl text-base-content/70 max-w-2xl leading-relaxed">
{subtitle}
</p>
)}

{stats.length > 0 && (
<div class="flex flex-wrap gap-6 mt-10">
<div class="flex flex-wrap gap-4 md:gap-6 mt-8 md:mt-10">
{stats.map((stat) => {
const colorClasses = {
primary: 'bg-primary/10 text-primary',
Expand All @@ -56,13 +56,13 @@ const { eyebrow, title, subtitle, stats, class: className = '' } = Astro.props;
};
const color = stat.color ?? 'blue';
return (
<div class="flex items-center gap-3">
<div class={`w-12 h-12 rounded-xl ${colorClasses[color]} flex items-center justify-center`}>
<Icon name={stat.icon} class="w-6 h-6" />
<div class="flex items-center gap-2 md:gap-3">
<div class={`w-10 h-10 md:w-12 md:h-12 rounded-xl ${colorClasses[color]} flex items-center justify-center`}>
<Icon name={stat.icon} class="w-5 h-5 md:w-6 md:h-6" />
</div>
<div>
<span class="block text-2xl font-bold">{stat.value}</span>
<span class="text-sm text-base-content/60">{stat.label}</span>
<span class="block text-xl md:text-2xl font-bold">{stat.value}</span>
<span class="text-xs md:text-sm text-base-content/60">{stat.label}</span>
</div>
</div>
);
Expand Down
10 changes: 5 additions & 5 deletions src/components/ui/SectionHeader.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ const colorGradients = {
};
---

<div class={`flex items-center gap-4 ${className}`}>
<div class={`w-14 h-14 rounded-2xl bg-gradient-to-br ${colorGradients[color]} flex items-center justify-center shadow-lg`}>
<Icon name={icon} class="w-7 h-7 text-primary-content" />
<div class={`flex items-center gap-3 md:gap-4 ${className}`}>
<div class={`w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-gradient-to-br ${colorGradients[color]} flex items-center justify-center shadow-lg`}>
<Icon name={icon} class="w-6 h-6 md:w-7 md:h-7 text-primary-content" />
</div>
<div>
<h2 class="text-3xl font-bold">{title}</h2>
{subtitle && <p class="text-base-content/60">{subtitle}</p>}
<h2 class="text-2xl md:text-3xl font-bold">{title}</h2>
{subtitle && <p class="text-sm md:text-base text-base-content/60">{subtitle}</p>}
</div>
</div>
12 changes: 6 additions & 6 deletions src/components/ui/StepItem.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@ const COLORS: Record<StepColor, { text: string; gradient: string; gradientHover:
const c = COLORS[color];
---

<li class="group relative pl-16">
<div class={`absolute left-0 top-0 w-12 h-12 rounded-xl bg-gradient-to-br ${c.gradient} flex items-center justify-center group-hover:scale-110 ${c.gradientHover} transition-all duration-300`}>
<Icon name={icon} class={`w-5 h-5 ${c.text}`} />
<li class="group relative pl-14 md:pl-16">
<div class={`absolute left-0 top-0 w-10 h-10 md:w-12 md:h-12 rounded-xl bg-gradient-to-br ${c.gradient} flex items-center justify-center group-hover:scale-110 ${c.gradientHover} transition-all duration-300`}>
<Icon name={icon} class={`w-4 h-4 md:w-5 md:h-5 ${c.text}`} />
</div>
<div class="absolute left-5 top-12 bottom-0 w-px bg-gradient-to-b from-base-300 to-transparent"></div>
<div class="absolute left-4 md:left-5 top-10 md:top-12 bottom-0 w-px bg-gradient-to-b from-base-300 to-transparent"></div>
<div>
<h3 class="text-lg font-semibold flex items-center gap-2">
<span class={`${c.text} font-mono text-sm`}>{step}</span>
<h3 class="text-base md:text-lg font-semibold flex items-center gap-2">
<span class={`${c.text} font-mono text-xs md:text-sm`}>{step}</span>
{title}
</h3>
<p class="text-base-content/70 text-sm leading-relaxed mt-1">{desc}</p>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const description = t('about.hero.subtitle');
class="mb-12"
/>

<ul class="grid gap-6 md:grid-cols-1 lg:grid-cols-3">
<ul class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{coreValues.map((value, index) => {
const cards = [
{ from: 'from-blue-500/5', to: 'to-blue-600/10', border: 'hover:border-blue-500/30', gradient: 'from-blue-500 to-blue-600', icon: 'lucide:users' },
Expand Down Expand Up @@ -127,7 +127,7 @@ const description = t('about.hero.subtitle');
class="mb-8"
/>

<ul class="grid gap-4 md:grid-cols-1 lg:grid-cols-3">
<ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{communicationChannels.map((ch) => (
<ChannelCard icon={ch.icon} title={t(ch.nameKey)} subtitle={t(ch.descKey)} color={ch.color} />
))}
Expand Down
15 changes: 13 additions & 2 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,8 +209,19 @@
}
}

@media (max-width: 720px) {
/* Reduced text size on mobile to keep content readable without aggressive scaling */
@media (max-width: 640px) {
body {
@apply text-lg;
@apply text-base;
}

h1 {
@apply text-4xl;
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-2xl;
}
}
Loading