development/3c02db02-34f5-43f0-a8b4-373159cd3036
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-09 17:59:14 +02:00
commit d46e1b07c0
308 changed files with 62206 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: #f5faff;;
--card: #f1f8ff;;
--foreground: #001122;;
--primary-cta: #15479c;;
--secondary-cta: #ffffff;;
--accent: #a8cce8;;
--background-accent: #7ba3cf;;
/* 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-montserrat), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-montserrat), sans-serif;
}

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,236 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import MediaSplitAbout from '@/components/sections/about/MediaSplitAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Camera, Sparkles, Award, Users, Star } from "lucide-react";
export default function VintageLensPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="largeSizeMediumTitles"
background="noiseGradient"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="outline"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{name: "Home", id: "hero"},
{name: "Products", id: "products"},
{name: "About", id: "about"},
{name: "Contact", id: "contact"}
]}
button={{text: "Shop Now", href: "products"}}
brandName="Vintage Lens"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Discover Timeless Photography"
description="Curated vintage cameras and film equipment from the analog era. Each piece tells a story of craftsmanship and photographic history."
tag="NYC's Finest Vintage Cameras"
tagIcon={Camera}
buttons={[
{text: "Browse Collection", href: "products"},
{text: "Learn More", href: "about"}
]}
carouselItems={[
{
id: "1", imageSrc: "https://img.b2bpic.net/free-photo/photo-camera-still-life_23-2150630958.jpg", imageAlt: "Vintage 35mm camera"
},
{
id: "2", imageSrc: "https://img.b2bpic.net/free-photo/top-view-vintage-camera-composition_23-2148913951.jpg", imageAlt: "Classic film camera"
},
{
id: "3", imageSrc: "https://img.b2bpic.net/free-photo/close-up-multiple-retro-photo-cameras_23-2148300544.jpg", imageAlt: "Vintage rangefinder camera"
},
{
id: "4", imageSrc: "https://img.b2bpic.net/free-photo/vintage-camera-grass_1150-1061.jpg", imageAlt: "Professional SLR camera"
},
{
id: "5", imageSrc: "https://img.b2bpic.net/free-photo/front-view-electronic-camera-device_23-2148300506.jpg", imageAlt: "Manual focus vintage camera"
},
{
id: "6", imageSrc: "https://img.b2bpic.net/free-photo/view-vintage-camera-with-briefcase-books_23-2150315187.jpg", imageAlt: "Rare collectible camera"
}
]}
autoPlay={true}
autoPlayInterval={4000}
/>
</div>
<div id="products" data-section="products">
<ProductCardFive
title="Our Vintage Camera Collection"
description="Handpicked cameras from decades past. Each camera is tested, cleaned, and ready for your next creative project."
tag="Premium Selection"
tagIcon={Sparkles}
products={[
{
id: "limited-offer", button: {text: "Limited Offer - 5 min", href: "#"},
imageSrc: "https://img.b2bpic.net/free-photo/old-retro-camera-wooden-table-background_93675-128086.jpg", imageAlt: "Leica M3 Rangefinder Camera", isFavorited: false
},
{
id: "camera-2", button: {text: "Add to Cart", href: "#"},
imageSrc: "https://img.b2bpic.net/free-photo/vintage-camera-grass_1150-1061.jpg", imageAlt: "Pentax K1000 SLR Camera", isFavorited: false
},
{
id: "camera-3", button: {text: "Add to Cart", href: "#"},
imageSrc: "https://img.b2bpic.net/free-photo/retro-photo-camera-ledge_23-2148243240.jpg", imageAlt: "Canon AE-1 35mm Camera", isFavorited: false
},
{
id: "camera-4", button: {text: "Add to Cart", href: "#"},
imageSrc: "https://img.b2bpic.net/free-photo/photo-camera-still-life_23-2150630958.jpg", imageAlt: "Hasselblad 500C Medium Format", isFavorited: false
},
{
id: "camera-5", button: {text: "Add to Cart", href: "#"},
imageSrc: "https://img.b2bpic.net/free-photo/top-view-camera-with-copy-space_23-2148372202.jpg", imageAlt: "Minolta X-700 SLR Camera", isFavorited: false
}
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="invertDefault"
carouselMode="buttons"
/>
</div>
<div id="about" data-section="about">
<MediaSplitAbout
title="35 Years of Analog Excellence"
description="Since 1989, Vintage Lens has been preserving photographic history in the heart of New York City. Our passion for analog photography drives us to source, restore, and share the finest cameras from the golden era of film. We believe every camera has a story, and we're here to help you discover yours."
imageSrc="https://img.b2bpic.net/free-photo/view-vintage-briefcase_23-2150315162.jpg"
imageAlt="Vintage Lens shop in NYC"
buttons={[
{text: "Explore Collection", href: "products"}
]}
imagePosition="right"
useInvertedBackground="noInvert"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
title="By The Numbers"
description="Our commitment to preserving analog photography excellence"
metrics={[
{
id: "1", value: "5000+", title: "Cameras Restored", description: "Carefully restored and preserved", icon: Camera
},
{
id: "2", value: "35", title: "Years in Business", description: "Serving NYC photography community", icon: Award
},
{
id: "3", value: "8000+", title: "Happy Collectors", description: "Photography enthusiasts worldwide", icon: Users
},
{
id: "4", value: "50+", title: "Brands Stocked", description: "From Leica to Hasselblad", icon: Star
}
]}
gridVariant="uniform-all-items-equal"
animationType="scale-rotate"
textboxLayout="default"
useInvertedBackground="invertCard"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="Trusted by Photography Enthusiasts"
description="Hear from collectors and photographers who've found their perfect vintage camera at Vintage Lens"
testimonials={[
{
id: "1", name: "Marcus Chen", handle: "@marcusphoto", testimonial: "Found my Leica M3 here three years ago. The condition was pristine and the knowledge of the staff was invaluable. Highly recommend!", imageSrc: "https://img.b2bpic.net/free-photo/happy-attractive-photographer-standing-outdoors-with-camera_8353-6513.jpg", imageAlt: "Marcus Chen"
},
{
id: "2", name: "Sarah Williams", handle: "@sarahfilmphotography", testimonial: "The attention to detail is unmatched. Every camera is tested and documented. This is the real deal for serious film photographers.", imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-male-photographer_23-2148453397.jpg", imageAlt: "Sarah Williams"
},
{
id: "3", name: "James Rodriguez", handle: "@jamesvisuals", testimonial: "Been visiting for years. They have an incredible selection and the staff genuinely cares about matching you with the right camera.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-caucasian-man-is-sitting-armchair-hotel-room-holding-professional-photo-camera_8353-10904.jpg", imageAlt: "James Rodriguez"
},
{
id: "4", name: "Emma Thompson", handle: "@emmaanalog", testimonial: "Got my Hasselblad here. The restoration work is beautiful and the prices are fair. Best vintage camera shop in NYC.", imageSrc: "https://img.b2bpic.net/free-photo/product-photographer-doing-his-job-studio_23-2148970264.jpg", imageAlt: "Emma Thompson"
},
{
id: "5", name: "David Park", handle: "@davidfilmlab", testimonial: "A treasure trove of analog equipment. The owners know their stuff and will help you find exactly what you need.", imageSrc: "https://img.b2bpic.net/free-photo/traveler-photographer-studio-portrait-handsome-bearded_613910-12325.jpg", imageAlt: "David Park"
},
{
id: "6", name: "Lisa Chen", handle: "@lisacamera", testimonial: "Outstanding customer service and an amazing collection. Every visit feels like stepping into photography history.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-young-photographer-standing-with-camera-outdoors-against-building_8353-6514.jpg", imageAlt: "Lisa Chen"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground="noInvert"
speed={30}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to start your analog photography journey? Get in touch with our team to discuss your camera needs or arrange a visit to our NYC showroom."
animationType="reveal-blur"
buttons={[
{text: "Contact Us", href: "#"},
{text: "Visit Our Store", href: "#"}
]}
useInvertedBackground="invertDefault"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Vintage Lens"
columns={[
{
title: "Shop", items: [
{label: "All Cameras", href: "#products"},
{label: "By Brand", href: "#"},
{label: "New Arrivals", href: "#"},
{label: "Rare Finds", href: "#"}
]
},
{
title: "About", items: [
{label: "Our Story", href: "#about"},
{label: "Restoration Process", href: "#"},
{label: "Blog", href: "#"},
{label: "Contact", href: "#contact"}
]
},
{
title: "Support", items: [
{label: "Shipping Info", href: "#"},
{label: "Returns", href: "#"},
{label: "Camera Care Guide", href: "#"},
{label: "FAQ", href: "#"}
]
},
{
title: "Connect", items: [
{label: "Instagram", href: "#"},
{label: "Newsletter", href: "#"},
{label: "Events", href: "#"},
{label: "Community", href: "#"}
]
}
]}
copyrightText="© 2025 Vintage Lens NYC. Preserving analog photography since 1989."
/>
</div>
</ThemeProvider>
);
}