Integrate React components and update homepage layout: added Hero, Feature, Stats, Pricing, FAQ, Contact, and Footer sections; updated global styles and dependencies for React support.

This commit is contained in:
Matthias
2026-04-21 10:11:13 +02:00
parent 54590826c7
commit ccd1cc46dc
19 changed files with 2416 additions and 498 deletions

View File

@@ -1,102 +1,37 @@
---
import { Contact21 } from "@/components/contact21";
import { Faq7 } from "@/components/faq7";
import { Feature284 } from "@/components/feature284";
import { Footer27 } from "@/components/footer27";
import { Hero235 } from "@/components/hero235";
import { Pricing4 } from "@/components/pricing4";
import { Stats11 } from "@/components/stats11";
import "@/styles/global.css";
---
<html lang="de">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Website im Aufbau</title>
<script
src="https://rybbit.matthias.lol/api/script.js"
data-site-id="63eb61dcdf55"
defer
></script>
<style>
:root {
color-scheme: light;
font-family: "Georgia", "Times New Roman", serif;
background: linear-gradient(180deg, #f7f3eb 0%, #ece4d7 100%);
color: #1f1811;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.85), transparent 40%),
linear-gradient(180deg, #f7f3eb 0%, #ece4d7 100%);
}
main {
width: min(100%, 560px);
padding: 40px 32px;
border: 1px solid rgba(64, 43, 24, 0.14);
border-radius: 24px;
background: rgba(255, 252, 247, 0.88);
box-shadow: 0 20px 60px rgba(60, 41, 24, 0.12);
text-align: center;
}
h1 {
margin: 0 0 16px;
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: 1.1;
}
p {
margin: 0;
font-size: 1.0625rem;
line-height: 1.7;
}
p + p {
margin-top: 16px;
}
a {
color: #6d2f14;
font-weight: 700;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
word-break: break-word;
}
a:hover,
a:focus-visible {
color: #8a3a18;
}
@media (max-width: 640px) {
body {
padding: 16px;
}
main {
padding: 32px 22px;
border-radius: 20px;
}
}
</style>
</head>
<body>
<main>
<h1>Website in Arbeit</h1>
<p>Ich arbeite gerade an dieser Website.</p>
<p>
Bei Fragen oder Anliegen erreichen Sie mich unter
<a href="mailto:support@matthiasmeister.dev">support@matthiasmeister.dev</a>.
</p>
</main>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Website</title>
<script
src="https://rybbit.matthias.lol/api/script.js"
data-site-id="63eb61dcdf55"
defer
></script>
</head>
<body>
<Hero235 client:load />
<div class="mx-auto w-full max-w-7xl">
<Feature284 client:load />
<Stats11 client:load />
<Pricing4 client:load />
<Faq7 client:load />
<Contact21 client:load />
<Footer27 client:load />
</div>
</body>
</html>