diff --git a/.lovable/plan.md b/.lovable/plan.md index 8e783aa..cee2e4c 100644 --- a/.lovable/plan.md +++ b/.lovable/plan.md @@ -1,131 +1,122 @@ -# webklar Website Komplett-Redesign +# Komplette Landing Page Neugestaltung -Umfassende Neugestaltung der Website mit neuem Farbschema, 3D-Animationen, Partner-Logo-Animationen und Projekt-Showcase Karussell - inspiriert von animaapp.com. +## Zusammenfassung +Die gesamte Landing Page wird mit neuem Copy und neuen Sektionen umstrukturiert, um eine klare Problem-Agitation-Solution (PAS) Struktur zu schaffen. + +## Geplante Aenderungen + +### 1. Hero-Sektion aktualisieren (`Hero.tsx`) + +**Neue Inhalte:** +- **Subheadline:** "Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System - damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten muessen." +- **Kurztext:** "Die meisten Unternehmen arbeiten mit zu vielen Tools, manuellen Prozessen und ineffizienten Ablaeufen. Wir ersetzen Chaos durch Struktur..." +- **CTA Buttons:** "Kostenlose Potenzialanalyse sichern" + "System-Demo anfordern" +- **Trust Line:** "Fuer Unternehmen, die nicht stehen bleiben wollen." + +### 2. Neue Problem-Sektion erstellen (`ProblemSection.tsx`) + +**Headline:** "Ihr Unternehmen sollte kein zweiter Vollzeitjob sein." + +**Problempunkte:** +- Termine werden manuell koordiniert +- Kundenanfragen gehen unter +- Marketing bringt keine planbaren Ergebnisse +- Wichtige Informationen liegen verteilt in verschiedenen Tools + +### 3. Neue Agitation-Sektion erstellen (`AgitationSection.tsx`) + +**Headline:** "Mehr Arbeit darf nicht die einzige Antwort auf Wachstum sein." + +**Text:** Fokus darauf, dass mehr Umsatz nicht automatisch mehr Stress bedeuten muss - es fehlen nur die richtigen Systeme. + +### 4. Neue Solution-Sektion erstellen (`SolutionSection.tsx`) + +**Headline:** "Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren." + +**Kernbotschaft:** Zentrale digitale Infrastruktur statt isolierter Einzelloesungen. + +### 5. Values-Sektion umwandeln zu Core-Value-Sektion + +**Headline:** "Alles, was Ihr Unternehmen braucht. In einem System." + +**6 neue Bullet-Points:** +1. Digitale Kundenplattform +2. Automatisierte Prozesse +3. Intelligente Kundenkommunikation +4. Planbare Neukundengewinnung +5. Echtzeit-Analytics +6. Skalierbare Infrastruktur + +### 6. Neue Differentiation-Sektion erstellen (`DifferentiationSection.tsx`) + +**Headline:** "Warum Unternehmen zu uns wechseln." + +(Inhalt kann spaeter erweitert werden) + +### 7. Index.tsx anpassen + +Neue Sektionsreihenfolge: +1. Header +2. Hero (aktualisiert) +3. Partners/Tools +4. ProblemSection (neu) +5. AgitationSection (neu) +6. SolutionSection (neu) +7. Values/CoreValue (aktualisiert) +8. DifferentiationSection (neu) +9. Services +10. ProjectShowcase +11. Process +12. Contact +13. Footer --- -## 1. Neues Farbschema +## Technische Umsetzung -Wechsel von Olivgruen zu einem modernen, tech-fokussierten Farbschema: +### Datei: `src/components/Hero.tsx` +- Hauptueberschrift beibehalten oder anpassen +- Subheadline und Kurztext ersetzen +- CTAs aendern zu "Kostenlose Potenzialanalyse sichern" und "System-Demo anfordern" +- Trust Line hinzufuegen -**Vorgeschlagene Palette:** -- **Background**: Tiefes Dunkelblau (#0a0f1a) bis Schwarz -- **Primary Accent**: Leuchtendes Cyan (#00d4ff) oder Electric Blue -- **Secondary Accent**: Warmes Magenta/Pink (#ff3366) -- **Text**: Weiss und abgestufte Grautone -- **Gradient**: Cyan zu Magenta Verlaufe - ---- - -## 2. Neue Komponenten und Features - -### 2.1 Header (Aktualisierung) -- Dark Theme mit Glassmorphism -- Hover-Animationen auf Navigation -- Leuchtende Akzente - -### 2.2 Hero Section (Komplett Neu) -- Dunkler Hintergrund mit Partikel- oder Glow-Effekten -- Grosse, animierte Headline -- Optional: 3D-Element oder animierte Grafik -- Gradient-Button mit Hover-Glow - -### 2.3 Partner-Logo Animation (Verbessert) -- Reibungsloses Marquee mit echten oder Platzhalter-Logos -- Graustufeneffekt, Farbe bei Hover -- Doppelte Animation fuer nahtlose Schleife - -### 2.4 Projekt-Showcase Karussell (Neu) -Neue Komponente: `ProjectShowcase.tsx` -- Horizontales Karussell mit Projekt-Karten -- 3D-Hover-Effekte (Tilt/Perspektive) -- Sanfte Uebergaenge zwischen Slides -- Beispiel-Projekte eurer Arbeit - -### 2.5 3D Animationen und Effekte -- Floating Gradient Orbs im Hintergrund -- Glow-Effekte auf interaktiven Elementen -- Parallax-Scrolling fuer Tiefenwirkung -- Subtle Partikel-Animationen -- Card-Hover mit 3D-Transform - -### 2.6 Services Section (Aktualisierung) -- Dark Cards mit Glow-Border bei Hover -- Icon-Animationen -- Gradient-Akzente - -### 2.7 Process Section (Aktualisierung) -- Leuchtende Timeline-Linie -- Animierte Nummern-Badges -- Staggered Fade-In beim Scrollen - -### 2.8 Contact und Footer (Aktualisierung) -- Gradient CTA-Bereich -- Dark Footer mit leuchtenden Akzenten - ---- - -## 3. Technische Umsetzung - -### Dateien die geaendert werden: - -**Design System:** +### Neue Datei: `src/components/ProblemSection.tsx` ```text -src/index.css - Neues Farbschema, Gradient-Variablen, Glow-Utilities -tailwind.config.ts - Neue Farben, erweiterte Animationen +- Sektion mit rotem Faden-Design +- Headline + einleitender Text +- Liste der Schmerzpunkte mit Icons +- Abschlussstatement ``` -**Komponenten:** +### Neue Datei: `src/components/AgitationSection.tsx` ```text -src/components/Header.tsx - Dark Theme Anpassung -src/components/Hero.tsx - Komplett neu mit 3D-Effekten -src/components/Partners.tsx - Verbessertes Marquee -src/components/ProjectShowcase.tsx - NEU: Karussell-Komponente -src/components/Values.tsx - Dark Theme Anpassung -src/components/Services.tsx - Glow-Cards -src/components/Process.tsx - Animierte Timeline -src/components/Contact.tsx - Gradient CTA -src/components/Footer.tsx - Dark Footer -src/pages/Index.tsx - ProjectShowcase einbinden +- Emotionales Design mit Kontrast +- Headline + Fliesstext +- Betonung: "Erfolgreiche Unternehmen skalieren Prozesse. Nicht Arbeitsstunden." ``` ---- - -## 4. Reihenfolge der Implementierung - -1. **Design System** - CSS-Variablen und Tailwind-Config -2. **Header** - Navigation im neuen Stil -3. **Hero** - Haupt-Eyecatcher mit Animationen -4. **Partners** - Verbessertes Logo-Marquee -5. **ProjectShowcase** - Neue Karussell-Komponente -6. **Services, Values, Process** - Dark Theme Updates -7. **Contact und Footer** - Abschluss-Sektionen - ---- - -## 5. Visuelle Vorschau - +### Neue Datei: `src/components/SolutionSection.tsx` ```text -+--------------------------------------------------+ -| [Logo] webklar Nav Links [CTA Button] | <- Glassmorphism Header -+--------------------------------------------------+ -| | -| ✨ Floating Gradient Orbs ✨ | -| | -| Digitale Loesungen die | -| ✨ begeistern ✨ | <- Animated Headline -| | -| [ Jetzt Termin buchen -> ] | <- Glow Button -| | -+--------------------------------------------------+ -| [Logo] [Logo] [Logo] [Logo] [Logo] -> | <- Marquee Animation -+--------------------------------------------------+ -| | -| Unsere Projekte | -| [Card 1] [Card 2] [Card 3] < > | <- Showcase Carousel -| | -+--------------------------------------------------+ +- Positives, loesungsorientiertes Design +- Headline + Erklaerung der zentralen Infrastruktur +- Bullet Points fuer Vorteile ``` +### Datei: `src/components/Values.tsx` +- Umbenennen der Inhalte zu den 6 neuen Features +- Icons anpassen (Users, Cog, MessageSquare, Target, BarChart, Layers) +- Neue Headline und Beschreibungen + +### Neue Datei: `src/components/DifferentiationSection.tsx` +```text +- Vergleichs- oder USP-Darstellung +- Headline +- (Inhalt kann spaeter erweitert werden) +``` + +### Datei: `src/pages/Index.tsx` +- Neue Komponenten importieren +- Reihenfolge der Sektionen anpassen + diff --git a/src/components/AgitationSection.tsx b/src/components/AgitationSection.tsx new file mode 100644 index 0000000..2e7e085 --- /dev/null +++ b/src/components/AgitationSection.tsx @@ -0,0 +1,45 @@ +const AgitationSection = () => { + return ( +
+ {/* Decorative element */} +
+
+
+ +
+
+
Die Realität
+ +

+ Mehr Arbeit darf nicht die einzige Antwort auf Wachstum sein. +

+ +
+

+ Neue Kunden sollten Ihr Unternehmen nicht ins Chaos stürzen. +

+ +

+ Wenn mehr Umsatz automatisch mehr Stress bedeutet, liegt das Problem nicht an Ihrem Markt – sondern an fehlenden Systemen. +

+ +
+

+ Erfolgreiche Unternehmen skalieren Prozesse. +

+

+ Nicht Arbeitsstunden. +

+
+ +

+ Genau dort setzen wir an. +

+
+
+
+
+ ); +}; + +export default AgitationSection; diff --git a/src/components/DifferentiationSection.tsx b/src/components/DifferentiationSection.tsx new file mode 100644 index 0000000..7f62be1 --- /dev/null +++ b/src/components/DifferentiationSection.tsx @@ -0,0 +1,63 @@ +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { ArrowRight } from "lucide-react"; + +const DifferentiationSection = () => { + return ( +
+
+
+
Der Unterschied
+ +

+ Warum Unternehmen zu uns wechseln. +

+ +
+
+
01
+

+ Alles aus einer Hand +

+

+ Keine 10 verschiedenen Anbieter. Ein Partner für Ihre gesamte digitale Infrastruktur. +

+
+ +
+
02
+

+ Systeme statt Inseln +

+

+ Wir verbinden Ihre Tools zu einem durchdachten Gesamtsystem. +

+
+ +
+
03
+

+ Langfristige Partnerschaft +

+

+ Wir begleiten Sie nicht nur beim Launch, sondern beim Wachstum. +

+
+
+ + + + +
+
+
+ ); +}; + +export default DifferentiationSection; diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 75f22ad..ab4000a 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,8 +1,39 @@ import { Link } from "react-router-dom"; import { Button } from "@/components/ui/button"; import { ArrowRight } from "lucide-react"; +import { useState, useEffect } from "react"; + +const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026 const Hero = () => { + const [companyAge, setCompanyAge] = useState(""); + + useEffect(() => { + const calculateAge = () => { + const now = new Date(); + const diff = now.getTime() - FOUNDING_DATE.getTime(); + + const totalSeconds = Math.floor(diff / 1000); + const days = Math.floor(totalSeconds / (60 * 60 * 24)); + const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)); + const minutes = Math.floor((totalSeconds % (60 * 60)) / 60); + const seconds = totalSeconds % 60; + + const years = Math.floor(days / 365); + const remainingDays = days % 365; + + if (years > 0) { + setCompanyAge(`${years}J ${remainingDays}T ${hours}h ${minutes}m ${seconds}s`); + } else { + setCompanyAge(`${days}T ${hours}h ${minutes}m ${seconds}s`); + } + }; + + calculateAge(); + const interval = setInterval(calculateAge, 1000); // Update every second + return () => clearInterval(interval); + }, []); + return (
{/* Subtle grid lines */} @@ -16,25 +47,29 @@ const Hero = () => { {/* Main Heading - Large Uppercase */} -

- Wir gestalten
- digitale
- Erlebnisse +

+ Wir digitalisieren
+ Ihr Unternehmen

- {/* Subtitle */} -

- Maßgeschneiderte Webentwicklung für Unternehmen, die sich von der Masse abheben wollen. Strategie, Design & Entwicklung aus einer Hand. + {/* Subheadline */} +

+ Wir digitalisieren, automatisieren und vernetzen Ihre gesamte Firma in einem einzigen System – damit Ihr Unternehmen wachsen kann, ohne dass Sie mehr arbeiten müssen. +

+ + {/* Kurztext */} +

+ Die meisten Unternehmen arbeiten mit zu vielen Tools, manuellen Prozessen und ineffizienten Abläufen. Wir ersetzen Chaos durch Struktur und bauen Ihnen eine digitale Infrastruktur, die Zeit spart, Fehler reduziert und Wachstum planbar macht.

{/* CTA Buttons */} -
+
@@ -43,9 +78,14 @@ const Hero = () => { variant="outline" className="btn-outline rounded-full px-8 py-6 text-base font-medium" > - Projekte ansehen + System-Demo anfordern
+ + {/* Trust Line */} +

+ Für Unternehmen, die nicht stehen bleiben wollen. +

@@ -54,20 +94,20 @@ const Hero = () => {
-
50+
+
10+
Projekte
-
8+
-
Jahre Erfahrung
+
{companyAge}
+
Am Markt
-
40+
-
Kunden
+
99,9%
+
Systemverfügbarkeit
-
100%
-
Zufriedenheit
+
🇩🇪
+
Serverstandort in Deutschland
diff --git a/src/components/Partners.tsx b/src/components/Partners.tsx index e1515f0..917fd40 100644 --- a/src/components/Partners.tsx +++ b/src/components/Partners.tsx @@ -1,19 +1,8 @@ -const partners = [ - "Microsoft", - "Google", - "Shopify", - "Stripe", - "Vercel", - "AWS", - "Figma", - "Webflow", -]; - +const tools = ["Cursor", "Kiro", "N8N", "Mistral", "Hetzner", "Porkbun", "Appwrite", "Traefik"]; const Partners = () => { - return ( -
+ return
-
Vertraut von führenden Marken
+
UNSERE TOOLS MIT DEN WIR ARBEITEN
@@ -24,33 +13,21 @@ const Partners = () => { {/* Marquee */}
- {[...partners, ...partners].map((partner, index) => ( -
+ {[...tools, ...tools].map((tool, index) =>
- {partner} + {tool} -
- ))} +
)}
-
- ); +
; }; - -export default Partners; +export default Partners; \ No newline at end of file diff --git a/src/components/ProblemSection.tsx b/src/components/ProblemSection.tsx new file mode 100644 index 0000000..0d5a7ed --- /dev/null +++ b/src/components/ProblemSection.tsx @@ -0,0 +1,68 @@ +import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react"; + +const ProblemSection = () => { + const problems = [ + { + icon: Calendar, + text: "Termine werden manuell koordiniert.", + }, + { + icon: MessageSquareOff, + text: "Kundenanfragen gehen unter.", + }, + { + icon: TrendingDown, + text: "Marketing bringt keine planbaren Ergebnisse.", + }, + { + icon: Folders, + text: "Wichtige Informationen liegen verteilt in verschiedenen Tools.", + }, + ]; + + return ( +
+
+ {/* Section Header */} +
+
Das Problem
+

+ Ihr Unternehmen sollte kein zweiter Vollzeitjob sein. +

+

+ Zu viele Firmen verlieren täglich Umsatz durch ineffiziente Prozesse, doppelte Dateneingaben und fehlende Automationen. +

+
+ + {/* Problem Points */} +
+ {problems.map((problem, index) => ( +
+
+ +
+

+ {problem.text} +

+
+ ))} +
+ + {/* Closing Statement */} +
+

+ Das kostet nicht nur Zeit – es verhindert Wachstum. +

+

+ Wer heute nicht digital strukturiert ist, wird morgen abgehängt. +

+
+
+
+ ); +}; + +export default ProblemSection; diff --git a/src/components/SolutionSection.tsx b/src/components/SolutionSection.tsx new file mode 100644 index 0000000..e86cbb1 --- /dev/null +++ b/src/components/SolutionSection.tsx @@ -0,0 +1,68 @@ +import { Link } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { ArrowRight, CheckCircle2 } from "lucide-react"; + +const SolutionSection = () => { + const benefits = [ + "Alle Prozesse greifen ineinander.", + "Informationen fließen automatisch.", + "Aufgaben erledigen sich im Hintergrund.", + ]; + + return ( +
+
+
+ {/* Left Content */} +
+
Die Lösung
+ +

+ Wir bauen Unternehmen, die ohne ihre Besitzer funktionieren. +

+ +

+ Statt isolierter Einzellösungen entwickeln wir eine zentrale digitale Infrastruktur für Ihre gesamte Firma. +

+ +
+ {benefits.map((benefit, index) => ( +
+ + {benefit} +
+ ))} +
+ + + + +
+ + {/* Right Content - Visual Element */} +
+
+
+
Das Ergebnis
+

+ Sie erhalten Kontrolle, Transparenz und die Freiheit, sich auf das zu konzentrieren, was wirklich zählt: +

+
+ Wachstum. +
+
+
+
+
+
+
+ ); +}; + +export default SolutionSection; diff --git a/src/components/Values.tsx b/src/components/Values.tsx index fd2f9c4..3f84e86 100644 --- a/src/components/Values.tsx +++ b/src/components/Values.tsx @@ -1,59 +1,65 @@ -import { Shield, Clock, Lock, Zap } from "lucide-react"; +import { Users, Cog, MessageSquare, Target, BarChart3, Layers } from "lucide-react"; const Values = () => { - const values = [ + const features = [ { - icon: Shield, - title: "Sicherheit", - description: "Höchste Datenschutzstandards und moderne Technologien schützen Ihre Daten.", + icon: Users, + title: "Digitale Kundenplattform", + description: "Verwalten Sie Kontakte, Anfragen und Projekte zentral.", }, { - icon: Clock, - title: "Zuverlässigkeit", - description: "Stabile Systeme mit 99.9% Uptime für Ihren kontinuierlichen Erfolg.", + icon: Cog, + title: "Automatisierte Prozesse", + description: "Reduzieren Sie manuelle Arbeit drastisch.", }, { - icon: Lock, - title: "Datenschutz", - description: "DSGVO-konforme Lösungen – Ihre Daten bleiben in Deutschland.", + icon: MessageSquare, + title: "Intelligente Kundenkommunikation", + description: "Keine Anfrage geht mehr verloren.", }, { - icon: Zap, - title: "Performance", - description: "Blitzschnelle Ladezeiten für beste Nutzererfahrung und SEO.", + icon: Target, + title: "Planbare Neukundengewinnung", + description: "Strukturierte Funnels statt Zufall.", + }, + { + icon: BarChart3, + title: "Echtzeit-Analytics", + description: "Treffen Sie Entscheidungen auf Basis klarer Daten.", + }, + { + icon: Layers, + title: "Skalierbare Infrastruktur", + description: "Ihr System wächst mit Ihrem Unternehmen.", }, ]; return ( -
+
{/* Section Header */}
-
Über uns
+
Was Sie bekommen

- Worauf wir Wert legen + Alles, was Ihr Unternehmen braucht. In einem System.

-

- Sicherheit ist für uns keine Nebensache, sondern die Grundlage jeder Website. - Wir setzen auf moderne Technologien und höchste Datenschutzstandards. -

-
- {values.map((value, index) => ( +
+ {features.map((feature, index) => (
- +

- {value.title} + {feature.title}

- {value.description} + {feature.description}

))} diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index cdedd4f..c4d7677 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,47 +1,45 @@ import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; - import { cn } from "@/lib/utils"; - -const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10", - }, - }, - defaultVariants: { - variant: "default", - size: "default", +const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline" }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10" + } }, -); - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { + defaultVariants: { + variant: "default", + size: "default" + } +}); +export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } - -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button"; - return ; - }, -); +const Button = React.forwardRef(({ + className, + variant, + size, + asChild = false, + ...props +}, ref) => { + const Comp = asChild ? Slot : "button"; + return ; +}); Button.displayName = "Button"; - -export { Button, buttonVariants }; +export { Button, buttonVariants }; \ No newline at end of file diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index d3cb730..a59f83f 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,7 +1,11 @@ import Header from "@/components/Header"; import Hero from "@/components/Hero"; import Partners from "@/components/Partners"; +import ProblemSection from "@/components/ProblemSection"; +import AgitationSection from "@/components/AgitationSection"; +import SolutionSection from "@/components/SolutionSection"; import Values from "@/components/Values"; +import DifferentiationSection from "@/components/DifferentiationSection"; import Services from "@/components/Services"; import ProjectShowcase from "@/components/ProjectShowcase"; import Process from "@/components/Process"; @@ -14,7 +18,11 @@ const Index = () => {
+ + + + @@ -24,4 +32,4 @@ const Index = () => { ); }; -export default Index; \ No newline at end of file +export default Index;