Marc Mintel
cfda0daef9
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 11s
Build & Deploy / 🧪 QA (push) Successful in 4m5s
Build & Deploy / 🏗️ Build (push) Successful in 9m26s
Build & Deploy / 🚀 Deploy (push) Successful in 25s
Build & Deploy / 🩺 Health Check (push) Failing after 12s
Build & Deploy / 🔔 Notify (push) Successful in 2s
560 lines
23 KiB
TypeScript
560 lines
23 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { motion, useScroll, useTransform } from "framer-motion";
|
||
import { Section } from "../../../src/components/Section";
|
||
import { Reveal } from "../../../src/components/Reveal";
|
||
import {
|
||
H1,
|
||
H2,
|
||
H3,
|
||
LeadText,
|
||
Label,
|
||
MonoLabel,
|
||
BodyText,
|
||
} from "../../../src/components/Typography";
|
||
import { BackgroundGrid, Container } from "../../../src/components/Layout";
|
||
import { MotionButton } from "../../../src/components/Button";
|
||
import { IframeSection } from "../../../src/components/IframeSection";
|
||
import {
|
||
Activity,
|
||
ArrowRight,
|
||
ShieldCheck,
|
||
Cpu,
|
||
Server,
|
||
Layers,
|
||
} from "lucide-react";
|
||
|
||
import { Marker } from "../../../src/components/Marker";
|
||
|
||
export default function KLZCablesCaseStudy() {
|
||
const { scrollYProgress } = useScroll();
|
||
const heroY = useTransform(scrollYProgress, [0, 0.2], [0, -20]);
|
||
const heroOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0]);
|
||
const gridRotate = useTransform(scrollYProgress, [0, 1], [0, 2]);
|
||
|
||
return (
|
||
<div className="flex flex-col bg-white relative min-h-screen selection:bg-slate-900 selection:text-white overflow-hidden">
|
||
<motion.div
|
||
style={{ opacity: heroOpacity }}
|
||
className="fixed inset-0 z-0 pointer-events-none"
|
||
>
|
||
<BackgroundGrid />
|
||
</motion.div>
|
||
|
||
{/* --- HERO: INDUSTRIAL INFRASTRUCTURE --- */}
|
||
<section className="relative min-h-[40vh] py-20 overflow-hidden border-b border-slate-100 bg-white">
|
||
<motion.div
|
||
style={{ y: heroY, rotate: gridRotate }}
|
||
className="absolute inset-0 bg-[linear-gradient(to_right,#f1f5f9_1px,transparent_1px),linear-gradient(to_bottom,#f1f5f9_1px,transparent_1px)] bg-[size:6rem_6rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_20%,transparent_100%)] pointer-events-none opacity-40"
|
||
/>
|
||
|
||
<Container variant="narrow" className="relative z-10">
|
||
<div className="space-y-12">
|
||
<Reveal direction="down" blur>
|
||
<div className="inline-flex items-center gap-6">
|
||
<motion.div
|
||
initial={{ width: 0 }}
|
||
whileInView={{ width: 48 }}
|
||
transition={{ duration: 1, ease: "circOut" }}
|
||
className="h-px bg-slate-900"
|
||
/>
|
||
<div className="space-y-1">
|
||
<MonoLabel className="text-slate-900 tracking-[0.4em]">
|
||
SYSTEM-ARCHITEKTUR // 2025
|
||
</MonoLabel>
|
||
<Label className="text-[10px] text-slate-400 font-mono">
|
||
HARDENED WORDPRESS // VARNISH STACK
|
||
</Label>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
|
||
<div className="space-y-12">
|
||
<Reveal delay={0.1} direction="up" scale={0.98} blur>
|
||
<H1 className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900">
|
||
KLZ Cables
|
||
<br />
|
||
<span className="text-slate-100">Case Study.</span>
|
||
</H1>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.2} direction="right" blur>
|
||
<div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12">
|
||
<LeadText className="text-2xl md:text-4xl leading-tight text-slate-900 font-medium">
|
||
Engineering eines <br />
|
||
<Marker delay={0.2}>B2B Commerce Systems.</Marker>
|
||
</LeadText>
|
||
<BodyText className="mt-6 text-lg md:text-xl text-slate-500 max-w-xl leading-relaxed font-serif italic">
|
||
Vom statischen Altsystem zum industriellen Standard. Ich
|
||
habe das KLZ-System auf das Wesentliche reduziert: Hardened
|
||
Infrastructure, parametrische Datenpflege und zero
|
||
maintenance.
|
||
</BodyText>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<Reveal delay={0.4} direction="up" scale={0.98} blur>
|
||
<div className="flex flex-wrap gap-12 md:gap-24 pt-12 border-t border-slate-100">
|
||
<div className="space-y-2">
|
||
<Label className="text-slate-400">Data Integrity</Label>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-2.5 h-2.5 bg-[rgba(129,199,132,1)] rounded-full animate-pulse" />
|
||
<span className="text-2xl font-bold font-mono text-slate-900 tracking-tight">
|
||
Relational Data
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label className="text-slate-400">Security Layer</Label>
|
||
<div className="flex items-center gap-3 text-2xl font-bold font-mono text-slate-900">
|
||
<ShieldCheck className="w-6 h-6 text-[rgba(129,199,132,1)]" />
|
||
<span>WP + Varnish</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
|
||
{/* --- SECTION 01: ARCHITECTURE --- */}
|
||
<Section
|
||
number="01"
|
||
title="System-Hardening & Logic"
|
||
borderBottom
|
||
containerVariant="normal"
|
||
>
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
|
||
<div className="md:col-span-12 mb-12">
|
||
<Reveal direction="left" blur>
|
||
<H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
|
||
Architektur- <br />
|
||
Refactor.
|
||
</H2>
|
||
</Reveal>
|
||
</div>
|
||
<div className="md:col-span-7 space-y-12">
|
||
<Reveal delay={0.1} direction="up" blur>
|
||
<div className="space-y-10">
|
||
<BodyText className="text-2xl leading-relaxed font-serif italic text-slate-500">
|
||
Vom statischen HTML zur zentralen Daten-Instanz.
|
||
</BodyText>
|
||
<BodyText className="text-xl text-slate-600 leading-relaxed">
|
||
Ich habe die KLZ-Architektur radikal auf einen entkoppelten
|
||
High-Performance-Stack umgestellt. WordPress fungiert hier
|
||
nicht als CMS-Baukasten, sondern speichert alle technischen
|
||
Attribute in einer zentralen relationalen Instanz. Durch die
|
||
Implementierung nativer PHP-Services und den Verzicht auf
|
||
volatile Drittanbieter-Plugins wurde ein System geschaffen,
|
||
das keine technologischen Überraschungen zulässt.{" "}
|
||
<Marker delay={0.5}>Stability by Design.</Marker>
|
||
</BodyText>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
<div className="md:col-span-5 relative">
|
||
<Reveal delay={0.3} direction="right" scale={0.98} blur>
|
||
<motion.div
|
||
whileHover={{ y: -5, scale: 1.01 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 25 }}
|
||
className="p-12 bg-slate-50 rounded-[3rem] border border-slate-100 space-y-12 relative overflow-hidden group shadow-sm text-left"
|
||
>
|
||
<div className="space-y-8 relative z-10">
|
||
<Label className="text-slate-900">System Metriken</Label>
|
||
<div className="space-y-8">
|
||
{[
|
||
{
|
||
label: "Edge Caching",
|
||
desc: "Varnish + W3TC Object Cache",
|
||
icon: <Server className="w-5 h-5 text-slate-400" />,
|
||
},
|
||
{
|
||
label: "Analytics",
|
||
desc: "Independent (Global Data Compliance)",
|
||
icon: <Activity className="w-5 h-5 text-slate-400" />,
|
||
},
|
||
{
|
||
label: "Custom Core",
|
||
desc: "REST via Native Services",
|
||
icon: <Cpu className="w-5 h-5 text-slate-400" />,
|
||
},
|
||
].map((item, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ x: -20, opacity: 0 }}
|
||
whileInView={{ x: 0, opacity: 1 }}
|
||
transition={{ delay: 0.5 + i * 0.1, duration: 0.5 }}
|
||
className="flex gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
|
||
>
|
||
<div className="shrink-0 mt-1">{item.icon}</div>
|
||
<div className="space-y-1">
|
||
<MonoLabel className="text-[10px] text-slate-400">
|
||
{item.label}
|
||
</MonoLabel>
|
||
<BodyText className="text-base font-bold text-slate-900">
|
||
{item.desc}
|
||
</BodyText>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* --- SHOWCASE: LANDING --- */}
|
||
<section className="py-32 bg-slate-50 border-y border-slate-100 overflow-hidden relative">
|
||
<div className="w-full max-w-[1920px] mx-auto px-4 md:px-12 relative z-10">
|
||
<Reveal direction="none" blur>
|
||
<div className="relative mb-16 flex justify-between items-end">
|
||
<div className="space-y-6">
|
||
<Label className="text-slate-500">
|
||
Infrastructure Validation
|
||
</Label>
|
||
<H3 className="text-5xl md:text-8xl tracking-tighter">
|
||
Global Hub.
|
||
</H3>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
|
||
<motion.div
|
||
whileHover={{ scale: 1.01 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||
>
|
||
<IframeSection
|
||
src="/showcase/klz-cables.com/index.html"
|
||
height="850px"
|
||
desktopWidth={1920}
|
||
allowScroll
|
||
browserFrame
|
||
className="w-full h-full transition-all duration-1000 ease-in-out no-scrollbar"
|
||
/>
|
||
</motion.div>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* --- SECTION 02: TECHNICAL DETAIL --- */}
|
||
<Section
|
||
number="02"
|
||
title="Asset Management"
|
||
variant="white"
|
||
borderBottom
|
||
containerVariant="wide"
|
||
>
|
||
<div className="grid grid-cols-1 gap-16">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-end">
|
||
<Reveal direction="left" blur>
|
||
<div className="space-y-6">
|
||
<Label className="text-slate-400">Asset Pipelines</Label>
|
||
<H3 className="text-4xl md:text-6xl tracking-tighter">
|
||
Automated Documentation.
|
||
</H3>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.1} direction="right" blur>
|
||
<BodyText className="text-xl text-slate-500 pb-2 font-serif italic">
|
||
Für Hochspannungs-N2XS(F)2Y Kabel ist Datentreue eine
|
||
Sicherheitsanforderung. Ich habe eine automatisierte
|
||
Asset-Pipeline entwickelt, die technische Datenblätter
|
||
serverseitig generiert und validiert.
|
||
</BodyText>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
|
||
<motion.div
|
||
whileHover={{ scale: 1.01 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||
className="relative w-full group"
|
||
>
|
||
<div className="relative w-full overflow-visible">
|
||
<IframeSection
|
||
src="/showcase/klz-cables.com/power-cables-medium-voltage-cables.html"
|
||
height="1000px"
|
||
desktopWidth={1920}
|
||
allowScroll
|
||
offsetY={100}
|
||
browserFrame
|
||
className="w-full transition-all duration-1000 no-scrollbar"
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
<Section
|
||
number="03"
|
||
title="Katalog-Architektur"
|
||
borderBottom
|
||
containerVariant="wide"
|
||
>
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
||
<div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
|
||
<Reveal direction="down" blur>
|
||
<H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
|
||
Fokus auf <br />
|
||
<Marker delay={0.2}>Spezifikationen.</Marker>
|
||
</H3>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div className="lg:col-span-8 relative group">
|
||
<Reveal width="100%" direction="left" scale={0.98} blur>
|
||
<motion.div
|
||
whileHover={{ scale: 1.01 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||
className="relative h-[650px] w-full overflow-hidden group"
|
||
>
|
||
<IframeSection
|
||
src="/showcase/klz-cables.com/which-cables-for-wind-power-differences-from-low-to-extra-high-voltage-explained-2.html"
|
||
height="100%"
|
||
desktopWidth={1920}
|
||
allowScroll
|
||
browserFrame
|
||
className="h-full w-full transition-all duration-700 no-scrollbar"
|
||
/>
|
||
</motion.div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div className="lg:col-span-4 space-y-10 relative z-10">
|
||
<Reveal delay={0.2} direction="right" blur>
|
||
<div className="space-y-6">
|
||
<Label className="text-slate-400">Katalog-Struktur</Label>
|
||
<LeadText className="text-lg">
|
||
Der Produktbereich wurde konsequent auf die Bedürfnisse
|
||
technischer Planer optimiert. Klare Hierarchien und der
|
||
Verzicht auf E-Commerce-Rauschen ermöglichen einen direkten
|
||
Zugriff auf Kabel-Parameter und Datenblätter.
|
||
</LeadText>
|
||
<motion.div
|
||
whileHover={{ x: 10 }}
|
||
className="p-8 bg-white border border-slate-200 rounded-3xl shadow-sm"
|
||
>
|
||
<Layers className="w-6 h-6 text-slate-400 mb-4" />
|
||
<BodyText className="text-sm font-medium">
|
||
Strukturierte Aufbereitung technischer Produktdaten.
|
||
</BodyText>
|
||
</motion.div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* --- SECTION 04: CONTENT ENGINE --- */}
|
||
<Section
|
||
number="04"
|
||
title="Content Strategy"
|
||
variant="white"
|
||
borderBottom
|
||
containerVariant="wide"
|
||
>
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
|
||
<div className="lg:col-span-4 space-y-10 order-2 lg:order-1">
|
||
<Reveal direction="left" blur>
|
||
<div className="space-y-6">
|
||
<Label className="text-slate-400">Knowledge Transfer</Label>
|
||
<H3 className="text-4xl md:text-6xl tracking-tighter">
|
||
Insights & News.
|
||
</H3>
|
||
<BodyText className="text-xl text-slate-500 font-serif italic">
|
||
Die News-Engine dient als technischer Hub für
|
||
Industrie-Standards. Durch die Implementierung eines
|
||
performanten Blog-Systems wird Fachwissen direkt an die
|
||
Zielgruppe kommuniziert.
|
||
</BodyText>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
<div className="lg:col-span-8 order-1 lg:order-2">
|
||
<Reveal width="100%" direction="right" scale={0.98} blur>
|
||
<motion.div
|
||
whileHover={{ scale: 1.01 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||
className="relative h-[700px] w-full"
|
||
>
|
||
<IframeSection
|
||
src="/showcase/klz-cables.com/blog.html"
|
||
height="100%"
|
||
desktopWidth={1600}
|
||
allowScroll
|
||
browserFrame
|
||
className="h-full w-full no-scrollbar"
|
||
/>
|
||
</motion.div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* --- SECTION 05: TEAM & TRUST --- */}
|
||
<Section
|
||
number="05"
|
||
title="Ergebnis"
|
||
borderBottom
|
||
containerVariant="wide"
|
||
>
|
||
<div className="space-y-16 text-center">
|
||
<Reveal direction="up" blur>
|
||
<H3 className="text-5xl md:text-8xl tracking-tighter">
|
||
System-Lifecycle.
|
||
</H3>
|
||
<LeadText className="mx-auto max-w-2xl pt-6 text-xl">
|
||
Die Migration von einer statischen Datei-Struktur zu einer
|
||
zentralisierten Daten-Instanz eliminiert technische Schulden und
|
||
manuelle Fehlerquellen. Das Ergebnis ist eine wartungsfreie
|
||
Architektur, die technische Datentreue über den gesamten
|
||
Produkt-Lifecycle sicherstellt.
|
||
</LeadText>
|
||
</Reveal>
|
||
|
||
<Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
|
||
<div className="relative group w-full text-left">
|
||
<div className="relative block w-full overflow-visible">
|
||
<IframeSection
|
||
src="/showcase/klz-cables.com/team.html"
|
||
height="1100px"
|
||
desktopWidth={1440}
|
||
allowScroll
|
||
browserFrame
|
||
className="w-full h-full no-scrollbar"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* --- SECTION 06: CONVERSION --- */}
|
||
<Section
|
||
number="06"
|
||
title="Lead Engineering"
|
||
variant="white"
|
||
containerVariant="wide"
|
||
className="!pb-32"
|
||
>
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
|
||
<div className="lg:col-span-7">
|
||
<Reveal direction="left" scale={0.98} blur>
|
||
<motion.div
|
||
whileHover={{ scale: 1.01 }}
|
||
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||
className="relative h-[800px] w-full"
|
||
>
|
||
<IframeSection
|
||
src="/showcase/klz-cables.com/contact.html"
|
||
height="100%"
|
||
desktopWidth={1200}
|
||
allowScroll
|
||
browserFrame
|
||
className="h-full w-full no-scrollbar"
|
||
/>
|
||
</motion.div>
|
||
</Reveal>
|
||
</div>
|
||
<div className="lg:col-span-5 space-y-10">
|
||
<Reveal direction="right" blur>
|
||
<div className="space-y-6">
|
||
<Label className="text-slate-400">Conversion Layer</Label>
|
||
<H3 className="text-4xl md:text-6xl tracking-tighter">
|
||
Direkter Draht.
|
||
</H3>
|
||
<BodyText className="text-xl text-slate-500 font-serif italic">
|
||
Das Kontakt-System wurde auf maximale Reduktion getrimmt.
|
||
Keine unnötigen Hürden, sondern ein direkter
|
||
Kommunikations-Kanal zwischen technischem Bedarf und
|
||
individueller Beratung.
|
||
</BodyText>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
|
||
<section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
|
||
<BackgroundGrid />
|
||
<Container variant="normal" className="relative z-10">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center text-left">
|
||
<div className="space-y-12">
|
||
<Reveal direction="left" blur>
|
||
<div className="space-y-4">
|
||
<MonoLabel className="text-slate-400 tracking-[0.4em]">
|
||
CONSULTING // ENGINEERING
|
||
</MonoLabel>
|
||
<H2 className="text-6xl md:text-8xl tracking-tighter leading-none font-bold">
|
||
Architektur <br />
|
||
<span className="text-slate-100">ohne Altlasten.</span>
|
||
</H2>
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.2} direction="left" blur>
|
||
<BodyText className="text-2xl text-slate-500 max-w-xl font-serif italic leading-relaxed">
|
||
Vom Prototyp zum industriellen Standard. Ich entwickle
|
||
digitale Infrastrukturen, die technische Freiheit und
|
||
operative Stabilität garantieren – wartungsfrei und
|
||
skalierbar.
|
||
</BodyText>
|
||
</Reveal>
|
||
</div>
|
||
|
||
<div className="bg-slate-50/80 backdrop-blur-sm border border-slate-100 p-10 md:p-14 rounded-[3.5rem] space-y-12 relative group shadow-sm">
|
||
<Reveal direction="right" blur>
|
||
<div className="inline-flex items-center gap-3 px-4 py-2 bg-white rounded-full border border-slate-200 mb-4 font-mono text-[10px] tracking-widest text-slate-500 uppercase">
|
||
<div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
|
||
Operational Excellence
|
||
</div>
|
||
<div className="space-y-10">
|
||
{[
|
||
{
|
||
title: "Hardened Infrastructure",
|
||
desc: "Zentralisierte Datenpflege und entkoppelte WordPress-Instanzen.",
|
||
},
|
||
{
|
||
title: "Automated Data Pipelines",
|
||
desc: "Validierung technischer Spezifikationen ohne manuelle Eingriffe.",
|
||
},
|
||
{
|
||
title: "Maintenance-Free Core",
|
||
desc: "Plugin-freie Logik für deterministische System-Sicherheit.",
|
||
},
|
||
].map((item, i) => (
|
||
<div key={i} className="space-y-3 group/item">
|
||
<MonoLabel className="text-[10px] text-slate-400 group-hover/item:text-slate-900 transition-colors duration-500">
|
||
{item.title}
|
||
</MonoLabel>
|
||
<BodyText className="text-lg font-bold text-slate-900 leading-tight">
|
||
{item.desc}
|
||
</BodyText>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Reveal>
|
||
<Reveal delay={0.5} direction="up" blur className="pt-6">
|
||
<MotionButton
|
||
href="/contact"
|
||
variant="outline"
|
||
showArrow={false}
|
||
className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
|
||
>
|
||
Architektur-Audit anfragen
|
||
<ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" />
|
||
</MotionButton>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|