|
|
|
|
@@ -5,13 +5,27 @@ 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 { Sparkles, Briefcase, Zap, Mail } from 'lucide-react';
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
const handleButtonClick = (href: string) => {
|
|
|
|
|
if (href.startsWith('#')) {
|
|
|
|
|
// Internal anchor link
|
|
|
|
|
const element = document.querySelector(href);
|
|
|
|
|
if (element) {
|
|
|
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
|
|
|
}
|
|
|
|
|
} else if (href.startsWith('mailto:') || href.startsWith('tel:')) {
|
|
|
|
|
// Email or phone link
|
|
|
|
|
window.location.href = href;
|
|
|
|
|
} else if (href.startsWith('http')) {
|
|
|
|
|
// External link
|
|
|
|
|
window.open(href, '_blank');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="expand-hover"
|
|
|
|
|
@@ -31,7 +45,6 @@ export default function LandingPage() {
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Work", id: "portfolio" },
|
|
|
|
|
{ name: "Services", id: "services" },
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
|
]}
|
|
|
|
|
bottomLeftText="Web Designer"
|
|
|
|
|
@@ -48,8 +61,8 @@ export default function LandingPage() {
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
background={{ variant: "animated-grid" }}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "View My Work", href: "#portfolio" },
|
|
|
|
|
{ text: "Get Started", href: "#contact" }
|
|
|
|
|
{ text: "View My Work", onClick: () => handleButtonClick('#portfolio') },
|
|
|
|
|
{ text: "Get Started", onClick: () => handleButtonClick('#contact') }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
carouselItems={[
|
|
|
|
|
@@ -136,37 +149,6 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</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."
|
|
|
|
|
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: "2" },
|
|
|
|
|
{ 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" }
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactCTA
|
|
|
|
|
tag="Let's Work Together"
|
|
|
|
|
@@ -175,8 +157,8 @@ export default function LandingPage() {
|
|
|
|
|
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."
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Contact Me", href: "mailto:friischristian35@gmail.com" },
|
|
|
|
|
{ text: "Call: +49 176 61169654", href: "tel:+49176611696541" }
|
|
|
|
|
{ text: "Contact Me", onClick: () => handleButtonClick('mailto:friischristian35@gmail.com') },
|
|
|
|
|
{ text: "Call: +49 176 61169654", onClick: () => handleButtonClick('tel:+49176611696541') }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
background={{ variant: "animated-grid" }}
|
|
|
|
|
@@ -190,15 +172,14 @@ export default function LandingPage() {
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
|
items: [
|
|
|
|
|
{ label: "Work", href: "#portfolio" },
|
|
|
|
|
{ label: "Services", href: "#services" },
|
|
|
|
|
{ label: "About", href: "#about" }
|
|
|
|
|
{ label: "Work", onClick: () => handleButtonClick('#portfolio') },
|
|
|
|
|
{ label: "Services", onClick: () => handleButtonClick('#services') }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
items: [
|
|
|
|
|
{ label: "Email", href: "mailto:friischristian35@gmail.com" },
|
|
|
|
|
{ label: "Phone", href: "tel:+49176611696541" },
|
|
|
|
|
{ label: "Email", onClick: () => handleButtonClick('mailto:friischristian35@gmail.com') },
|
|
|
|
|
{ label: "Phone", onClick: () => handleButtonClick('tel:+49176611696541') },
|
|
|
|
|
{ label: "LinkedIn", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
|