Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(layout): switch index.astro to configurable section components driven by siteConfig

Browse Source
This commit is contained in:
Daniel S
2026-08-08 18:56:30 +02:00
parent c51629b229
commit c136e930c9
5 changed files with 254 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/pages/index.astro
View File

@@ -2,56 +2,47 @@
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import HeroAndLiquidGlass from '../components/HeroAndLiquidGlass.astro';
import OnboardingWizard from '../components/OnboardingWizard.astro';
import HeroSection from '../components/sections/HeroSection.astro';
import BentoGrid from '../components/sections/BentoGrid.astro';
import ContactSection from '../components/sections/ContactSection.astro';
import FallbackSection from '../components/sections/FallbackSection.astro';
import { loadWaasConfigs } from '../utils/configLoader';
import { THEME_PRESETS } from '../utils/themePresets';
const { siteConfig, themeConfig, smtpConfig } = loadWaasConfigs();
const activePreset = THEME_PRESETS[themeConfig.activePreset] || THEME_PRESETS.corporateDark;
const colors = activePreset.colors;
const sectionComponents: Record<string, any> = {
hero: HeroSection,
bento: BentoGrid,
services: BentoGrid,
contact: ContactSection
};
---
<Layout title="N&D i-t SOLUTIONS | Webdesign & Entwicklung">
<Navbar />
<main>
{/* Clean, modular Hero and Liquid Glass section */}
<HeroAndLiquidGlass />
<!-- Multi-step Onboarding Wizard -->
<OnboardingWizard />
<!-- Contact section (separate, clean layout) -->
<section id="contact" class="py-20 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
<div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px] transition-opacity duration-300"></div>
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-slate-200 dark:border-white/5 rounded-2xl p-8 sm:p-10 transition-all duration-300 relative tactile-noise shadow-sm dark:shadow-none">
<span class="absolute top-2.5 left-2.5 w-2 h-2 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute top-2.5 right-2.5 w-2 h-2 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute bottom-2.5 left-2.5 w-2 h-2 border-b border-l border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute bottom-2.5 right-2.5 w-2 h-2 border-b border-r border-slate-300 dark:border-zinc-700/50"></span>
<h2 class="text-3xl font-extrabold text-slate-900 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Bereit für Ihr Projekt?</h2>
<p class="text-slate-600 dark:text-zinc-400 text-xs mb-8 transition-colors duration-300">
Schreiben Sie uns direkt. Wir melden uns innerhalb von 24 Stunden persönlich bei Ihnen.
</p>
<form class="space-y-4" onsubmit="event.preventDefault()">
<div>
<label for="name" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Name</label>
<input type="text" id="name" required aria-required="true" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-900 transition-all" />
</div>
<div>
<label for="email" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">E-Mail</label>
<input type="email" id="email" required aria-required="true" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-900 transition-all" />
</div>
<div>
<label for="message" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Nachricht</label>
<textarea id="message" rows="4" required aria-required="true" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-slate-900 transition-all resize-none"></textarea>
</div>
<button type="submit" class="w-full py-3 bg-sky-600 hover:bg-sky-700 dark:bg-brand-arcticBlue text-white dark:text-zinc-950 font-bold text-xs uppercase tracking-wider rounded dark:hover:bg-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 focus:outline-none">
Anfrage senden
</button>
</form>
</div>
</div>
</section>
</main>
<Footer />
<Layout title={siteConfig.siteName} description={siteConfig.metaDescription}>
<div
class="min-h-screen transition-colors duration-500 font-sans relative overflow-hidden"
style={`background-color: ${themeConfig.customColors?.bg || colors.bg}; color: ${colors.text};`}
>
<Navbar />
<main>
{siteConfig.sectionsOrder.map((sectionKey) => {
if (sectionKey === 'hero') {
return <HeroSection config={siteConfig.hero} />;
}
if (sectionKey === 'bento' || sectionKey === 'services') {
return <BentoGrid config={siteConfig.bento} />;
}
if (sectionKey === 'contact') {
return <ContactSection contactConfig={siteConfig.contact} smtpConfig={smtpConfig} />;
}
return <FallbackSection sectionName={sectionKey} />;
})}
</main>
<Footer />
</div>
</Layout>