Compare commits
35 Commits
version_1
...
version_11
| Author | SHA1 | Date | |
|---|---|---|---|
| 0100df9da6 | |||
| 0d835c480e | |||
| f10f27f042 | |||
| 12a8b1d93f | |||
| f2ace83a6a | |||
| 606494433c | |||
| 83cea9dabe | |||
| 62802ac436 | |||
| 20cfa42656 | |||
| 8cf962bd46 | |||
| 29b2b38490 | |||
| 49402cd23f | |||
| 4181addd02 | |||
| 94231a6dec | |||
| 642be3112c | |||
| cb60de783e | |||
| cafd02427e | |||
| deabcec91b | |||
| d4b95179b5 | |||
| cff1d6c39b | |||
| 30cad703bf | |||
| cb9544518a | |||
| 95a0cf51e3 | |||
| 80f65884c4 | |||
| 8187c80e3d | |||
| 32e38fdef6 | |||
| 81f757faae | |||
| eea7f2acdb | |||
| 66f8b722d9 | |||
| c285b6ad06 | |||
| ca7ad60846 | |||
| 5eee5a4d60 | |||
| 9d96db6387 | |||
| 6c0093db15 | |||
| cb6b54a964 |
@@ -1,53 +1,90 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Public_Sans } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./styles/variables.css";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const publicSans = Public_Sans({
|
||||
variable: "--font-public-sans", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Christian Friis - Web Designer | Professional Design Solutions", description: "Award-winning web designer creating stunning, responsive websites that convert. Expertise in UI/UX design, web development, and digital strategy. Based in Germany.", keywords: "web designer, web design, UI design, UX design, website designer, professional web designer, responsive design, digital design", metadataBase: new URL("https://christianfriis.com"),
|
||||
alternates: {
|
||||
canonical: "https://christianfriis.com"
|
||||
},
|
||||
openGraph: {
|
||||
title: "Christian Friis - Web Designer", description: "Creating beautiful, functional websites that drive results. Professional web design solutions for businesses of all sizes.", url: "https://christianfriis.com", siteName: "Christian Friis", type: "website", images: [
|
||||
{
|
||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png", alt: "Christian Friis - Web Designer Portfolio"
|
||||
}
|
||||
]
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Christian Friis - Web Designer", description: "Award-winning web design solutions for modern businesses", images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png"]
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true
|
||||
}
|
||||
title: "Peter Friis - Webdesigner", description: "Professioneller Webdesigner, der atemberaubende digitale Erlebnisse schafft. Stellen Sie Ihre Website einfach mit Next.js, Vercel oder einer beliebigen Node.js-Hosting-Plattform bereit."
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${publicSans.variable} ${inter.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="de">
|
||||
<head>
|
||||
<script>
|
||||
{`
|
||||
window.deploymentGuide = {
|
||||
platforms: [
|
||||
{
|
||||
name: 'Vercel',
|
||||
steps: [
|
||||
'1. Verschieben Sie Ihren Code zu GitHub',
|
||||
'2. Gehen Sie zu vercel.com und melden Sie sich an',
|
||||
'3. Klicken Sie auf "Neues Projekt" und wählen Sie Ihr Repository',
|
||||
'4. Vercel erkennt Next.js automatisch und stellt bereit',
|
||||
'5. Ihre Website ist live unter der Vercel.app-Domain'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Netlify',
|
||||
steps: [
|
||||
'1. Verschieben Sie Ihren Code zu GitHub',
|
||||
'2. Gehen Sie zu netlify.com und melden Sie sich an',
|
||||
'3. Klicken Sie auf "Neue Website aus Git" und wählen Sie Ihr Repository',
|
||||
'4. Setzen Sie Build-Befehl: npm run build',
|
||||
'5. Setzen Sie Veröffentlichungsverzeichnis: .next/standalone',
|
||||
'6. Bereitstellen und erhalten Sie Ihre Live-Domain'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Self-Hosted (Node.js)',
|
||||
steps: [
|
||||
'1. Rufen Sie einen Server ab (Digital Ocean, AWS, usw.)',
|
||||
'2. Klonen Sie Ihr Repository auf dem Server',
|
||||
'3. Führen Sie aus: npm install && npm run build',
|
||||
'4. Setzen Sie NODE_ENV=production',
|
||||
'5. Starten Sie mit: npm start oder verwenden Sie PM2',
|
||||
'6. Richten Sie nginx/Apache als Reverse Proxy ein',
|
||||
'7. Konfigurieren Sie Ihr Domain-DNS'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Docker-Bereitstellung',
|
||||
steps: [
|
||||
'1. Erstellen Sie eine Dockerfile im Projektstammverzeichnis',
|
||||
'2. Build-Image: docker build -t myapp .',
|
||||
'3. Container ausführen: docker run -p 3000:3000 myapp',
|
||||
'4. Zu Docker Hub oder Container-Registry verschieben',
|
||||
'5. In Cloud-Plattformen bereitstellen (AWS ECS, GCP usw.)'
|
||||
]
|
||||
}
|
||||
],
|
||||
environmentVariables: [
|
||||
'NODE_ENV=production',
|
||||
'NEXT_PUBLIC_API_URL=your-api-url',
|
||||
'DATABASE_URL=your-database-url'
|
||||
],
|
||||
postDeploymentChecklist: [
|
||||
'Testen Sie alle Navigationslinks',
|
||||
'Überprüfen Sie das responsive Design auf dem Mobilgerät',
|
||||
'Überprüfen Sie, ob E-Mail-Formulare ordnungsgemäß funktionieren',
|
||||
'Bestätigen Sie, dass Bilder korrekt geladen werden',
|
||||
'Testen Sie die Übermittlung von Kontaktformularen',
|
||||
'Überprüfen Sie SEO-Meta-Tags',
|
||||
'Überprüfen Sie die Seitenladeleistung',
|
||||
'SSL-Zertifikat einrichten (HTTPS)'
|
||||
]
|
||||
};
|
||||
`}
|
||||
</script>
|
||||
</head>
|
||||
<body className={inter.className}>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1415,7 +1452,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
341
src/app/page.tsx
341
src/app/page.tsx
@@ -5,13 +5,30 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Sparkles, Briefcase, Zap, Users, TrendingUp, Award, Mail } from 'lucide-react';
|
||||
import LegalSection from '@/components/legal/LegalSection';
|
||||
import { Sparkles, Briefcase, Zap, Mail, Code, Rocket, CheckCircle, Mail as MailIcon, Phone as PhoneIcon } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [showEmailModal, setShowEmailModal] = useState(false);
|
||||
const [showPhoneModal, setShowPhoneModal] = useState(false);
|
||||
|
||||
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"
|
||||
@@ -27,49 +44,49 @@ export default function LandingPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
brandName="Christian Friis"
|
||||
brandName="Peter Friis"
|
||||
navItems={[
|
||||
{ name: "Work", id: "portfolio" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
{ name: "Arbeiten", id: "portfolio" },
|
||||
{ name: "Dienstleistungen", id: "services" },
|
||||
{ name: "Bereitstellung", id: "deployment" },
|
||||
{ name: "Kontakt", id: "contact" }
|
||||
]}
|
||||
bottomLeftText="Web Designer"
|
||||
bottomRightText="friischristian35@gmail.com"
|
||||
bottomLeftText="Webdesigner"
|
||||
bottomRightText="peteralexanderfriis696@gmail.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Web Design That Captivates"
|
||||
description="I create stunning, user-centric websites that blend beautiful design with seamless functionality. Let's transform your vision into a digital experience that converts."
|
||||
tag="Professional Designer"
|
||||
title="Webdesign, das fesselt"
|
||||
description="Ich erstelle atemberaubende, benutzerorientierte Websites, die schönes Design mit nahtloser Funktionalität verbinden. Lassen Sie uns Ihre Vision in ein digitales Erlebnis umwandeln, das konvertiert."
|
||||
tag="Professioneller Designer"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "#portfolio" },
|
||||
{ text: "Get Started", href: "#contact" }
|
||||
{ text: "Meine Arbeiten ansehen", onClick: handleScrollToPortfolio },
|
||||
{ text: "Erste Schritte", onClick: handleScrollToContact }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselItems={[
|
||||
{
|
||||
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: "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: "Creative agency 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 platform design"
|
||||
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"
|
||||
},
|
||||
{
|
||||
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: "Fashion brand website"
|
||||
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: "Consulting 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}
|
||||
@@ -79,8 +96,8 @@ export default function LandingPage() {
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
title="Featured Work"
|
||||
description="A selection of my recent web design projects showcasing diverse industries and design approaches."
|
||||
title="Ausgewählte Arbeiten"
|
||||
description="Eine Auswahl meiner neuesten Webdesign-Projekte, die verschiedene Branchen und Design-Ansätze zeigen."
|
||||
tag="Portfolio"
|
||||
tagIcon={Briefcase}
|
||||
tagAnimation="slide-up"
|
||||
@@ -90,22 +107,22 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "E-Commerce Platform", 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 platform design"
|
||||
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: "Creative Agency Site", 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: "Creative agency 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 Platform", 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 platform design"
|
||||
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"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Fashion Brand", 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: "Fashion brand website"
|
||||
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: "Consulting Firm", 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"
|
||||
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"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -113,70 +130,65 @@ export default function LandingPage() {
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNineteen
|
||||
title="My Services"
|
||||
description="End-to-end web design solutions tailored to your business goals and brand identity."
|
||||
tag="What I Offer"
|
||||
title="Meine Dienstleistungen"
|
||||
description="End-to-End-Webdesign-Lösungen, zugeschnitten auf Ihre Geschäftsziele und Markenidentität."
|
||||
tag="Was ich anbiete"
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
tag: "Design", title: "Web Design", subtitle: "Beautiful, intuitive interfaces that engage users.", description: "I create custom web designs that reflect your brand identity and captivate your audience. From concept to execution, every pixel is carefully crafted for optimal user experience and visual impact.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/a-modern-designer-s-workspace-with-a-cle-1772566667699-d70c5a04.png", imageAlt: "Web design workspace"
|
||||
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: "Development", title: "Responsive Development", subtitle: "Websites that work seamlessly across all devices.", description: "Responsive design ensures your website looks and functions flawlessly on desktop, tablet, and mobile. I use modern technologies and best practices to deliver fast, secure, and SEO-optimized websites.", 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 development"
|
||||
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: "Optimization", title: "Performance & SEO", subtitle: "Optimized for search engines and user engagement.", description: "I optimize websites for speed, accessibility, and search engine visibility. Strategic SEO implementation ensures your site reaches the right audience and ranks well on search results."
|
||||
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."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="I'm a passionate web designer dedicated to creating digital experiences that inspire and convert. With expertise in modern web design trends, user experience, and digital strategy, I help brands establish a powerful online presence."
|
||||
<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 stellen."
|
||||
tag="Bereitstellungsleitfaden"
|
||||
tagIcon={Rocket}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metricsAnimation="slide-up"
|
||||
metrics={[
|
||||
{ icon: Zap, label: "Projects Completed", value: "50+" },
|
||||
{ icon: Users, label: "Happy Clients", value: "30+" },
|
||||
{ icon: TrendingUp, label: "Years Experience", value: "5+" },
|
||||
{ icon: Award, label: "Design Awards", value: "8" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Christian's web design expertise transformed our online presence. His attention to detail, creative vision, and collaborative approach made the entire process smooth and enjoyable. Our website has become a powerful business asset."
|
||||
rating={5}
|
||||
author="Sarah Mitchell, CEO - TechFlow"
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
avatars={[
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-busi-1772566666692-7dbdb570.png", alt: "Sarah Mitchell" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-crea-1772566668076-76e214eb.png", alt: "John Davis" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-fema-1772566667828-5111d03b.png", alt: "Emily Rodriguez" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARjvloGcZpCaedVgrm6Muh5Upq/professional-headshot-portrait-of-a-male-1772566668212-bf31db96.png", alt: "Michael Chen" }
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
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. 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: "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"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Let's Work Together"
|
||||
tag="Lassen Sie uns zusammenarbeiten"
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
title="Ready to Elevate Your Online Presence?"
|
||||
description="Let's collaborate to create a website that not only looks stunning but also drives results. I'm excited to bring your vision to life."
|
||||
title="Bereit, Ihre Online-Präsenz zu verbessern?"
|
||||
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: "Contact Me", href: "mailto:friischristian35@gmail.com" },
|
||||
{ text: "Call: +49 176 61169654", href: "tel:+49176611696541" }
|
||||
{ text: "Kontaktieren Sie mich", href: "mailto:peteralexanderfriis696@gmail.com" },
|
||||
{ text: "Anrufen: +49 179 2355413", href: "tel:+49176611696541" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "animated-grid" }}
|
||||
@@ -184,34 +196,199 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Christian Friis"
|
||||
columns={[
|
||||
<div id="impressum" data-section="impressum">
|
||||
<LegalSection
|
||||
layout="section"
|
||||
title="Impressum"
|
||||
subtitle="Rechtliche Informationen und Kontaktdaten"
|
||||
sections={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Work", href: "#portfolio" },
|
||||
{ label: "Services", href: "#services" },
|
||||
{ label: "About", href: "#about" }
|
||||
heading: "Inhaltlich Verantwortlicher (Gemäß TMG §7 Abs. 1)", content: [
|
||||
{
|
||||
type: "paragraph", text: "Peter Friis\nFreelance Webdesigner\nE-Mail: peteralexanderfriis696@gmail.com\nTelefon: +49 179 2355413"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Email", href: "mailto:friischristian35@gmail.com" },
|
||||
{ label: "Phone", href: "tel:+49176611696541" },
|
||||
{ label: "LinkedIn", href: "#" }
|
||||
heading: "Angaben gemäß § 5 TMG", content: [
|
||||
{
|
||||
type: "paragraph", text: "Name: Peter Friis\nBeruf: Freelancer Webdesigner\nStatus: Unternehmer gemäß USt-IdNr. (siehe Umsatzsteuer-Identifikationsnummer)"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Impressum", href: "#" }
|
||||
heading: "Kontaktinformation", content: [
|
||||
{
|
||||
type: "paragraph", text: "Telefonische Erreichbarkeit und weitere Informationen:"
|
||||
},
|
||||
{
|
||||
type: "list", items: [
|
||||
"E-Mail: peteralexanderfriis696@gmail.com", "Telefon: +49 179 2355413", "Geschäftstätigkeit: Webdesign und digitale Beratung"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: "Haftung für Inhalte", content: [
|
||||
{
|
||||
type: "paragraph", text: "Die Inhalte unserer Seiten wurden mit großer Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen. Als Diensteanbieter bin ich gemäß § 7 Abs. 1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: "Haftung für Links", content: [
|
||||
{
|
||||
type: "paragraph", text: "Meine Website enthält Links zu externen Websites Dritter. Auf die Inhalte dieser extern verlinkten Seiten habe ich keinen Einfluss. Daher kann ich für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist der jeweilige Anbieter oder Betreiber der Seite verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Illegale Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine ständige inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: "Urheberrecht", content: [
|
||||
{
|
||||
type: "paragraph", text: "Die auf dieser Website präsentierten Inhalte und Werke unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der vorherigen schriftlichen Zustimmung des Autors oder Urhebers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: "Datenschutz", content: [
|
||||
{
|
||||
type: "paragraph", text: "Die Nutzung dieser Website ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf meiner Website personenbezogene Daten (beispielsweise Name, Anschrift oder E-Mail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben."
|
||||
},
|
||||
{
|
||||
type: "paragraph", text: "Beachten Sie, dass die Datenübertragung im Internet Sicherheitslücken aufweisen kann. Ein vollständiger Schutz vor dem Zugriff durch Dritte ist nicht möglich."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: "Verwendung von Cookies", content: [
|
||||
{
|
||||
type: "paragraph", text: "Diese Website nutzt Cookies, um die Benutzererfahrung zu optimieren. Sie können die Cookie-Einstellungen in Ihrem Browser jederzeit deaktivieren. Beachten Sie jedoch, dass dies zu Einschränkungen bei der Nutzbarkeit dieser Website führen kann."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: "Rechtswirksamkeit dieses Impressums", content: [
|
||||
{
|
||||
type: "paragraph", text: "Dieses Impressum gilt für alle Domains und Subdomains dieser Website. Es unterliegt deutschem Recht und wird nach deutschem Recht ausgelegt."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
heading: "Streitbeilegung", content: [
|
||||
{
|
||||
type: "paragraph", text: "Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr/. Meine E-Mail-Adresse finden Sie in diesem Impressum. Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen."
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Peter Friis"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Arbeiten", href: "portfolio" },
|
||||
{ label: "Dienstleistungen", href: "services" },
|
||||
{ label: "Bereitstellung", href: "deployment" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "E-Mail", href: "mailto:peteralexanderfriis696@gmail.com" },
|
||||
{ label: "Telefon", href: "tel:+49176611696541" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Datenschutzrichtlinie", href: "#" },
|
||||
{ label: "Nutzungsbedingungen", href: "#" },
|
||||
{ label: "Impressum", href: "impressum" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email Modal */}
|
||||
{showEmailModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-end justify-end p-4 sm:p-6 md:p-8">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 cursor-pointer"
|
||||
onClick={() => setShowEmailModal(false)}
|
||||
/>
|
||||
<div className="relative bg-[var(--card)] rounded-lg shadow-lg p-6 max-w-sm w-full animate-in slide-in-from-bottom-5">
|
||||
<button
|
||||
onClick={() => setShowEmailModal(false)}
|
||||
className="absolute top-4 right-4 text-[var(--foreground)] opacity-60 hover:opacity-100 transition-opacity"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<MailIcon size={24} className="text-[var(--primary-cta)]" />
|
||||
<h3 className="text-lg font-semibold text-[var(--foreground)]">E-Mail Adresse</h3>
|
||||
</div>
|
||||
<p className="text-[var(--foreground)] opacity-80 mb-4">peteralexanderfriis696@gmail.com</p>
|
||||
<a
|
||||
href="mailto:peteralexanderfriis696@gmail.com"
|
||||
className="inline-block w-full text-center bg-[var(--primary-cta)] hover:opacity-90 text-white font-semibold py-2 px-4 rounded-lg transition-opacity"
|
||||
>
|
||||
E-Mail öffnen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Phone Modal */}
|
||||
{showPhoneModal && (
|
||||
<div className="fixed inset-0 z-50 flex items-end justify-end p-4 sm:p-6 md:p-8">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 cursor-pointer"
|
||||
onClick={() => setShowPhoneModal(false)}
|
||||
/>
|
||||
<div className="relative bg-[var(--card)] rounded-lg shadow-lg p-6 max-w-sm w-full animate-in slide-in-from-bottom-5">
|
||||
<button
|
||||
onClick={() => setShowPhoneModal(false)}
|
||||
className="absolute top-4 right-4 text-[var(--foreground)] opacity-60 hover:opacity-100 transition-opacity"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<PhoneIcon size={24} className="text-[var(--primary-cta)]" />
|
||||
<h3 className="text-lg font-semibold text-[var(--foreground)]">Telefonnummer</h3>
|
||||
</div>
|
||||
<p className="text-[var(--foreground)] opacity-80 mb-4">+49 179 2355413</p>
|
||||
<a
|
||||
href="tel:+49179235541"
|
||||
className="inline-block w-full text-center bg-[var(--primary-cta)] hover:opacity-90 text-white font-semibold py-2 px-4 rounded-lg transition-opacity"
|
||||
>
|
||||
Anrufen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Floating Contact Buttons */}
|
||||
<div className="fixed bottom-6 right-6 flex gap-3 z-40">
|
||||
<button
|
||||
onClick={() => setShowEmailModal(true)}
|
||||
className="w-14 h-14 rounded-full bg-[var(--primary-cta)] text-white flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-110 transition-all"
|
||||
title="E-Mail"
|
||||
aria-label="E-Mail öffnen"
|
||||
>
|
||||
<MailIcon size={24} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPhoneModal(true)}
|
||||
className="w-14 h-14 rounded-full bg-[var(--primary-cta)] text-white flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-110 transition-all"
|
||||
title="Telefon"
|
||||
aria-label="Telefonnummer öffnen"
|
||||
>
|
||||
<PhoneIcon size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user