Skip to content

Pod #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Azilone wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Pod #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f7d4ee
Deleted .nvmrc
Azilone May 19, 2025
5de0f65
add font size tokens
Azilone Jun 4, 2025
2ab00d4
Merge pull request #1 from Azilone/codex/créer-un-système-de-concepti…
Azilone Jun 4, 2025
0fff90d
centralize all asset paths
Azilone Jun 4, 2025
6f5e02c
Merge pull request #2 from Azilone/codex/créer-un-fichier-json-pour-c…
Azilone Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .nvmrc
View file
Open in desktop

This file was deleted.

17 changes: 9 additions & 8 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,19 @@ 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() {
return (
<div className="bg-gray-100">
<div className="mx-auto max-w-[1920px] px-4 sm:px-6 lg:px-8 py-8 relative space-y-8">
<div className="sticky top-4 bg-white rounded-[32px] ring ring-gray-200 z-[1000]"> {/* Added top-4 for spacing example */}
<div className="mx-auto max-w-content px-4 sm:px-6 lg:px-8 py-8 relative space-y-8">
<div className="sticky top-4 bg-white rounded-layout ring ring-gray-200 z-[1000]"> {/* Added top-4 for spacing example */}
<Navbar /> {/* Navbar component no longer needs sticky */}
</div>

{/* Main content container */}
<div className="bg-white rounded-[32px] bg-gradient-to-t from-white via-white to-[#f8f7fd]/90 ring ring-gray-200">
<div className="bg-white rounded-layout bg-gradient-to-t from-white via-white to-background-light/90 ring ring-gray-200">
<HeroWithAnimations />
</div>
<HeroAwardBanner />
Expand All @@ -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}
Expand Down
23 changes: 12 additions & 11 deletions src/components/ai-image-comparison.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';


Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -109,26 +110,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"
)}
>
<div
className={clsx(
"flex flex-col h-full rounded-xl sm:rounded-[32px] overflow-hidden",
isHighlighted ? "bg-[#5F1CFC]" : ""
isHighlighted ? "bg-accent" : ""
)}
>
{/* Header */}
<div
className={clsx(
"px-4 sm:px-6 py-4 sm:py-8 text-center",
isHighlighted ? "text-white" : "text-[#140F23]"
isHighlighted ? "text-white" : "text-text-primary"
)}
>
<h3 className="text-xl sm:text-2xl font-semibold mb-2">{data.title}</h3>
<p className={clsx(
"text-sm sm:text-base",
isHighlighted ? "text-white/90" : "text-[#828088]"
isHighlighted ? "text-white/90" : "text-text-muted"
)}>
{data.description}
</p>
Expand Down Expand Up @@ -172,7 +173,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 ? (
Expand All @@ -197,11 +198,11 @@ export function AIImageComparison() {
{/* Header */}
<div className="flex flex-col items-center max-w-[650px] text-center mb-8 sm:mb-12 md:mb-16">
<div className="flex flex-col items-center mb-4">
<div className="text-[#5F1CFC] font-sans text-xs sm:text-sm md:text-base leading-4 tracking-[-0.32px] py-[7.5px] px-[17px] rounded-[42px] border border-[#E5E5EA]">
<div className="text-accent font-sans text-xs sm:text-sm md:text-base leading-4 tracking-[-0.32px] py-[7.5px] px-[17px] rounded-[42px] border border-border-primary">
Quality Comparison
</div>
</div>
<h2 className="text-[#140F23] font-sans text-3xl sm:text-4xl md:text-5xl lg:text-[66px] font-semibold leading-tight sm:leading-tight lg:leading-[72.6px] tracking-tight lg:tracking-[-2.64px]">
<h2 className="text-text-primary font-sans text-3xl sm:text-4xl md:text-5xl lg:text-size-66 font-semibold leading-tight sm:leading-tight lg:leading-[72.6px] tracking-tight lg:tracking-[-2.64px]">
See the difference in quality
</h2>
</div>
Expand Down
9 changes: 5 additions & 4 deletions src/components/award-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from "react";
import assets from "@/data/assets.json";

export default function AwardBanner() {
return (
<div className="w-full flex flex-col items-center gap-1 py-2 select-none mb-0 mt-10">
<div className="flex items-center gap-1 sm:gap-2 w-full justify-center">
{/* Laurel left */}
<img
src="/svg/laurier-gauche.svg"
src={assets.svg.laurierLeft}
alt="Laurel Left"
className="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 text-gray-400 relative top-[2px] sm:top-[4px]"
aria-hidden="true"
Expand All @@ -21,7 +22,7 @@ export default function AwardBanner() {
</div>
{/* Laurel right */}
<img
src="/svg/laurier-droit.svg"
src={assets.svg.laurierRight}
alt="Laurel Right"
className="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 text-gray-400 relative top-[2px] sm:top-[4px]"
aria-hidden="true"
Expand All @@ -31,15 +32,15 @@ export default function AwardBanner() {
<span className="text-gray-400">Seen on</span>
{/* TikTok logo */}
<img
src="/svg/TikTok.svg"
src={assets.svg.tiktok}
alt="TikTok Logo"
className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-gray-400 relative top-[2px]"
aria-hidden="true"
/>
<span className="text-gray-400">&amp;</span>
{/* Instagram logo */}
<img
src="/svg/instagram.svg"
src={assets.svg.instagram}
alt="Instagram Logo"
className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-gray-400 relative top-[2px]"
aria-hidden="true"
Expand Down
13 changes: 7 additions & 6 deletions src/components/benefits-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import React from "react";
import Image from "next/image";
import assets from "@/data/assets.json";

export function BenefitsSection() {
return (
Expand Down Expand Up @@ -76,7 +77,7 @@ export function BenefitsSection() {
<div className="flex flex-col p-3.5 bg-white border-2 border-gray-200 shadow-xl shadow-gray-200/40 h-auto min-h-[500px] md:min-h-[513px] rounded-[42px]">
<div className="flex-shrink-0 w-full overflow-hidden rounded-[32px]">
<Image
src="/images/benefits/1.webp"
src={assets.images.benefits["1"]}
alt="Artwork Ready Fast"
className="object-contain w-full h-full rounded-[32px]"
width={350}
Expand All @@ -100,7 +101,7 @@ export function BenefitsSection() {
<div className="flex flex-col p-3.5 bg-white border-2 border-gray-200 shadow-xl shadow-gray-200/40 h-auto min-h-[500px] md:min-h-[513px] rounded-[42px]">
<div className="flex-shrink-0 w-full overflow-hidden rounded-[32px]">
<Image
src="/images/benefits/2.webp"
src={assets.images.benefits["2"]}
alt="Unlimited Free Revisions"
className="object-contain w-full h-full rounded-[32px]"
width={350}
Expand All @@ -122,7 +123,7 @@ export function BenefitsSection() {
<div className="flex flex-col p-3.5 bg-white border-2 border-gray-200 shadow-xl lg:shadow-gray-300/50 shadow-gray-200/40 h-auto min-h-[500px] md:min-h-[513px] rounded-[42px] lg:rotate-[6deg] lg:relative lg:z-10 lg:top-[20px] transform transition-transform duration-300 hover:rotate-4 hover:z-20 ">
<div className="flex-shrink-0 w-full overflow-hidden rounded-[32px]">
<Image
src="/images/benefits/3.webp"
src={assets.images.benefits["3"]}
alt="100% Satisfaction Guarantee"
className="object-contain w-full h-full rounded-[32px]"
width={350}
Expand All @@ -144,7 +145,7 @@ export function BenefitsSection() {
<div className="flex flex-col p-3.5 bg-white border-2 border-gray-200 shadow-xl lg:shadow-gray-300/50 shadow-gray-200/40 h-auto min-h-[500px] md:min-h-[513px] rounded-[42px] lg:rotate-[-6deg] lg:relative lg:z-10 lg:top-[-20px] transform transition-transform duration-300 hover:rotate-[-4deg] hover:z-20">
<div className="flex-shrink-0 w-full overflow-hidden rounded-[32px]">
<Image
src="/images/benefits/4.webp"
src={assets.images.benefits["4"]}
alt="Worldwide Delivery"
className="object-contain w-full h-full rounded-[32px]"
width={350}
Expand All @@ -166,7 +167,7 @@ export function BenefitsSection() {
<div className="flex flex-col p-3.5 bg-white border-2 border-gray-200 shadow-xl shadow-gray-200/40 h-auto min-h-[500px] md:min-h-[513px] rounded-[42px]">
<div className="flex-shrink-0 w-full overflow-hidden rounded-[32px]">
<Image
src="/images/benefits/5.webp"
src={assets.images.benefits["5"]}
alt="Human Support Team"
className="object-contain w-full h-full rounded-[32px]"
width={350}
Expand All @@ -188,7 +189,7 @@ export function BenefitsSection() {
<div className="flex flex-col p-3.5 bg-white border-2 border-gray-200 shadow-xl shadow-gray-200/40 h-auto min-h-[500px] md:min-h-[513px] rounded-[42px]">
<div className="flex-shrink-0 w-full overflow-hidden rounded-[32px]">
<Image
src="/images/benefits/6.webp"
src={assets.images.benefits["6"]}
alt="Quality First Approach"
className="object-contain w-full h-full rounded-[32px]"
width={350}
Expand Down
24 changes: 12 additions & 12 deletions src/components/comparison-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<path
d="M12.7674 17.6381C12.492 18.3342 11.508 18.3342 11.2325 17.6381L10.0322 14.5929C9.94855 14.3814 9.78128 14.2116 9.56728 14.128L6.52209 12.9276C5.82597 12.6522 5.82597 11.6682 6.52209 11.3928L9.56728 10.1924C9.77882 10.1087 9.94855 9.94144 10.0322 9.72744L11.2325 6.68225C11.508 5.98613 12.492 5.98613 12.7674 6.68225L13.9678 9.72744C14.0514 9.93898 14.2187 10.1087 14.4327 10.1924L17.4779 11.3928C18.174 11.6682 18.174 12.6522 17.4779 12.9276L14.4327 14.128C14.2212 14.2116 14.0514 14.3789 13.9678 14.5929L12.7674 17.6381Z"
Expand Down Expand Up @@ -147,9 +147,9 @@ function DataRowItem({
const textStyle = clsx(
"text-lg leading-[27px] tracking-[-0.36px]",
isHighlighted && !isHeader && "text-white",
!isHighlighted && !isHeader && !isCategory && "text-[#828088]",
isCategory && !isHeader && "text-[#140F23] font-medium",
isHeader && !isHighlighted && "text-[#140F23] text-xl md:text-2xl font-semibold tracking-[-0.96px]",
!isHighlighted && !isHeader && !isCategory && "text-text-muted",
isCategory && !isHeader && "text-text-primary font-medium",
isHeader && !isHighlighted && "text-text-primary text-xl md:text-2xl font-semibold tracking-[-0.96px]",
isHeader && isHighlighted && "text-white"
);

Expand Down Expand Up @@ -187,8 +187,8 @@ function ComparisonChip({ label, id, isActive, onClick }: ComparisonChipProps) {
className={clsx(
"py-3 px-5 md:px-6 rounded-xl text-base md:text-lg font-medium transition-colors duration-200 ease-in-out whitespace-nowrap",
isActive
? "bg-[#5F1CFC] text-white shadow-md"
: "bg-white text-gray-500 border border-gray-200 hover:bg-gray-50 hover:text-[#5F1CFC]"
? "bg-accent text-white shadow-md"
: "bg-white text-gray-500 border border-gray-200 hover:bg-gray-50 hover:text-accent"
)}
>
{displayLabel}
Expand All @@ -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 (
<div className="flex flex-col items-center w-full py-20 md:py-28 relative overflow-hidden px-4 sm:px-6 ">
Expand All @@ -227,11 +227,11 @@ export function ComparisonSection() {
<div className="flex flex-col items-center max-w-[650px] text-center mb-12 md:mb-16">
{/* ... (header code remains the same) ... */}
<div className="flex flex-col items-center mb-4">
<div className="text-[#5F1CFC] font-sans text-sm md:text-base leading-4 tracking-[-0.32px] py-[7.5px] px-[17px] rounded-[42px] border border-[#E5E5EA] ">
<div className="text-accent font-sans text-sm md:text-base leading-4 tracking-[-0.32px] py-[7.5px] px-[17px] rounded-[42px] border border-border-primary ">
Comparison
</div>
</div>
<div className="text-[#140F23] font-sans text-[40px] leading-[44px] sm:text-[50px] sm:leading-[55px] lg:text-[66px] font-semibold lg:leading-[72.6px] tracking-tight lg:tracking-[-2.64px]">
<div className="text-text-primary font-sans text-size-40 leading-[44px] sm:text-size-50 sm:leading-[55px] lg:text-size-66 font-semibold lg:leading-[72.6px] tracking-tight lg:tracking-[-2.64px]">
<div className="mb-3 md:mb-5">Why choose</div>
<div className="flex items-center justify-center gap-2 md:gap-[15px]">
<span>Memorable.ai</span>
Expand All @@ -254,7 +254,7 @@ export function ComparisonSection() {
<div className="hidden lg:flex flex-row justify-center gap-4 md:gap-6 w-full items-stretch">
{/* Desktop: Left Column - Categories */}
<div className={columnStandardClass}>
<div className="min-h-[70px] border-b border-[#E5E5EA]"></div>
<div className="min-h-[70px] border-b border-border-primary"></div>
<div className="flex flex-col">
{categories.map((cat) => (
<DataRowItem key={cat} isCategory>
Expand All @@ -266,7 +266,7 @@ export function ComparisonSection() {

{/* Desktop: Memorable.ai Column - Highlighted */}
<div className={`${columnBaseClass} bg-[#777CFD] p-[10px] rounded-[42px]`}>
<div className="bg-[#5F1CFC] rounded-[32px] flex flex-col flex-1 overflow-hidden">
<div className="bg-accent rounded-[32px] flex flex-col flex-1 overflow-hidden">
<DataRowItem isHeader isHighlighted>
{desktopColumnTitles.magier}
</DataRowItem>
Expand Down Expand Up @@ -333,7 +333,7 @@ export function ComparisonSection() {
>
<div className={clsx(
"flex flex-col flex-1",
isMagierActiveMobile ? "bg-[#5F1CFC] rounded-[32px]" : "" // Magier inner
isMagierActiveMobile ? "bg-accent rounded-[32px]" : "" // Magier inner
)}>
{/* Data Items */}
<div className={clsx(
Expand Down
Loading