mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 01:49:40 +02:00
df0b849408
New service that generates static Astro landing pages for organizations
and deploys them to Cloudflare Pages at {slug}.mana.how.
Components:
- Landing Builder Service (NestJS, port 3030) with Astro template
- Admin UI in Manacore web dashboard at /organizations/[id]/landing
- TeamSection + ContactSection for shared-landing-ui
- Two org themes (classic dark, warm light)
- LandingPageConfig types in shared-types
- Docker + CI/CD integration for Mac Mini deployment
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
127 lines
4 KiB
Text
127 lines
4 KiB
Text
---
|
|
/**
|
|
* Shared Contact Section component
|
|
* Displays contact information (email, phone, address) in a clean layout.
|
|
*/
|
|
import Container from '../atoms/Container.astro';
|
|
import SectionHeader from '../atoms/SectionHeader.astro';
|
|
import Card from '../atoms/Card.astro';
|
|
|
|
interface Props {
|
|
title: string;
|
|
subtitle?: string;
|
|
email?: string;
|
|
phone?: string;
|
|
address?: string;
|
|
class?: string;
|
|
id?: string;
|
|
}
|
|
|
|
const { title, subtitle, email, phone, address, class: className = '', id } = Astro.props;
|
|
|
|
const hasContactInfo = email || phone || address;
|
|
---
|
|
|
|
<section id={id} class:list={['py-16 md:py-24', className]}>
|
|
<Container size="md">
|
|
<SectionHeader title={title} subtitle={subtitle} />
|
|
|
|
{
|
|
hasContactInfo && (
|
|
<div class="max-w-2xl mx-auto">
|
|
<Card variant="bordered" padding="lg">
|
|
<div class="space-y-6">
|
|
{email && (
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-lg bg-[var(--color-primary)] bg-opacity-10 flex items-center justify-center flex-shrink-0">
|
|
<svg
|
|
class="w-5 h-5 text-[var(--color-primary)]"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-[var(--color-text-muted)] mb-1">E-Mail</p>
|
|
<a
|
|
href={`mailto:${email}`}
|
|
class="text-[var(--color-text-primary)] hover:text-[var(--color-primary)] transition-colors"
|
|
>
|
|
{email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{phone && (
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-lg bg-[var(--color-primary)] bg-opacity-10 flex items-center justify-center flex-shrink-0">
|
|
<svg
|
|
class="w-5 h-5 text-[var(--color-primary)]"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-[var(--color-text-muted)] mb-1">Telefon</p>
|
|
<a
|
|
href={`tel:${phone.replace(/\s/g, '')}`}
|
|
class="text-[var(--color-text-primary)] hover:text-[var(--color-primary)] transition-colors"
|
|
>
|
|
{phone}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{address && (
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-lg bg-[var(--color-primary)] bg-opacity-10 flex items-center justify-center flex-shrink-0">
|
|
<svg
|
|
class="w-5 h-5 text-[var(--color-primary)]"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-[var(--color-text-muted)] mb-1">Adresse</p>
|
|
<p class="text-[var(--color-text-primary)] whitespace-pre-line">{address}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
</Container>
|
|
</section>
|