From 9f7d4eebf8fe7cc66b0c9c03ae4f559d7bcd0d84 Mon Sep 17 00:00:00 2001 From: Kevin DEJOUET <77232968+Azilone@users.noreply.github.com> Date: Mon, 19 May 2025 11:26:28 +0200 Subject: [PATCH 1/3] Deleted .nvmrc --- .nvmrc | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .nvmrc diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 67a228a..0000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -18.18.0 \ No newline at end of file From 5de0f65bd811359e08696d16377576e8ff36baff Mon Sep 17 00:00:00 2001 From: Kevin DEJOUET <77232968+Azilone@users.noreply.github.com> Date: Wed, 4 Jun 2025 15:31:46 +0200 Subject: [PATCH 2/3] add font size tokens --- src/app/page.tsx | 6 ++-- src/components/ai-image-comparison.tsx | 14 ++++---- src/components/comparison-section.tsx | 24 ++++++------- src/components/cta-section.tsx | 4 +-- src/components/customers-section.tsx | 38 ++++++++++---------- src/components/faq-section.tsx | 14 ++++---- src/components/footer.tsx | 28 +++++++-------- src/components/hero-stats-bar.tsx | 16 ++++----- src/components/hero-with-animations.tsx | 6 ++-- src/components/how-it-works-section.tsx | 38 ++++++++++---------- src/components/notification-banner.tsx | 2 +- src/components/problems-section.tsx | 10 +++--- src/components/results-section.tsx | 10 +++--- src/components/services-section.tsx | 18 +++++----- src/components/success-stories-section.tsx | 40 +++++++++++----------- tailwind.config.js | 31 +++++++++++++++++ 16 files changed, 165 insertions(+), 134 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 30d9a5c..30b18d3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -17,13 +17,13 @@ import { FoundersNote } from "@/components/founders-note"; export default function Home() { return (
-
-
{/* Added top-4 for spacing example */} +
+
{/* Added top-4 for spacing example */} {/* Navbar component no longer needs sticky */}
{/* Main content container */} -
+
diff --git a/src/components/ai-image-comparison.tsx b/src/components/ai-image-comparison.tsx index 4b14673..928305f 100644 --- a/src/components/ai-image-comparison.tsx +++ b/src/components/ai-image-comparison.tsx @@ -109,26 +109,26 @@ function ComparisonCard({ "flex flex-col rounded-2xl sm:rounded-[32px] overflow-hidden w-full", isHighlighted ? "bg-[#777CFD] p-2 sm:p-[10px]" - : "bg-white border border-[#E5E5EA]" + : "bg-white border border-border-primary" )} >
{/* Header */}

{data.title}

{data.description}

@@ -172,7 +172,7 @@ function ComparisonCard({ key={index} className={clsx( "flex items-center gap-2 sm:gap-3", - isHighlighted ? "text-white" : "text-[#140F23]" + isHighlighted ? "text-white" : "text-text-primary" )} > {isHighlighted ? ( @@ -197,11 +197,11 @@ export function AIImageComparison() { {/* Header */}
-
+
Quality Comparison
-

+

See the difference in quality

diff --git a/src/components/comparison-section.tsx b/src/components/comparison-section.tsx index b3ffcd6..077e2a3 100644 --- a/src/components/comparison-section.tsx +++ b/src/components/comparison-section.tsx @@ -13,7 +13,7 @@ function SparkIcon() { viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" - className="w-5 h-5 md:w-[18px] md:h-[18px] flex-shrink-0 text-[#5F1CFC]" + className="w-5 h-5 md:w-[18px] md:h-[18px] flex-shrink-0 text-accent" > {displayLabel} @@ -215,7 +215,7 @@ export function ComparisonSection() { }; const columnBaseClass = "flex-1 max-w-[260px] rounded-[32px] flex flex-col overflow-hidden"; - const columnStandardClass = `${columnBaseClass} bg-white border border-[#E5E5EA]`; + const columnStandardClass = `${columnBaseClass} bg-white border border-border-primary`; return (
@@ -227,11 +227,11 @@ export function ComparisonSection() {
{/* ... (header code remains the same) ... */}
-
+
Comparison
-
+
Why choose
Memorable.ai @@ -254,7 +254,7 @@ export function ComparisonSection() {
{/* Desktop: Left Column - Categories */}
-
+
{categories.map((cat) => ( @@ -266,7 +266,7 @@ export function ComparisonSection() { {/* Desktop: Memorable.ai Column - Highlighted */}
-
+
{desktopColumnTitles.magier} @@ -333,7 +333,7 @@ export function ComparisonSection() { >
{/* Data Items */}
+
{/* Decorative SVG - Top Right */} Book a demo diff --git a/src/components/customers-section.tsx b/src/components/customers-section.tsx index daba539..5bc2cc1 100644 --- a/src/components/customers-section.tsx +++ b/src/components/customers-section.tsx @@ -7,10 +7,10 @@ export function CustomersSection() {
-
+
Customers
-

+

We work with some of the @@ -126,7 +126,7 @@ export function CustomersSection() { best companies out there

-

+

Great ideas deserve great design. And great teams deserve a partner they can trust. We work with high-growth companies of all sizes - from idea stage to unicorn - and tackle all of their marketing @@ -136,7 +136,7 @@ export function CustomersSection() {

{/* Stats Card */} -
+
$2B+ @@ -168,7 +168,7 @@ export function CustomersSection() { {/* Company Cards Grid */}
{/* Pango */} -
+
-
+
SaaS
-
+
United States → Used by millions
{/* Seller X */} -
+
-
+
Ecommerce
-
+
Berlin, Germany → Unicorn in 18 months
{/* Plancraft */} -
+
-
+
SaaS
-
+
Hamburg, Germany → Raised $20M+
{/* Aikido */} -
+
-
+
SaaS
-
+
Ghent, Belgium → Raised $17M
{/* Upvest */} -
+
-
+
Fintech
-
+
Berlin, Germany → Raised $160M+
diff --git a/src/components/faq-section.tsx b/src/components/faq-section.tsx index 495e625..5aac63d 100644 --- a/src/components/faq-section.tsx +++ b/src/components/faq-section.tsx @@ -65,13 +65,13 @@ export function FAQSection() {
{/* FAQ Pill Tag - minor adjustments if needed, looks okay */} -
- +
+ FAQ
{/* Heading: Responsive Font Size & Tracking */} -

+

Frequently
@@ -92,19 +92,19 @@ export function FAQSection() { key={index} value={`item-${index}`} // Responsive border radius, consistent border/shadow - className="rounded-xl sm:rounded-[24px] border border-[#EBEBEE] bg-white shadow-[0px_1px_2px_rgba(16,24,40,0.05)] data-[state=open]:shadow-[0px_4px_10px_rgba(16,24,40,0.08)] transition-shadow duration-200" + className="rounded-xl sm:rounded-[24px] border border-border-light bg-white shadow-[0px_1px_2px_rgba(16,24,40,0.05)] data-[state=open]:shadow-[0px_4px_10px_rgba(16,24,40,0.08)] transition-shadow duration-200" > {/* Question Text */} {question} {/* Custom Plus/Minus Icon - Responsive Size */}
{/* Adjusted size slightly for responsiveness */} -
-
+
+
GetPawtrait - GetPawtrait + GetPawtrait French Support Team 🇫🇷
We're here to help!
Follow us
- - - + + +

@@ -29,21 +29,21 @@ export function Footer() {

Navigation

    -
  • Services
    • -
  • Customers
    • -
  • Pricing
    • -
  • Company
    • -
  • How it works
    • -
  • FAQ
    • +
  • Services
    • +
  • Customers
    • +
  • Pricing
    • +
  • Company
    • +
  • How it works
    • +
  • FAQ

Resources

    -
  • Blog
    • -
  • Newsletter
    • -
  • Freebies
    • -
  • Our Work
    • +
  • Blog
    • +
  • Newsletter
    • +
  • Freebies
    • +
  • Our Work
diff --git a/src/components/hero-stats-bar.tsx b/src/components/hero-stats-bar.tsx index 0664574..e6deec6 100644 --- a/src/components/hero-stats-bar.tsx +++ b/src/components/hero-stats-bar.tsx @@ -8,21 +8,21 @@ const HeroStatsBar = () => ( transition={{ duration: 0.6, delay: 0.15 }} className="flex justify-center mb-8" > -
+
- ❤️ - + de 2700 - Pawtraits created + ❤️ + + de 2700 + Pawtraits created | - 🇫🇷 - Founded in France + 🇫🇷 + Founded in France | - 🌍 - Worldwide delivery + 🌍 + Worldwide delivery
diff --git a/src/components/hero-with-animations.tsx b/src/components/hero-with-animations.tsx index 9d4ae0d..8b77178 100644 --- a/src/components/hero-with-animations.tsx +++ b/src/components/hero-with-animations.tsx @@ -35,7 +35,7 @@ export function HeroWithAnimations() { {/* Main Content */}
-

in under 3 minutes. @@ -83,7 +83,7 @@ export function HeroWithAnimations() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 1 }} - className="mt-[1.2vh] text-[1.2vh] leading-relaxed text-[#828088] max-w-sm mx-auto + className="mt-[1.2vh] text-[1.2vh] leading-relaxed text-text-muted max-w-sm mx-auto md:mt-[1.5vh] md:text-[1.3vh] md:leading-6 md:max-w-md lg:mt-[1.8vh] lg:text-[1.4vh] lg:leading-7 lg:max-w-lg xl:text-[1.5vh] xl:leading-7 xl:max-w-xl" diff --git a/src/components/how-it-works-section.tsx b/src/components/how-it-works-section.tsx index d0d5c74..0331cc2 100644 --- a/src/components/how-it-works-section.tsx +++ b/src/components/how-it-works-section.tsx @@ -15,7 +15,7 @@ export function HowItWorksSection() { {/* Badge */}
{/* Corrected border class */} - + How it works
@@ -25,7 +25,7 @@ export function HowItWorksSection() { {/* Heading container */}
{/* Responsive heading */} -

+

How to get your custom pet portrait{' '} {/* Inline container for "magic" + icon */} @@ -36,7 +36,7 @@ export function HowItWorksSection() { viewBox="0 0 64 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg" - className="inline-block h-12 w-12 sm:h-14 sm:w-14 lg:h-16 lg:w-16 text-[#5F1CFC] rotate-[-12deg]" + className="inline-block h-12 w-12 sm:h-14 sm:w-14 lg:h-16 lg:w-16 text-accent rotate-[-12deg]" > f @@ -55,7 +55,7 @@ export function HowItWorksSection() {

{/* Paragraph with responsive max-width */} -

+

@@ -67,7 +67,7 @@ export function HowItWorksSection() { {/* Corrected border class */}
{/* Number Chip */} -
1
+
1
{/* Placeholder Image Area */}
{/* Replace with component */} @@ -81,10 +81,10 @@ export function HowItWorksSection() {
{/* Card Content */}
-

+

Upload a photo of your pet

-

+

Pick a photo you like—any clear picture works. Just upload it to get started.

@@ -94,7 +94,7 @@ export function HowItWorksSection() { {/* Corrected border class */}
{/* Number Chip */} -
2
+
2
{/* Card Content */}
-

+

Choose your favorite style

-

+

Pick between a handcrafted design or get an instant, high-quality AI illustration. See previews on different products before you decide.

@@ -120,7 +120,7 @@ export function HowItWorksSection() { {/* Corrected border class. Added transform-gpu for performance. */}
{/* Number Chip */} -
3
+
3
{/* Placeholder Image Area */}
{/* Replace with component */} @@ -134,10 +134,10 @@ export function HowItWorksSection() {
{/* Card Content */}
-

+

Get your artwork

-

+

Place your order and receive your pet's portrait as a digital file or printed product. It's that simple.

@@ -149,12 +149,12 @@ export function HowItWorksSection() { {/* Feature 1 */}
{/* Lightning bolt icon chip */} - + - + Instant result preview
@@ -162,12 +162,12 @@ export function HowItWorksSection() { {/* Feature 2 */}
{/* Diamond icon chip (SVG from public/svg/Icône SVG Diamant.svg) */} - + - + High quality materials
@@ -175,14 +175,14 @@ export function HowItWorksSection() { {/* Feature 3 */}
{/* Globe icon chip */} - + - + Worldwide delivery
diff --git a/src/components/notification-banner.tsx b/src/components/notification-banner.tsx index bab45e4..9e44e42 100644 --- a/src/components/notification-banner.tsx +++ b/src/components/notification-banner.tsx @@ -9,7 +9,7 @@ export function NotificationBanner() { if (!isVisible) return null; return ( -
+
🪄 MagicDesign is now magier → diff --git a/src/components/problems-section.tsx b/src/components/problems-section.tsx index 1e75c4a..49b37e2 100644 --- a/src/components/problems-section.tsx +++ b/src/components/problems-section.tsx @@ -179,12 +179,12 @@ export function ProblemsSection() { >
- + Problems Is your company struggling with design? @@ -223,10 +223,10 @@ export function ProblemsSection() {
{/* Text Content */}
-

+

{problem.title}

-

+

{problem.description}

@@ -237,7 +237,7 @@ export function ProblemsSection() { {/* Right Column: Illustration */}
{/* Container with border and shadow */} -
+
{/* Slightly adjusted negative margin */} {/* Text Content - Responsive text sizes already handled */}
-

+

Turn your pet's photo into custom art

-

{/* Adjusted max-width slightly */} +

{/* Adjusted max-width slightly */} GetPawtrait.com: premium pet portraits, previewed in real time, printed and delivered to your door in days — starting at €19.

@@ -144,7 +144,7 @@ interface ServiceCardProps { function ServiceCard({ title, description, imageSrc }: ServiceCardProps) { return ( // Responsive width classes -
+
{/* Responsive height classes */}
-

{title}

-

{description}

+

{title}

+

{description}

); diff --git a/src/components/services-section.tsx b/src/components/services-section.tsx index bfb07a2..ba1c163 100644 --- a/src/components/services-section.tsx +++ b/src/components/services-section.tsx @@ -115,7 +115,7 @@ export function ServicesSection() { {/* Section Header */}
{/* Smaller gap */}
- {/* Smaller padding/text */} + {/* Smaller padding/text */} Collections
@@ -123,7 +123,7 @@ export function ServicesSection() {
{/* Smaller gap */} {/* Title Block */} -

+

Explore Our Collections

@@ -143,8 +143,8 @@ export function ServicesSection() { onClick={() => setSelectedService(serviceName)} className={`cursor-pointer rounded-[32px] px-2 py-1 text-xs font-medium leading-4 tracking-[-0.36px] transition-colors duration-200 md:px-3 md:py-1.5 md:text-sm ${ isSelected - ? 'bg-[#5F1CFC] text-white' - : 'border border-[#E5E5EA] bg-white text-[#828088] hover:border-gray-400 hover:text-gray-900' + ? 'bg-accent text-white' + : 'border border-border-primary bg-white text-text-muted hover:border-gray-400 hover:text-gray-900' }`} > {serviceName} @@ -157,7 +157,7 @@ export function ServicesSection() { {/* Showcase Area */} {currentShowcase ? (
-
+
{/* Image container - RESPONSIVE HEIGHT */}
{/* Left side - Client name and price */}
- + {currentShowcase.clientName} {/* Price tag - visually emphasized */} - + {currentShowcase.price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}
@@ -188,8 +188,8 @@ export function ServicesSection() { key={index} className={`flex items-center gap-1 rounded-[32px] border px-2 py-1 text-xs font-medium leading-4 tracking-[-0.32px] sm:px-2.5 sm:py-1.5 sm:text-sm md:text-sm ${ tag.isHighlight - ? 'border-[#5F1CFC] text-[#5F1CFC]' - : 'border-[#E5E5EA] bg-white text-[#140F23]' + ? 'border-accent text-accent' + : 'border-border-primary bg-white text-text-primary' }`} > {tag.text} diff --git a/src/components/success-stories-section.tsx b/src/components/success-stories-section.tsx index 674802a..ad833c7 100644 --- a/src/components/success-stories-section.tsx +++ b/src/components/success-stories-section.tsx @@ -5,18 +5,18 @@ import Image from "next/image"; export function SuccessStoriesSection() { return ( -
+
{/* Header */}
- + Testimonials
-

+

Success

@@ -35,7 +35,7 @@ export function SuccessStoriesSection() { />
-

+

stories

@@ -46,10 +46,10 @@ export function SuccessStoriesSection() { {/* Left Column */}
{/* Purple Stats Card */} -
+
- + 80+
@@ -88,11 +88,11 @@ export function SuccessStoriesSection() { {/* Decorative Element */}
-
-
-
-
-
+
+
+
+
+
@@ -104,14 +104,14 @@ export function SuccessStoriesSection() { {/* Right Column */}
{/* Testimonial Card */} -
+
-
+
MAGIER DIGITAL
-
+

"At Softwaregini we have been very satisfied with the work by the @@ -140,11 +140,11 @@ export function SuccessStoriesSection() {

-
+
-
Johannes Bock
-
+
Johannes Bock
+
Founder @ Softwaregini
@@ -154,10 +154,10 @@ export function SuccessStoriesSection() { {/* Bottom Cards */}
{/* Purple Stats Card */} -
+
- + 20%
@@ -198,7 +198,7 @@ export function SuccessStoriesSection() { {/* CTA Button */}
-
diff --git a/tailwind.config.js b/tailwind.config.js index 8192fbf..06df008 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,6 +5,37 @@ module.exports = { fontFamily: { sans: ['QualyNeue', 'sans-serif'], }, + colors: { + 'background-light': '#f8f7fd', + accent: '#5F1CFC', + 'text-primary': '#140F23', + 'text-muted': '#828088', + 'border-primary': '#E5E5EA', + 'border-light': '#EBEBEE', + }, + borderRadius: { + layout: '32px', + }, + maxWidth: { + content: '1920px', + }, + fontSize: { + 'size-9': '9px', + 'size-10': '10px', + 'size-16': '16px', + 'size-20': '20px', + 'size-26': '26px', + 'size-32': '32px', + 'size-40': '40px', + 'size-48': '48px', + 'size-50': '50px', + 'size-54': '54px', + 'size-56': '56px', + 'size-61': '61px', + 'size-64': '64px', + 'size-66': '66px', + 'size-72': '72px', + }, }, }, } \ No newline at end of file From 0fff90d027cb8037f7b9e4393ce1c1a008359487 Mon Sep 17 00:00:00 2001 From: Kevin DEJOUET <77232968+Azilone@users.noreply.github.com> Date: Wed, 4 Jun 2025 19:55:06 +0200 Subject: [PATCH 3/3] centralize all asset paths --- src/app/page.tsx | 11 ++-- src/components/ai-image-comparison.tsx | 9 +-- src/components/award-banner.tsx | 9 +-- src/components/benefits-section.tsx | 13 ++-- src/components/cta-section.tsx | 5 +- src/components/footer.tsx | 21 +++---- src/components/how-it-works-section.tsx | 7 ++- src/components/navbar.tsx | 3 +- src/components/problems-section.tsx | 7 ++- src/components/results-section.tsx | 11 ++-- src/components/services-section.tsx | 21 +++---- src/components/testimonials-marquee.tsx | 17 +++--- .../ui/demo-animated-testimonials.tsx | 3 +- src/data/assets.json | 59 +++++++++++++++++++ 14 files changed, 134 insertions(+), 62 deletions(-) create mode 100644 src/data/assets.json diff --git a/src/app/page.tsx b/src/app/page.tsx index 30b18d3..a1e5fdb 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,6 +12,7 @@ import { BenefitsSection } from "@/components/benefits-section"; import { AnimatedTestimonials } from "@/components/ui/animated-testimonials"; import HeroAwardBanner from "@/components/award-banner"; import { FoundersNote } from "@/components/founders-note"; +import assets from "@/data/assets.json"; export default function Home() { @@ -36,35 +37,35 @@ export default function Home() { "A fantastic picture of my fur babies! The quality and detail is brilliant! So so happy with my purchase!", name: "Louise S.", designation: "", - src: "/images/customer/ac1.jpg", + src: assets.images.customers["1"], }, { quote: "This is the 2nd canvas that we have done. The quality is A+, including the frames!! Great communication during the entire process, start to finish! We have a 3rd picture-canvas that will be in the works soon... We can't wait to work with you again!!", name: "Christopher S.", designation: "", - src: "/images/customer/ac2.jpg", + src: assets.images.customers["2"], }, { quote: "I'm so pleased with the portrait; it was a gift for my husband after our beloved lab passed away. The picture is absolutely perfect and captures his spirit beautifully.", name: "Leah A.", designation: "", - src: "/images/customer/ac3.jpg", + src: assets.images.customers["3"], }, { quote: "I'm sorry, not sorry, but I'm in love with this. Super easy to order. They sent a proof and the final photo is even better than expected because it has like a velvet feel to it almost like a vintage painting or art.", name: "Betsy T.", designation: "", - src: "/images/customer/ac4.jpg", + src: assets.images.customers["4"], }, { quote: "Amazing service, updated all the way and absolutely delighted with the portrait of our gorgeous dog. The quality is exceptional and the attention to detail is remarkable.", name: "Lauraine Q.", designation: "", - src: "/images/customer/ac5.jpg", + src: assets.images.customers["5"], }, ]} // autoplay={true} diff --git a/src/components/ai-image-comparison.tsx b/src/components/ai-image-comparison.tsx index 928305f..3731959 100644 --- a/src/components/ai-image-comparison.tsx +++ b/src/components/ai-image-comparison.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import clsx from 'clsx'; +import assets from "@/data/assets.json"; import { ImageComparison, ImageComparisonImage, ImageComparisonSlider } from '@/components/ui/image-comparison'; @@ -17,8 +18,8 @@ const comparisonData: Record<'memorable' | 'others', ImageComparisonData> = { memorable: { title: "GetPawtrait.com", description: "Why GetPawtrait stands out for pet portraits", - beforeImage: "/images/placeholder-image1.jpg", - afterImage: "/images/placeholder-image2.webp", + beforeImage: assets.images.placeholders.comparison1, + afterImage: assets.images.placeholders.comparison2, features: [ "Proprietary Pawtraits model V2 + optional designer retouching: sharp details, true-to-life colors", "Instant HD preview before payment", @@ -32,8 +33,8 @@ const comparisonData: Record<'memorable' | 'others', ImageComparisonData> = { others: { title: "Other Pet Portrait Services", description: "How typical services compare", - beforeImage: "/images/placeholder-image1.jpg", - afterImage: "/images/placeholder-image2.webp", + beforeImage: assets.images.placeholders.comparison1, + afterImage: assets.images.placeholders.comparison2, features: [ "Low-res or no preview, pay before you see", "Fewer than 10 styles, often reused elsewhere", diff --git a/src/components/award-banner.tsx b/src/components/award-banner.tsx index ed4c0a8..94a254e 100644 --- a/src/components/award-banner.tsx +++ b/src/components/award-banner.tsx @@ -1,4 +1,5 @@ import React from "react"; +import assets from "@/data/assets.json"; export default function AwardBanner() { return ( @@ -6,7 +7,7 @@ export default function AwardBanner() {
{/* Laurel left */} {/* Laurel right */} Seen on {/* TikTok logo */} & {/* Instagram logo */}
Artwork Ready Fast
Unlimited Free Revisions
100% Satisfaction Guarantee
Worldwide Delivery
Human Support Team
Quality First Approach {/* Decorative SVG - Top Right */} {/* Decorative SVG - Bottom Left */} - GetPawtrait + GetPawtrait GetPawtrait French Support Team 🇫🇷
We're here to help! @@ -53,23 +54,23 @@ export function Footer() {
Tracked Shipping Available
- UPS - FedEx - USPS + UPS + FedEx + USPS
Secure Payment
- VISA from Visa Inc. - MasterCard from Mastercard - American Express from American Express - PayPal from PayPal - Apple Pay from Apple + VISA from Visa Inc. + MasterCard from Mastercard + American Express from American Express + PayPal from PayPal + Apple Pay from Apple
- USA Flag + USA Flag Printed in USA
diff --git a/src/components/how-it-works-section.tsx b/src/components/how-it-works-section.tsx index 0331cc2..170f03e 100644 --- a/src/components/how-it-works-section.tsx +++ b/src/components/how-it-works-section.tsx @@ -2,6 +2,7 @@ import React from "react"; import Image from "next/image"; // Import next/image +import assets from "@/data/assets.json"; export function HowItWorksSection() { return ( @@ -72,7 +73,7 @@ export function HowItWorksSection() {
{/* Replace with component */} Upload your pet photo Choose your favorite style {/* Replace with component */} Get your artwork GetPawtrait ), - lottieSrc: "/lotties/1.json", + lottieSrc: assets.lotties["1"], }, { id: 2, @@ -85,7 +86,7 @@ const problemsData = [ ), - lottieSrc: "/lotties/2.json", + lottieSrc: assets.lotties["2"], }, { id: 3, @@ -118,7 +119,7 @@ const problemsData = [ ), - lottieSrc: "/lotties/4.json", + lottieSrc: assets.lotties["4"], }, ]; diff --git a/src/components/results-section.tsx b/src/components/results-section.tsx index 5d37465..e62a241 100644 --- a/src/components/results-section.tsx +++ b/src/components/results-section.tsx @@ -2,6 +2,7 @@ import React from "react"; import Image from "next/image"; +import assets from "@/data/assets.json"; import { motion } from "framer-motion"; // Import motion import CTAButton from "./ui/CTAButton"; @@ -171,30 +172,30 @@ const serviceCards = [ title: "Posters & Canvas", description: "Transform your pet photos into stunning wall art. Premium quality prints delivered to your door in days.", - imageSrc: "/images/customer/ac1.jpg", + imageSrc: assets.images.customers["1"], }, { title: "Mugs & Phone Cases", description: "Show off your furry friend everywhere you go. Durable, high-quality prints that last.", - imageSrc: "/images/customer/ac2.jpg", + imageSrc: assets.images.customers["2"], }, { title: "Gift Sets", description: "Perfect for pet lovers. Mix and match products to create the ultimate personalized gift.", - imageSrc: "/images/customer/ac3.jpg", + imageSrc: assets.images.customers["3"], }, { title: "Custom Styles", description: "Choose from our exclusive collection of pet-specific art styles. From classic to modern.", - imageSrc: "/images/customer/ac4.jpg", + imageSrc: assets.images.customers["4"], }, { title: "Premium Quality", description: "Professional printing, worldwide shipping, and gift wrapping available. Satisfaction guaranteed.", - imageSrc: "/images/customer/ac5.jpg", + imageSrc: assets.images.customers["5"], }, ]; \ No newline at end of file diff --git a/src/components/services-section.tsx b/src/components/services-section.tsx index ba1c163..6f07008 100644 --- a/src/components/services-section.tsx +++ b/src/components/services-section.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; // Assurez-vous que React et useState sont importés import Image from "next/image"; +import assets from "@/data/assets.json"; import { ShimmerButton } from './magicui/shimmer-button'; // --- Données (inchangées par rapport à la version précédente) --- @@ -22,7 +23,7 @@ const serviceNames = [ const showcaseDetailsData = [ { serviceName: 'Custom Pet Portraits', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Custom Pet Portraits showcase", clientName: "Pet Lover #1", price: 49.99, @@ -30,7 +31,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Personalized Mugs', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Personalized Mugs showcase", clientName: "Coffee Addict", price: 19.99, @@ -38,7 +39,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Custom T-Shirts', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Custom T-Shirts showcase", clientName: "Dog Dad", price: 29.99, @@ -46,7 +47,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Embroidered or Printed Sweatshirts/Hoodies', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Sweatshirts/Hoodies showcase", clientName: "Cat Mom", price: 59.99, @@ -54,7 +55,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Custom Blankets', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Custom Blankets showcase", clientName: "Gift Giver", price: 39.99, @@ -62,7 +63,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Personalized Pillows/Cushions', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Personalized Pillows/Cushions showcase", clientName: "Home Decor Fan", price: 24.99, @@ -70,7 +71,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Custom Posters', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Custom Posters showcase", clientName: "Art Collector", price: 14.99, @@ -78,7 +79,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Pet Bandanas', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Pet Bandanas showcase", clientName: "Fashion Pet", price: 12.99, @@ -86,7 +87,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Custom Phone Cases', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Custom Phone Cases showcase", clientName: "Pet Parent On-the-Go", price: 21.99, @@ -94,7 +95,7 @@ const showcaseDetailsData = [ }, { serviceName: 'Pet Tags or Collars', - imageSrc: "/images/product_placeholder.webp", + imageSrc: assets.images.placeholders.product, imageAlt: "Pet Tags or Collars showcase", clientName: "Safety First", price: 9.99, diff --git a/src/components/testimonials-marquee.tsx b/src/components/testimonials-marquee.tsx index 922a59b..6d2cd33 100644 --- a/src/components/testimonials-marquee.tsx +++ b/src/components/testimonials-marquee.tsx @@ -3,32 +3,33 @@ import { cn } from "@/lib/utils"; import { Marquee } from "@/components/magicui/marquee" import Image from "next/image"; +import assets from "@/data/assets.json"; import Link from "next/link"; import { ImageComparison, ImageComparisonImage, ImageComparisonSlider } from "@/components/ui/image-comparison"; const portfolioItems = [ { title: "PHOTO > CADEAU", - beforeImage: "/images/rabbit1.webp", - afterImage: "/images/rabbit2.webp", + beforeImage: assets.images.rabbits.before, + afterImage: assets.images.rabbits.after, href: "", }, { title: "PHOTO > CADEAU", - beforeImage: "/images/rabbit1.webp", - afterImage: "/images/rabbit2.webp", + beforeImage: assets.images.rabbits.before, + afterImage: assets.images.rabbits.after, href: "", }, { title: "PHOTO > CADEAU", - beforeImage: "/images/rabbit1.webp", - afterImage: "/images/rabbit2.webp", + beforeImage: assets.images.rabbits.before, + afterImage: assets.images.rabbits.after, href: "", }, { title: "PHOTO > CADEAU", - beforeImage: "/images/rabbit1.webp", - afterImage: "/images/rabbit2.webp", + beforeImage: assets.images.rabbits.before, + afterImage: assets.images.rabbits.after, href: "", }, ]; diff --git a/src/components/ui/demo-animated-testimonials.tsx b/src/components/ui/demo-animated-testimonials.tsx index f21728f..abf0ba6 100644 --- a/src/components/ui/demo-animated-testimonials.tsx +++ b/src/components/ui/demo-animated-testimonials.tsx @@ -1,4 +1,5 @@ import { AnimatedTestimonials } from "./animated-testimonials"; +import assets from "@/data/assets.json"; function AnimatedTestimonialsDemo() { const testimonials = [ @@ -7,7 +8,7 @@ function AnimatedTestimonialsDemo() { "Le souci du détail et les fonctionnalités innovantes ont complètement transformé notre workflow. C'est exactement ce que nous recherchions.", name: "Sarah Chen", designation: "Product Manager chez TechFlow", - src: "/product-placeholder.webp", // Placeholder local + src: assets.images.placeholders.demo, // Placeholder local }, { quote: diff --git a/src/data/assets.json b/src/data/assets.json new file mode 100644 index 0000000..f966640 --- /dev/null +++ b/src/data/assets.json @@ -0,0 +1,59 @@ +{ + "images": { + "logo": "/images/logo.webp", + "brand": { + "ups": "/images/brand/Logo UPS.svg", + "fedex": "/images/brand/FedEx Express.svg", + "usps": "/images/brand/Logo USPS.svg", + "visa": "/images/brand/Logo Visa Inc.svg", + "mastercard": "/images/brand/Logo Mastercard.svg", + "americanExpress": "/images/brand/American Express Icon.svg", + "paypal": "/images/brand/SVG Paypal.svg", + "applePay": "/images/brand/Logo Apple Pay.svg", + "usaFlag": "/images/brand/usa.svg" + }, + "benefits": { + "1": "/images/benefits/1.webp", + "2": "/images/benefits/2.webp", + "3": "/images/benefits/3.webp", + "4": "/images/benefits/4.webp", + "5": "/images/benefits/5.webp", + "6": "/images/benefits/6.webp" + }, + "placeholders": { + "product": "/images/product_placeholder.webp", + "comparison1": "/images/placeholder-image1.jpg", + "comparison2": "/images/placeholder-image2.webp", + "demo": "/product-placeholder.webp" + }, + "customers": { + "1": "/images/customer/ac1.jpg", + "2": "/images/customer/ac2.jpg", + "3": "/images/customer/ac3.jpg", + "4": "/images/customer/ac4.jpg", + "5": "/images/customer/ac5.jpg" + }, + "howItWorks": { + "1": "/images/hiw1.webp", + "2": "/images/hiw2.webp", + "3": "/images/hiw3.webp" + }, + "rabbits": { + "before": "/images/rabbit1.webp", + "after": "/images/rabbit2.webp" + } + }, + "svg": { + "cta1": "/svg/cta1.svg", + "cta2": "/svg/cta2.svg", + "laurierLeft": "/svg/laurier-gauche.svg", + "laurierRight": "/svg/laurier-droit.svg", + "tiktok": "/svg/TikTok.svg", + "instagram": "/svg/instagram.svg" + }, + "lotties": { + "1": "/lotties/1.json", + "2": "/lotties/2.json", + "4": "/lotties/4.json" + } +}