|
|
|
|
@@ -10,6 +10,20 @@ import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'
|
|
|
|
|
import { Sparkles, Briefcase, Zap, Mail, Code, Rocket, CheckCircle } from 'lucide-react';
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
const handleScrollToPortfolio = () => {
|
|
|
|
|
const element = document.getElementById('portfolio');
|
|
|
|
|
if (element) {
|
|
|
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleScrollToContact = () => {
|
|
|
|
|
const element = document.getElementById('contact');
|
|
|
|
|
if (element) {
|
|
|
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="expand-hover"
|
|
|
|
|
@@ -33,7 +47,7 @@ export default function LandingPage() {
|
|
|
|
|
{ name: "Kontakt", id: "contact" }
|
|
|
|
|
]}
|
|
|
|
|
bottomLeftText="Webdesigner"
|
|
|
|
|
bottomRightText="friisp@gmail.com"
|
|
|
|
|
bottomRightText="peteralexanderfriis696@gmail.com"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -46,8 +60,8 @@ export default function LandingPage() {
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
background={{ variant: "animated-grid" }}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Meine Arbeiten ansehen", href: "#portfolio" },
|
|
|
|
|
{ text: "Erste Schritte", href: "#contact" }
|
|
|
|
|
{ text: "Meine Arbeiten ansehen", onClick: handleScrollToPortfolio },
|
|
|
|
|
{ text: "Erste Schritte", onClick: handleScrollToContact }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
carouselItems={[
|
|
|
|
|
@@ -55,10 +69,10 @@ export default function LandingPage() {
|
|
|
|
|
id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-stunning-modern-e-commerce-website-des-1772566668134-fb1e4245.png?_wi=1", imageAlt: "E-Commerce-Website-Design"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=1", imageAlt: "Corporate-Website-Design"
|
|
|
|
|
id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=1", imageAlt: "Unternehmenswebsite-Design"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=1", imageAlt: "Kreative Agentur-Website"
|
|
|
|
|
id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=1", imageAlt: "Website der Kreativagentur"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sophisticated-saas-platform-landing-pa-1772566668752-9737873c.png?_wi=1", imageAlt: "SaaS-Plattform-Design"
|
|
|
|
|
@@ -67,7 +81,7 @@ export default function LandingPage() {
|
|
|
|
|
id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-vibrant-fashion-brand-website-design-w-1772566668475-3b90a44d.png?_wi=1", imageAlt: "Modemarken-Website"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=1", imageAlt: "Beratungsfirmen-Website-Design"
|
|
|
|
|
id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=1", imageAlt: "Consulting-Website-Design"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
autoPlay={true}
|
|
|
|
|
@@ -78,7 +92,7 @@ export default function LandingPage() {
|
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
|
|
|
<ProductCardOne
|
|
|
|
|
title="Ausgewählte Arbeiten"
|
|
|
|
|
description="Eine Auswahl meiner jüngsten Webdesign-Projekte, die verschiedene Branchen und Designansätze zeigen."
|
|
|
|
|
description="Eine Auswahl meiner neuesten Webdesign-Projekte, die verschiedene Branchen und Design-Ansätze zeigen."
|
|
|
|
|
tag="Portfolio"
|
|
|
|
|
tagIcon={Briefcase}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
@@ -91,10 +105,10 @@ export default function LandingPage() {
|
|
|
|
|
id: "1", name: "E-Commerce-Plattform", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-stunning-modern-e-commerce-website-des-1772566668134-fb1e4245.png?_wi=2", imageAlt: "E-Commerce-Plattform-Design"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2", name: "Corporate-Website", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=2", imageAlt: "Corporate-Website-Design"
|
|
|
|
|
id: "2", name: "Unternehmenswebsite", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=2", imageAlt: "Unternehmenswebsite-Design"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3", name: "Kreative Agentur-Website", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=2", imageAlt: "Kreative Agentur-Website"
|
|
|
|
|
id: "3", name: "Website einer Kreativagentur", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-creative-agency-website-design-with-bo-1772566669671-c480d904.png?_wi=2", imageAlt: "Website einer Kreativagentur"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4", name: "SaaS-Plattform", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sophisticated-saas-platform-landing-pa-1772566668752-9737873c.png?_wi=2", imageAlt: "SaaS-Plattform-Design"
|
|
|
|
|
@@ -103,7 +117,7 @@ export default function LandingPage() {
|
|
|
|
|
id: "5", name: "Modemarke", price: "2023", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-vibrant-fashion-brand-website-design-w-1772566668475-3b90a44d.png?_wi=2", imageAlt: "Modemarken-Website"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "6", name: "Beratungsfirma", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=2", imageAlt: "Beratungsfirmen-Website-Design"
|
|
|
|
|
id: "6", name: "Unternehmensberatung", price: "2024", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-professional-consulting-firm-website-d-1772566668764-39fb77be.png?_wi=2", imageAlt: "Consulting-Website-Design"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
@@ -120,15 +134,15 @@ export default function LandingPage() {
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
tag: "Design", title: "Webdesign", subtitle: "Schöne, intuitive Schnittstellen, die Benutzer ansprechen.", description: "Ich erstelle benutzerdefinierte Webdesigns, die Ihre Markenidentität widerspiegeln und Ihr Publikum fesseln. Von der Konzeption bis zur Ausführung ist jedes Pixel sorgfältig für optimale Benutzererfahrung und visuellen Effekt gestaltet.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=1", imageAlt: "Webdesign-Arbeitsbereich"
|
|
|
|
|
tag: "Design", title: "Webdesign", subtitle: "Schöne, intuitive Schnittstellen, die Benutzer einbeziehen.", description: "Ich erstelle maßgeschneiderte Webdesigns, die Ihre Markenidentität widerspiegeln und Ihr Publikum fesseln. Von Konzept bis Ausführung wird jedes Pixel sorgfältig für optimale Benutzererfahrung und visuellen Einfluss gestaltet.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=1", imageAlt: "Webdesign-Arbeitsplatz"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
tag: "Entwicklung", title: "Responsive-Entwicklung", subtitle: "Websites, die auf allen Geräten nahtlos funktionieren.", description: "Responsives Design stellt sicher, dass Ihre Website auf Desktop, Tablet und Mobilgeräten fehlerfrei aussieht und funktioniert. Ich verwende moderne Technologien und Best Practices, um schnelle, sichere und SEO-optimierte Websites bereitzustellen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Responsive-Entwicklung"
|
|
|
|
|
tag: "Entwicklung", title: "Responsive Entwicklung", subtitle: "Websites, die auf allen Geräten nahtlos funktionieren.", description: "Responsive Design stellt sicher, dass Ihre Website auf Desktop, Tablet und Mobilgerät perfekt aussieht und funktioniert. Ich verwende moderne Technologien und bewährte Verfahren, um schnelle, sichere und SEO-optimierte Websites bereitzustellen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Responsive Entwicklung"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
tag: "Optimierung", title: "Leistung & SEO", subtitle: "Optimiert für Suchmaschinen und Benutzereinbindung.", description: "Ich optimiere Websites auf Geschwindigkeit, Barrierefreiheit und Sichtbarkeit in Suchmaschinen. Die strategische SEO-Implementierung stellt sicher, dass Ihre Website die richtige Zielgruppe erreicht und bei Suchergebnissen gut rangiert."
|
|
|
|
|
tag: "Optimierung", title: "Leistung & SEO", subtitle: "Optimiert für Suchmaschinen und Benutzerengagement.", description: "Ich optimiere Websites für Geschwindigkeit, Zugänglichkeit und Sichtbarkeit in Suchmaschinen. Die strategische SEO-Implementierung stellt sicher, dass Ihre Website die richtige Zielgruppe erreicht und in Suchergebnissen gut abschneidet."
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
@@ -137,8 +151,8 @@ export default function LandingPage() {
|
|
|
|
|
<div id="deployment" data-section="deployment">
|
|
|
|
|
<FeatureCardNineteen
|
|
|
|
|
title="So stellen Sie Ihre Website bereit"
|
|
|
|
|
description="Mehrere Bereitstellungsoptionen, um Ihre Website schnell und zuverlässig online zu bringen."
|
|
|
|
|
tag="Bereitstellungsanleitung"
|
|
|
|
|
description="Mehrere Bereitstellungsoptionen, um Ihre Website schnell und zuverlässig online zu stellen."
|
|
|
|
|
tag="Bereitstellungsleitfaden"
|
|
|
|
|
tagIcon={Rocket}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
@@ -146,15 +160,15 @@ export default function LandingPage() {
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
tag: "Empfohlen", title: "Auf Vercel bereitstellen", subtitle: "Der schnellste Weg, Next.js-Projekte bereitzustellen.", description: "1. Schieben Sie Ihren Code zu GitHub\n2. Registrieren Sie sich auf vercel.com\n3. Verbinden Sie Ihr Repository\n4. Vercel erkennt Next.js automatisch und stellt bereit\n5. Ihre Website ist sofort online mit automatischem SSL und CDN", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=2", imageAlt: "Vercel-Bereitstellung"
|
|
|
|
|
tag: "Empfohlen", title: "Auf Vercel bereitstellen", subtitle: "Schnellste Möglichkeit, Next.js-Projekte bereitzustellen.", description: "1. Verschieben Sie Ihren Code zu GitHub\n2. Melden Sie sich auf vercel.com an\n3. Verbinden Sie Ihr Repository\n4. Vercel erkennt Next.js automatisch und stellt bereit\n5. Ihre Website ist sofort live mit automatischem SSL und CDN", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png?_wi=2", imageAlt: "Vercel-Bereitstellung"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
tag: "Alternative", title: "Auf Netlify bereitstellen", subtitle: "Großartige Alternative mit einfacher GitHub-Integration.", description: "1. Schieben Sie Code zu GitHub\n2. Registrieren Sie sich auf netlify.com\n3. Wählen Sie 'Neue Website aus Git'\n4. Build-Befehl: npm run build\n5. Veröffentlichungsverzeichnis: .next/standalone\n6. Stellen Sie bereit und erhalten Sie Ihre Domain", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Netlify-Bereitstellung"
|
|
|
|
|
tag: "Alternative", title: "Auf Netlify bereitstellen", subtitle: "Großartige Alternative mit einfacher GitHub-Integration.", description: "1. Verschieben Sie Code zu GitHub\n2. Melden Sie sich auf netlify.com an\n3. Wählen Sie 'Neue Website aus Git'\n4. Build-Befehl: npm run build\n5. Veröffentlichungsverzeichnis: .next/standalone\n6. Bereitstellen und Domäne erhalten", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-sleek-corporate-website-design-for-a-t-1772566668876-f9cb2e3c.png?_wi=3", imageAlt: "Netlify-Bereitstellung"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
tag: "Selbst gehostet", title: "Mit Docker bereitstellen", subtitle: "Überall mit Containerisierung bereitstellen.", description: "1. Erstellen Sie ein Dockerfile im Projektstammverzeichnis\n2. Image erstellen: docker build -t myapp .\n3. Ausführen: docker run -p 3000:3000 myapp\n4. Zu Docker Hub pushen\n5. Auf AWS ECS, Google Cloud oder DigitalOcean bereitstellen"
|
|
|
|
|
tag: "Self-Hosted", title: "Mit Docker bereitstellen", subtitle: "Stellen Sie überall mit Containerisierung bereit.", description: "1. Erstellen Sie eine Dockerfile im Projektstammverzeichnis\n2. Build-Image: docker build -t myapp .\n3. Führen Sie aus: docker run -p 3000:3000 myapp\n4. Verschieben Sie zu Docker Hub\n5. Stellen Sie auf AWS ECS, Google Cloud oder DigitalOcean bereit"
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
@@ -166,9 +180,9 @@ export default function LandingPage() {
|
|
|
|
|
tagIcon={Mail}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
title="Bereit, Ihre Online-Präsenz zu verbessern?"
|
|
|
|
|
description="Lassen Sie uns zusammenarbeiten, um eine Website zu erstellen, die nicht nur atemberaubend aussieht, sondern auch Ergebnisse bringt. Ich freue mich, Ihre Vision zum Leben zu erwecken."
|
|
|
|
|
description="Lassen Sie uns zusammenarbeiten, um eine Website zu schaffen, die nicht nur atemberaubend aussieht, sondern auch Ergebnisse liefert. Ich freue mich darauf, Ihre Vision zum Leben zu erwecken."
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Kontaktieren Sie mich", href: "mailto:friisp@gmail.com" },
|
|
|
|
|
{ text: "Kontaktieren Sie mich", href: "mailto:peteralexanderfriis696@gmail.com" },
|
|
|
|
|
{ text: "Anrufen: +49 179 2355413", href: "tel:+49176611696541" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
@@ -183,21 +197,21 @@ export default function LandingPage() {
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
|
items: [
|
|
|
|
|
{ label: "Arbeiten", href: "#portfolio" },
|
|
|
|
|
{ label: "Dienstleistungen", href: "#services" },
|
|
|
|
|
{ label: "Bereitstellung", href: "#deployment" }
|
|
|
|
|
{ label: "Arbeiten", href: "portfolio" },
|
|
|
|
|
{ label: "Dienstleistungen", href: "services" },
|
|
|
|
|
{ label: "Bereitstellung", href: "deployment" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
items: [
|
|
|
|
|
{ label: "E-Mail", href: "mailto:friisp@gmail.com" },
|
|
|
|
|
{ label: "E-Mail", href: "mailto:peteralexanderfriis696@gmail.com" },
|
|
|
|
|
{ label: "Telefon", href: "tel:+49176611696541" },
|
|
|
|
|
{ label: "LinkedIn", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
items: [
|
|
|
|
|
{ label: "Datenschutzerklärung", href: "#" },
|
|
|
|
|
{ label: "Datenschutzrichtlinie", href: "#" },
|
|
|
|
|
{ label: "Nutzungsbedingungen", href: "#" },
|
|
|
|
|
{ label: "Impressum", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
@@ -207,4 +221,4 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|