mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:41:09 +02:00
c6c4c5a552
- Create @manacore/shared-landing-ui package with reusable components (FeatureSection, StepsSection, FAQSection, CTASection, Card atoms) - Add complete landing page for manadeck app - Refactor märchenzauber landing to use shared components (remove local CTA, FAQ, Features, HowItWorks sections) - Add German localization for manacore and memoro landing pages - Update workspace configuration and package dependencies 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
88 lines
2.6 KiB
Text
88 lines
2.6 KiB
Text
---
|
|
/**
|
|
* Shared Steps/How It Works Section component
|
|
* Displays a step-by-step guide with alternating image positions
|
|
*/
|
|
import Container from '../atoms/Container.astro';
|
|
import Card from '../atoms/Card.astro';
|
|
import SectionHeader from '../atoms/SectionHeader.astro';
|
|
|
|
interface Step {
|
|
number: string | number;
|
|
title: string;
|
|
description: string;
|
|
image?: string;
|
|
imageAlt?: string;
|
|
}
|
|
|
|
interface Props {
|
|
title: string;
|
|
subtitle?: string;
|
|
steps: Step[];
|
|
showImages?: boolean;
|
|
alternateLayout?: boolean;
|
|
class?: string;
|
|
id?: string;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
subtitle,
|
|
steps,
|
|
showImages = true,
|
|
alternateLayout = true,
|
|
class: className = '',
|
|
id
|
|
} = Astro.props;
|
|
---
|
|
|
|
<section id={id} class:list={["py-16 md:py-24", className]}>
|
|
<Container>
|
|
<SectionHeader title={title} subtitle={subtitle} />
|
|
|
|
<div class="space-y-12 md:space-y-20">
|
|
{steps.map((step, index) => (
|
|
<div class:list={[
|
|
"flex flex-col gap-8 lg:gap-12 items-center",
|
|
alternateLayout && index % 2 === 0 ? "lg:flex-row" : "lg:flex-row-reverse"
|
|
]}>
|
|
<!-- Text Content -->
|
|
<div class="flex-1 text-center lg:text-left">
|
|
<div class="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
|
<div class="w-12 h-12 md:w-14 md:h-14 bg-[var(--color-primary)] rounded-full flex items-center justify-center shadow-lg">
|
|
<span class="text-white font-bold text-xl md:text-2xl">{step.number}</span>
|
|
</div>
|
|
<h3 class="font-bold text-xl md:text-2xl text-[var(--color-text-primary)]">
|
|
{step.title}
|
|
</h3>
|
|
</div>
|
|
<p class="text-[var(--color-text-secondary)] text-base md:text-lg leading-relaxed max-w-xl mx-auto lg:mx-0">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Image -->
|
|
{showImages && step.image && (
|
|
<div class="flex-1 w-full max-w-md lg:max-w-none">
|
|
<Card padding="none" class="overflow-hidden">
|
|
<div class="relative aspect-video bg-[var(--color-background-card-hover)]">
|
|
<img
|
|
src={step.image}
|
|
alt={step.imageAlt || step.title}
|
|
class="w-full h-full object-cover"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<slot name="cta" />
|
|
<slot />
|
|
</Container>
|
|
</section>
|