Skip to content

admin/dorfarchiv

PublicMirror
Clone

Mirror of https://forge.levinkeller.de/levin/dorfarchiv.git

06c4ddf6b7fe1f632d16009afcaa58f59faa87e2

Branches

    Levin Kellerapply linting rules7a70d0aHistory
    160 lines · 4.9 KB
    Raw
    1import Link from '@docusaurus/Link'
    2import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
    3import Heading from '@theme/Heading'
    4import Layout from '@theme/Layout'
    5import clsx from 'clsx'
    6import type { ReactNode } from 'react'
    7
    8import styles from './index.module.css'
    9
    10function HomepageHeader() {
    11 const { siteConfig } = useDocusaurusContext()
    12 return (
    13 <header className={clsx('hero hero--primary', styles.heroBanner)}>
    14 <div className="container">
    15 <Heading as="h1" className="hero__title">
    16 {siteConfig.title}
    17 </Heading>
    18 <p className="hero__subtitle">{siteConfig.tagline}</p>
    19 <div className={styles.buttons}>
    20 <Link
    21 className="button button--secondary button--lg"
    22 to="/unterlagen/intro"
    23 >
    24 Zu den Unterlagen
    25 </Link>
    26 <Link
    27 className="button button--primary button--lg"
    28 to="/berichte"
    29 style={{ marginLeft: '1rem' }}
    30 >
    31 Berichte lesen
    32 </Link>
    33 </div>
    34 </div>
    35 </header>
    36 )
    37}
    38
    39function FeatureCard({
    40 title,
    41 description,
    42 icon,
    43}: {
    44 title: string
    45 description: string
    46 icon: string
    47}) {
    48 return (
    49 <div className="col col--4">
    50 <div
    51 className="card shadow--md margin-bottom--lg padding--lg"
    52 style={{ height: '100%' }}
    53 >
    54 <div className="text--center">
    55 <div style={{ fontSize: '3rem' }}>{icon}</div>
    56 </div>
    57 <div className="text--center margin-top--md">
    58 <h3>{title}</h3>
    59 <p>{description}</p>
    60 </div>
    61 </div>
    62 </div>
    63 )
    64}
    65
    66function HomepageContent() {
    67 return (
    68 <>
    69 <section
    70 className="padding-vert--xl"
    71 style={{ backgroundColor: 'var(--ifm-color-emphasis-100)' }}
    72 >
    73 <div className="container">
    74 <div className="row">
    75 <div className="col col--8 col--offset-2 text--center">
    76 <Heading as="h2" className="margin-bottom--md">
    77 Willkommen im digitalen Dorfarchiv Rössing
    78 </Heading>
    79 <p className="hero__subtitle">
    80 Rössing ist ein Dorf in der Gemeinde Nordstemmen im Landkreis
    81 Hildesheim. Dieses digitale Archiv bewahrt die Geschichte und
    82 Geschichten unseres Dorfes für kommende Generationen.
    83 </p>
    84 </div>
    85 </div>
    86 </div>
    87 </section>
    88
    89 <section className="padding-vert--xl">
    90 <div className="container">
    91 <div className="row">
    92 <FeatureCard
    93 icon="📚"
    94 title="Unterlagen durchstöbern"
    95 description="Historische Dokumente, Fotografien und Materialien zur Dorfgeschichte digital aufbereitet und leicht zugänglich."
    96 />
    97 <FeatureCard
    98 icon="📝"
    99 title="Berichte lesen"
    100 description="Geschichten, Chroniken und Berichte über das Leben im Dorf – von historischen Ereignissen bis zu aktuellen Entwicklungen."
    101 />
    102 <FeatureCard
    103 icon="🤝"
    104 title="Erinnerungen teilen"
    105 description="Tragen Sie eigene Beiträge zur Dorfgeschichte bei und helfen Sie mit, unser kollektives Gedächtnis zu bewahren."
    106 />
    107 </div>
    108 </div>
    109 </section>
    110
    111 <section
    112 className="padding-vert--xl"
    113 style={{ backgroundColor: 'var(--ifm-color-emphasis-100)' }}
    114 >
    115 <div className="container">
    116 <div className="row">
    117 <div className="col col--10 col--offset-1 text--center">
    118 <Heading as="h2" className="margin-bottom--lg">
    119 Ziel des Archivs
    120 </Heading>
    121 <div className="avatar avatar--vertical margin-bottom--lg">
    122 <div className="avatar__intro">
    123 <p className="hero__subtitle">
    124 Unser Ziel ist es, die reichhaltige Geschichte Rössings zu
    125 dokumentieren und zugänglich zu machen. Von alten
    126 Fotografien über Zeitungsartikel bis hin zu persönlichen
    127 Erinnerungen – jedes Dokument trägt dazu bei, das kollektive
    128 Gedächtnis unseres Dorfes zu bewahren.
    129 </p>
    130 </div>
    131 </div>
    132 <div className="margin-top--lg">
    133 <Link
    134 className="button button--primary button--lg"
    135 to="/unterlagen/intro"
    136 >
    137 Mehr erfahren
    138 </Link>
    139 </div>
    140 </div>
    141 </div>
    142 </div>
    143 </section>
    144 </>
    145 )
    146}
    147
    148export default function Home(): ReactNode {
    149 return (
    150 <Layout
    151 title={`Willkommen`}
    152 description="Digitales Dorfarchiv Rössing - Geschichte und Geschichten aus Rössing bewahren"
    153 >
    154 <HomepageHeader />
    155 <main>
    156 <HomepageContent />
    157 </main>
    158 </Layout>
    159 )
    160}