Update src/app/page.tsx

Add src/app/product/[id]/page.tsx
2026-05-12 17:53:53 +00:00 · 2026-05-12 17:53:29 +00:00 · 2026-05-12 17:53:29 +00:00 · 2026-05-12 17:49:03 +00:00 · 2026-05-12 17:48:59 +00:00 · 2026-04-29 21:30:48 +00:00
5 changed files with 118 additions and 98 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,9 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Nunito_Sans } from "next/font/google";
+import { Public_Sans } from "next/font/google";
+import { Montserrat } from "next/font/google";
+import { Manrope } from "next/font/google";



@@ -19,8 +22,11 @@ export const metadata: Metadata = {
  },
 };

-const nunitoSans = Nunito_Sans({
-  variable: "--font-nunito-sans",
+
+
+
+const manrope = Manrope({
+  variable: "--font-manrope",
  subsets: ["latin"],
 });

@@ -32,7 +38,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${nunitoSans.variable} antialiased`}>
+        <body className={`${manrope.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,14 +30,10 @@ export default function LandingPage() {
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
-        {
-          name: "Damer",          id: "catalog"},
-        {
-          name: "Herrer",          id: "catalog"},
-        {
-          name: "Børn",          id: "catalog"},
-        {
-          name: "Sale",          id: "catalog"},
+        { name: "Damer", id: "catalog" },
+        { name: "Herrer", id: "catalog" },
+        { name: "Børn", id: "catalog" },
+        { name: "Sale", id: "catalog" },
      ]}
      brandName="Veloré"
    />
@@ -45,27 +41,14 @@ export default function LandingPage() {

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "gradient-bars" }}
      title="Veloré Ny Kollektion"
      description="Opdag vores nye sæsonudvalg af tidløse styles og moderne mode."
-      buttons={[
-        {
-          text: "Shop Nu",          href: "#catalog"},
-      ]}
+      buttons={[{ text: "Shop Nu", href: "#catalog" }]}
      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/active-woman-using-phone-by-white-wall_53876-129937.jpg",          imageAlt: "Veloré Fashion"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/male-client-wheelchair-asking-asian-woman-employee-assistance_482257-118424.jpg",          imageAlt: "Veloré Fashion"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/flatlay-outfit-travel_53876-138233.jpg",          imageAlt: "Veloré Fashion"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-unknown-woman-posing_23-2149551296.jpg",          imageAlt: "Veloré Fashion"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-business-suit_1303-17722.jpg",          imageAlt: "Veloré Fashion"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/your-best-give-up-life-goes-live-your-life_53876-13852.jpg",          imageAlt: "Veloré Fashion"},
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776686358962-yta1g4n7.png?_wi=1", imageAlt: "Veloré Fashion 1" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776686358962-6iesgca3.png?_wi=1", imageAlt: "Veloré Fashion 2" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776686358962-jz3l73c1.png?_wi=1", imageAlt: "Veloré Fashion 3" },
      ]}
    />
  </div>
@@ -77,20 +60,14 @@ export default function LandingPage() {
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={true}
      products={[
-        {
-          id: "1",          name: "T-shirt",          brand: "Veloré Essentials",          price: "199 kr",          rating: 5,
-          reviewCount: "128",          imageSrc: "http://img.b2bpic.net/free-photo/handsome-teen-boy-white-t-shirt_176474-96285.jpg",          imageAlt: "T-shirt"},
-        {
-          id: "2",          name: "Jakke",          brand: "Veloré Outerwear",          price: "599 kr",          rating: 4,
-          reviewCount: "85",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-metallic-blue-railing-wearing-headphone-her-neck_23-2148204744.jpg",          imageAlt: "Jakke"},
-        {
-          id: "3",          name: "Sko",          brand: "Veloré Footwear",          price: "799 kr",          rating: 5,
-          reviewCount: "64",          imageSrc: "http://img.b2bpic.net/free-photo/ice-skates-studio-still-life_23-2150558973.jpg",          imageAlt: "Sko"},
-        {
-          id: "4",          name: "Bukser",          brand: "Veloré Classics",          price: "399 kr",          rating: 4,
-          reviewCount: "92",          imageSrc: "http://img.b2bpic.net/free-photo/fashion-details-woman-walking-outdoor_273443-768.jpg",          imageAlt: "Bukser"},
+        { id: "1", name: "Veloré Classic Hoodie", brand: "Veloré", price: "199 kr", rating: 5, reviewCount: "128", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776686358962-yta1g4n7.png?_wi=2", imageAlt: "Classic Tee" },
+        { id: "2", name: "Veloré Modern Fit", brand: "Veloré", price: "199 kr", rating: 4, reviewCount: "85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776687441881-u8woli3j.png?_wi=1", imageAlt: "Modern Fit" },
+        { id: "3", name: "Veloré Signature", brand: "Veloré", price: "199 kr", rating: 5, reviewCount: "64", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776686358962-jz3l73c1.png?_wi=2", imageAlt: "Signature" },
+        { id: "4", name: "Veloré Urban Knit", brand: "Veloré", price: "549 kr", rating: 5, reviewCount: "42", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776687441881-u8woli3j.png?_wi=2", imageAlt: "Urban Knit" },
+        { id: "5", name: "Veloré Daily Jacket", brand: "Veloré", price: "1299 kr", rating: 4, reviewCount: "31", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776687441881-pzg3mbx6.png", imageAlt: "Daily Jacket" },
+        { id: "6", name: "Veloré Merino Scarf", brand: "Veloré", price: "399 kr", rating: 5, reviewCount: "19", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776687441881-ktw7qmbb.png", imageAlt: "Merino Scarf" },
      ]}
-      title="Produkter"
+      title="Vores Produkter"
      description="Skandinavisk minimalisme til hverdagsbrug."
    />
  </div>
@@ -100,14 +77,7 @@ export default function LandingPage() {
      useInvertedBackground={false}
      title="Om Veloré"
      description="Veloré er skabt med fokus på holdbarhed og skandinavisk minimalisme."
-      metrics={[
-        {
-          value: "100%",          title: "Kvalitet"},
-        {
-          value: "2025",          title: "Grundlagt"},
-        {
-          value: "50+",          title: "Styles"},
-      ]}
+      metrics={[{ value: "100%", title: "Kvalitet" }, { value: "2025", title: "Grundlagt" }, { value: "50+", title: "Styles" }]}
      imageSrc="http://img.b2bpic.net/free-photo/tailoring-items-arrangement-still-life_23-2149647260.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
@@ -120,12 +90,9 @@ export default function LandingPage() {
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
-        {
-          id: "m1",          value: "90%",          title: "Bæredygtig",          description: "Materialer brugt",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-creating-vision-board_23-2150061828.jpg"},
-        {
-          id: "m2",          value: "100%",          title: "Etisk",          description: "Arbejdsvilkår",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-with-clay-sculptures_23-2149730902.jpg"},
-        {
-          id: "m3",          value: "10.000+",          title: "Kunder",          description: "Tilfredse køb",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-garage-sale_23-2150574511.jpg"},
+        { id: "m1", value: "90%", title: "Bæredygtig", description: "Materialer brugt", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-creating-vision-board_23-2150061828.jpg" },
+        { id: "m2", value: "100%", title: "Etisk", description: "Arbejdsvilkår", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-with-clay-sculptures_23-2149730902.jpg" },
+        { id: "m3", value: "10.000+", title: "Kunder", description: "Tilfredse køb", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-garage-sale_23-2150574511.jpg" },
      ]}
      title="Vores Fokus"
      description="Vi prioriterer bæredygtighed og etik i hele vores forsyningskæde."
@@ -138,12 +105,9 @@ export default function LandingPage() {
      textboxLayout="split-description"
      useInvertedBackground={false}
      testimonials={[
-        {
-          id: "t1",          name: "Sarah J.",          role: "Kunde",          testimonial: "Fantastisk kvalitet og pasform!",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-wall-with-her-crossed-legs-against-blue-sky_23-2148187380.jpg"},
-        {
-          id: "t2",          name: "Michael L.",          role: "Kunde",          testimonial: "Min nye favoritjakke.",          imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-excited-african-woman-with-bags-shopping-outdoors-sunlight_181624-55731.jpg"},
-        {
-          id: "t3",          name: "Emily R.",          role: "Kunde",          testimonial: "Hurtig levering og super service.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-travel-agency_23-2150433448.jpg"},
+        { id: "t1", name: "Sarah J.", role: "Kunde", testimonial: "Fantastisk kvalitet og pasform!", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-wall-with-her-crossed-legs-against-blue-sky_23-2148187380.jpg" },
+        { id: "t2", name: "Michael L.", role: "Kunde", testimonial: "Min nye favoritjakke.", imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-excited-african-woman-with-bags-shopping-outdoors-sunlight_181624-55731.jpg" },
+        { id: "t3", name: "Emily R.", role: "Kunde", testimonial: "Hurtig levering og super service.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-travel-agency_23-2150433448.jpg" },
      ]}
      title="Kundeanmeldelser"
      description="Hvad vores kunder siger om os."
@@ -155,12 +119,9 @@ export default function LandingPage() {
      textboxLayout="split-description"
      useInvertedBackground={true}
      faqs={[
-        {
-          id: "f1",          title: "Hvad er leveringstiden?",          content: "Normalt 2-4 hverdage."},
-        {
-          id: "f2",          title: "Kan jeg returnere?",          content: "Ja, 30 dages returret."},
-        {
-          id: "f3",          title: "Hvordan er pasformen?",          content: "Vores størrelser er standard."},
+        { id: "f1", title: "Hvad er leveringstiden?", content: "Normalt 2-4 hverdage." },
+        { id: "f2", title: "Kan jeg returnere?", content: "Ja, 30 dages returret." },
+        { id: "f3", title: "Hvordan er pasformen?", content: "Vores størrelser er standard." },
      ]}
      title="Spørgsmål & Svar"
      description="Vi hjælper dig gerne."
@@ -171,8 +132,7 @@ export default function LandingPage() {
  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "gradient-bars" }}
      tag="Hold dig opdateret"
      title="Tilmeld nyhedsbrev"
      description="Få 10% på dit første køb."
@@ -183,26 +143,12 @@ export default function LandingPage() {
      <FooterBaseCard
      logoText="Veloré"
      columns={[
-        {
-          title: "Shop",          items: [
-            {
-              label: "Damer",              href: "#"},
-            {
-              label: "Herrer",              href: "#"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "Returret",              href: "#"},
-            {
-              label: "FAQ",              href: "#"},
-          ],
-        },
+        { title: "Shop", items: [{ label: "Damer", href: "#" }, { label: "Herrer", href: "#" }] },
+        { title: "Support", items: [{ label: "Returret", href: "#" }, { label: "FAQ", href: "#" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+
+export default function ProductPage({ params }: { params: { id: string } }) {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="directional-hover"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="large"
+        background="noise"
+        cardStyle="soft-shadow"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+              navItems={[
+                { name: "Damer", id: "/" },
+                { name: "Herrer", id: "/" },
+                { name: "Sale", id: "/" },
+              ]}
+              brandName="Veloré"
+            />
+        </div>
+
+        <main className="container mx-auto px-4 py-16 grid md:grid-cols-2 gap-12">
+            <div className="space-y-4">
+                <div className="aspect-[3/4] bg-muted rounded-2xl overflow-hidden">
+                    <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CcUIpzCJRVhhIFggEFFtBaCnc8/uploaded-1776686358962-yta1g4n7.png?_wi=2" alt="Product" className="w-full h-full object-cover" />
+                </div>
+            </div>
+            <div className="space-y-6">
+                <h1 className="text-4xl font-extrabold">Veloré Classic Hoodie</h1>
+                <p className="text-2xl font-bold">199 kr</p>
+                <div className="prose">
+                    <p>En tidløs hoodie fremstillet i blød økologisk bomuld. Perfekt til hverdagsbrug med et minimalistisk skandinavisk snit.</p>
+                </div>
+                <div className="flex gap-4">
+                    <button className="flex-1 bg-primary text-primary-foreground py-4 rounded-full font-bold hover:opacity-90 transition">Tilføj til kurv</button>
+                </div>
+                <div className="border-t pt-6">
+                    <h3 className="font-bold mb-2">Størrelsesguide</h3>
+                    <p className="text-sm text-muted-foreground">Vores størrelser er standard. Vi anbefaler at vælge din normale størrelse.</p>
+                </div>
+            </div>
+        </main>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseCard
+              logoText="Veloré"
+              columns={[
+                { title: "Shop", items: [{ label: "Damer", href: "/" }, { label: "Herrer", href: "/" }] },
+                { title: "Support", items: [{ label: "Returret", href: "#" }, { label: "FAQ", href: "#" }] },
+              ]}
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-manrope), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #f5f4f0;
-  --card: #ffffff;
-  --foreground: #1a1a1a;
-  --primary-cta: #2c2c2c;
-  --primary-cta-text: #f5f4f0;
-  --secondary-cta: #f5f4f0;
-  --secondary-cta-text: #1a1a1a;
-  --accent: #8a8a8a;
-  --background-accent: #e8e6e1;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #000612e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	20b3d847df	Update src/app/page.tsx	2026-05-12 17:53:53 +00:00
bender	43c8d83691	Add src/app/product/[id]/page.tsx	2026-05-12 17:53:29 +00:00
bender	fdcd19a038	Update src/app/page.tsx	2026-05-12 17:53:29 +00:00
bender	d4f6301bf1	Merge version_14 into main Merge version_14 into main	2026-05-12 17:49:03 +00:00
bender	326c9ad48c	Update src/app/page.tsx	2026-05-12 17:48:59 +00:00
bender	401b1ef163	Merge version_14 into main Merge version_14 into main	2026-04-29 21:30:48 +00:00
bender	4989d5f98b	Update src/app/page.tsx	2026-04-29 21:30:42 +00:00
bender	31c510e1c4	Merge version_14 into main Merge version_14 into main	2026-04-20 12:17:40 +00:00
bender	c953ba9f91	Update src/app/page.tsx	2026-04-20 12:17:36 +00:00
bender	a22386b232	Merge version_13 into main Merge version_13 into main	2026-04-20 12:00:04 +00:00
bender	d2a8efe612	Update src/app/page.tsx	2026-04-20 12:00:01 +00:00
bender	20bf874730	Merge version_13 into main Merge version_13 into main	2026-04-20 11:59:35 +00:00
bender	12846d9f7a	Update src/app/page.tsx	2026-04-20 11:59:32 +00:00
bender	85dfcfa1ca	Merge version_12 into main Merge version_12 into main	2026-04-20 11:47:52 +00:00
bender	ba961abdd1	Update theme fonts	2026-04-20 11:47:49 +00:00
bender	605b5707a8	Update theme fonts	2026-04-20 11:47:48 +00:00
bender	f8c23ccf78	Merge version_12 into main Merge version_12 into main	2026-04-20 11:47:43 +00:00
bender	a208974b40	Update theme fonts	2026-04-20 11:47:40 +00:00
bender	bdf4c7cfbe	Update theme fonts	2026-04-20 11:47:40 +00:00
bender	c146e99d29	Merge version_12 into main Merge version_12 into main	2026-04-20 11:47:29 +00:00
bender	64fe3891b2	Update theme fonts	2026-04-20 11:47:26 +00:00
bender	2176c0c5c0	Update theme fonts	2026-04-20 11:47:26 +00:00
bender	80e66de894	Merge version_12 into main Merge version_12 into main	2026-04-20 11:46:59 +00:00
bender	87389e825c	Update theme colors	2026-04-20 11:46:56 +00:00
bender	bf3893d9f2	Merge version_11 into main Merge version_11 into main	2026-04-20 11:46:56 +00:00
bender	14908f0769	Update theme colors	2026-04-20 11:46:52 +00:00
bender	28b4d4a82e	Merge version_10 into main Merge version_10 into main	2026-04-20 11:46:51 +00:00
bender	cb29c5d080	Update theme colors	2026-04-20 11:46:48 +00:00
bender	8615440ea5	Merge version_9 into main Merge version_9 into main	2026-04-20 11:46:47 +00:00
bender	e19fb052d0	Update theme colors	2026-04-20 11:46:44 +00:00
bender	5b9fdde8d0	Merge version_8 into main Merge version_8 into main	2026-04-20 11:46:43 +00:00
bender	61b0c7e7d4	Update theme colors	2026-04-20 11:46:40 +00:00
bender	6d8be196a7	Merge version_7 into main Merge version_7 into main	2026-04-20 11:46:38 +00:00
bender	78ecd9f956	Merge version_6 into main Merge version_6 into main	2026-04-20 11:46:34 +00:00
bender	b3e259c6fc	Merge version_5 into main Merge version_5 into main	2026-04-20 11:46:29 +00:00
bender	ae139aa589	Merge version_4 into main Merge version_4 into main	2026-04-20 11:46:20 +00:00
bender	d1423fae70	Merge version_3 into main Merge version_3 into main	2026-04-20 11:46:13 +00:00
bender	e058f58e98	Merge version_2 into main Merge version_2 into main	2026-04-20 11:30:04 +00:00