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>
95 lines
2.7 KiB
Text
95 lines
2.7 KiB
Text
---
|
|
/**
|
|
* Shared Feature Section component
|
|
* Displays features in a responsive grid
|
|
*/
|
|
import Container from '../atoms/Container.astro';
|
|
import Card from '../atoms/Card.astro';
|
|
import SectionHeader from '../atoms/SectionHeader.astro';
|
|
|
|
interface Feature {
|
|
icon: string;
|
|
title: string;
|
|
description: string;
|
|
href?: string;
|
|
}
|
|
|
|
interface Props {
|
|
title: string;
|
|
subtitle?: string;
|
|
features: Feature[];
|
|
columns?: 2 | 3 | 4;
|
|
variant?: 'cards' | 'simple' | 'icons-left';
|
|
class?: string;
|
|
id?: string;
|
|
}
|
|
|
|
const {
|
|
title,
|
|
subtitle,
|
|
features,
|
|
columns = 3,
|
|
variant = 'cards',
|
|
class: className = '',
|
|
id
|
|
} = Astro.props;
|
|
|
|
const gridCols = {
|
|
2: 'md:grid-cols-2',
|
|
3: 'md:grid-cols-2 lg:grid-cols-3',
|
|
4: 'md:grid-cols-2 lg:grid-cols-4'
|
|
};
|
|
---
|
|
|
|
<section id={id} class:list={["py-16 md:py-24", className]}>
|
|
<Container>
|
|
<SectionHeader title={title} subtitle={subtitle} />
|
|
|
|
<div class:list={["grid gap-6 md:gap-8", gridCols[columns]]}>
|
|
{features.map((feature) => (
|
|
variant === 'cards' ? (
|
|
<Card variant="hover" padding="lg" as={feature.href ? 'a' : 'div'} href={feature.href}>
|
|
<div class="flex flex-col items-center text-center h-full">
|
|
<div class="text-4xl sm:text-5xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
|
|
{feature.icon}
|
|
</div>
|
|
<h3 class="font-semibold text-lg sm:text-xl text-[var(--color-text-primary)] mb-3">
|
|
{feature.title}
|
|
</h3>
|
|
<p class="text-[var(--color-text-secondary)] text-sm sm:text-base leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
) : variant === 'icons-left' ? (
|
|
<div class="flex gap-4">
|
|
<div class="flex-shrink-0 text-3xl">
|
|
{feature.icon}
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-lg text-[var(--color-text-primary)] mb-2">
|
|
{feature.title}
|
|
</h3>
|
|
<p class="text-[var(--color-text-secondary)] text-sm leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div class="text-center">
|
|
<div class="text-4xl mb-4">{feature.icon}</div>
|
|
<h3 class="font-semibold text-lg text-[var(--color-text-primary)] mb-2">
|
|
{feature.title}
|
|
</h3>
|
|
<p class="text-[var(--color-text-secondary)] text-sm leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
)
|
|
))}
|
|
</div>
|
|
|
|
<slot name="highlight" />
|
|
<slot />
|
|
</Container>
|
|
</section>
|