mulika-local/734504e6-58af-4554-b482-308b6095d25b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
vitaliimulika-dev
2026-01-08 13:04:02 +02:00
commit 8406a893a2
308 changed files with 62231 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

518
src/app/globals.css Normal file
View File

@@ -0,0 +1,518 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
--background: #fafafa;;
--card: #f4f4f5;;
--foreground: #27272a;;
--primary-cta: #3f3f46;;
--secondary-cta: #ffffff;;
--accent: #facc15;;
--background-accent: #eab308;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-cormorant-garamond), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-cormorant-garamond), sans-serif;
}

1268
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

260
src/app/page.tsx Normal file
View File

@@ -0,0 +1,260 @@
"use client"
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Gauge, Award, ThumbsUp } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="background-highlight"
borderRadius="sharp"
contentWidth="smallMedium"
sizing="largeSizeMediumTitles"
background="noiseGradient"
cardStyle="spotlight"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Porsche 911"
navItems={[
{ name: "Models", id: "products" },
{ name: "Performance", id: "features" },
{ name: "Heritage", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Experience the Legacy of the Porsche 911"
description="Where performance meets timeless design. Discover the car that redefines driving."
tag="Since 1963"
mediaItems={[
{
imageSrc: "https://img.b2bpic.net/free-photo/beautiful-car-coastal-drive_23-2151948193.jpg", imageAlt: "Porsche 911 front view"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/black-mini-coupe-road_114579-5056.jpg", imageAlt: "Porsche 911 side profile"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/mini-coupe-high-speed-drive-road-with-front-lights_114579-5040.jpg", imageAlt: "Porsche 911 rear design"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/white-mini-coupe-road_114579-5082.jpg", imageAlt: "Porsche 911 luxury interior"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/sport-cars-parade-race-highway_114579-4052.jpg", imageAlt: "Porsche 911 in motion"
}
]}
buttons={[
{ text: "Explore the 911", href: "products" }
]}
ariaLabel="Hero section showcasing Porsche 911 models"
/>
</div>
<div id="about" data-section="about">
<AboutPhoneTimeline
tag="Legendary Heritage"
title="Six Decades of Automotive Excellence"
description="The Porsche 911 has evolved through generations while maintaining its iconic character. From the classic air-cooled engines of the 1960s to today's turbocharged powerhouses, the 911 represents an unbroken lineage of performance, precision, and passion."
textboxLayout="default"
phoneOne={{
imageSrc: "https://img.b2bpic.net/free-photo/white-sport-car-with-black-autotuning_114579-4074.jpg", imageAlt: "Classic Porsche 911 heritage model"
}}
phoneTwo={{
imageSrc: "https://img.b2bpic.net/free-photo/high-speed-driving-mini-sport-car-forest_114579-4014.jpg", imageAlt: "Modern Porsche 911 contemporary design"
}}
useInvertedBackground="invertDefault"
ariaLabel="About section showcasing Porsche 911 heritage"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSeven
title="What Defines the 911"
description="Every element of the Porsche 911 is engineered for one purpose: to deliver an unforgettable driving experience."
tag="Engineering Excellence"
textboxLayout="default"
animationType="blur-reveal"
useInvertedBackground="noInvert"
features={[
{
id: 1,
title: "Uncompromising Performance", description: "Turbocharged engines delivering 379 to 630+ horsepower, achieving 0-60 mph in under 3 seconds. Experience acceleration that rivals dedicated track cars.", imageSrc: "https://img.b2bpic.net/free-photo/mini-coupe-parking-highway-bridge_114579-4016.jpg"
},
{
id: 2,
title: "Iconic Design Language", description: "The unmistakable silhouette has captivated enthusiasts for six decades. Every curve, every line, every surface is intentional—a masterpiece of automotive aesthetics and aerodynamic precision.", imageSrc: "https://img.b2bpic.net/free-photo/metallic-color-mini-coupe-driving-accross-forest_114579-4013.jpg"
},
{
id: 3,
title: "Advanced Engineering", description: "Precision-crafted components, intelligent drivetrain technology, and adaptive chassis systems work in perfect harmony. German engineering at its finest, refined through countless hours of development.", imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-left-headlight-white-sports-car_181624-12947.jpg"
}
]}
/>
</div>
<div id="products" data-section="products">
<ProductCardSeven
title="Explore the 911 Lineup"
description="Choose your 911. From the athletic Carrera to the track-focused GT variants, each model represents the pinnacle of sports car engineering."
tag="Current Models"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground="invertCard"
products={[
{
id: "carrera", name: "911 Carrera", price: "From $99,750", imageSrc: "https://img.b2bpic.net/free-photo/fast-red-car-road-back-view_23-2149600183.jpg", imageAlt: "Porsche 911 Carrera"
},
{
id: "turbo", name: "911 Turbo", price: "From $158,450", imageSrc: "https://img.b2bpic.net/free-photo/white-sport-car-with-black-autotuning-driving-with-high-speed-road_114579-4072.jpg", imageAlt: "Porsche 911 Turbo"
},
{
id: "gt", name: "911 GT3", price: "From $139,950", imageSrc: "https://img.b2bpic.net/free-photo/race-highway-black-red-coupe-cars_114579-5197.jpg", imageAlt: "Porsche 911 GT3"
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSix
title="By the Numbers"
description="The facts that showcase the 911's dominance in the luxury sports car segment."
tag="Performance Stats"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
useInvertedBackground="noInvert"
metrics={[
{
id: "1", value: "2.7s", tag: "0-60 mph", tagIcon: Zap,
title: "Turbo S Acceleration"
},
{
id: "2", value: "630", tag: "Peak Horsepower", tagIcon: Gauge,
title: "Turbo S Performance"
},
{
id: "3", value: "60+", tag: "Years", tagIcon: Award,
title: "Racing Heritage"
},
{
id: "4", value: "95%", tag: "Owner Satisfaction", tagIcon: ThumbsUp,
title: "Customer Loyalty"
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="Stories from 911 Enthusiasts"
description="Hear from the people who live and breathe the Porsche experience."
tag="Owner Stories"
textboxLayout="default"
useInvertedBackground="invertDefault"
testimonials={[
{
id: "1", name: "David Thompson, Investment Executive", date: "Date: 12 November 2024", title: "The Ultimate Expression of Precision", quote: "Owning a 911 Turbo has been transformative. The responsiveness, the power delivery, the engineering—it's not just a car, it's a partnership between man and machine. Every drive is a masterclass in automotive excellence.", tag: "Turbo Owner", avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "https://img.b2bpic.net/free-photo/white-coupe-sport-car-standing-road-front-view_114579-4005.jpg"
},
{
id: "2", name: "Sarah Chen, Automotive Journalist", date: "Date: 8 November 2024", title: "A Legacy Defined by Innovation", quote: "After reviewing dozens of sports cars, the 911 stands apart. Its evolution reflects Porsche's commitment to pushing boundaries while honoring heritage. The balance of performance and everyday usability is remarkable.", tag: "Industry Expert", avatarSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", imageSrc: "https://img.b2bpic.net/free-photo/photo-infiniti-g37-coupe-outdoors_158538-24741.jpg"
},
{
id: "3", name: "James Mitchell, Collector", date: "Date: 5 November 2024", title: "Investment That Thrills", quote: "I've collected high-end automobiles for 20 years. The 911 consistently appreciates in value while delivering pure driving joy. It's the rare car that makes financial and emotional sense.", tag: "Collector", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg", imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-city-street-motion-blur-urban-speed-concept_169016-68602.jpg"
},
{
id: "4", name: "Michelle Rodriguez, Track Day Enthusiast", date: "Date: 2 November 2024", title: "Track-Ready from the Showroom", quote: "The GT3 transformed my track day experiences. The precision steering, the grip, the confidence the car inspires—it's built for the circuit but equally stunning on the street. A true dual-purpose machine.", tag: "Track Driver", avatarSrc: "https://img.b2bpic.net/free-photo/close-up-businessman-with-tie_1098-2867.jpg", imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-car-driving-bridge-road_114579-4023.jpg"
},
{
id: "5", name: "Robert Nakamura, CEO", date: "Date: 30 October 2024", title: "The Definition of Timeless", quote: "In a world of disposable trends, the 911 endures. It's the car I'll hand down to my son. That timeless appeal combined with cutting-edge technology—that's the 911 formula.", tag: "Long-Time Owner", avatarSrc: "https://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg", imageSrc: "https://img.b2bpic.net/free-photo/back-view-grey-car-standing-bridge_114579-4084.jpg"
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about the Porsche 911 to make your decision."
textPosition="left"
useInvertedBackground="invertCard"
animationType="smooth"
faqs={[
{
id: "1", title: "What is the 0-60 mph time for the 911 Turbo?", content: "The 911 Turbo achieves 0-60 mph in just 2.7 seconds with standard all-wheel drive and launch control. The Turbo S variant delivers the same blistering acceleration, making it one of the quickest production cars in the world."
},
{
id: "2", title: "What is the fuel economy of a 911?", content: "The 911 Carrera achieves approximately 20 mpg city / 27 mpg highway with the 7-speed manual transmission. Models with PDK (Porsche Doppelkupplungsgetriebe) automatic transmission offer improved fuel efficiency. Higher-performance variants prioritize power delivery over fuel economy."
},
{
id: "3", title: "Is the 911 suitable as a daily driver?", content: "Absolutely. The 911 is engineered for everyday use despite its performance capabilities. It features comfortable seating, modern infotainment systems, adequate cargo space, and refined ride quality. Many 911 owners drive theirs daily while enjoying weekend track experiences."
},
{
id: "4", title: "What's the difference between Carrera, Turbo, and GT models?", content: "The Carrera is the foundation model with excellent performance and everyday usability. The Turbo adds forced induction for 200+ additional horsepower and advanced technologies. GT models (like GT3) are track-focused variants with aggressive aerodynamics, suspension tuning, and performance enhancements for circuit driving."
},
{
id: "5", title: "What warranty coverage does a new 911 include?", content: "New 911 models come with a 4-year/50,000-mile basic warranty and 4-year/unlimited-mile powertrain warranty. Extended warranty programs are available for up to 10 years of coverage, providing peace of mind and protection for your investment."
},
{
id: "6", title: "Can I configure my 911 with custom options?", content: "Yes, Porsche offers extensive personalization options through its Paint to Sample and customization programs. You can select from hundreds of exterior and interior combinations, wheel designs, interior leather selections, and bespoke details to create your perfect 911."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Begin Your 911 Journey"
description="Connect with a Porsche specialist to explore ownership options, schedule a test drive, or discuss your perfect configuration."
inputs={[
{
name: "name", type: "text", placeholder: "Full Name", required: true
},
{
name: "email", type: "email", placeholder: "Email Address", required: true
},
{
name: "phone", type: "tel", placeholder: "Phone Number", required: true
},
{
name: "interest", type: "text", placeholder: "Model of Interest (e.g., 911 Turbo S)", required: false
}
]}
textarea={{
name: "message", placeholder: "Tell us about your automotive passion and what draws you to the 911...", rows: 5,
required: true
}}
useInvertedBackground="noInvert"
imageSrc="https://img.b2bpic.net/free-photo/yellow-sport-car-with-black-autotuning-bridge_114579-4066.jpg"
mediaPosition="right"
buttonText="Start Your Experience"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Porsche 911"
/>
</div>
</ThemeProvider>
);
}