From e7d167f879256f8b8bf8481b059f362a5a9337b8 Mon Sep 17 00:00:00 2001 From: Kevin DEJOUET <77232968+Azilone@users.noreply.github.com> Date: Sat, 7 Jun 2025 09:14:58 +0200 Subject: [PATCH] chore: standardize landing page styles --- src/components/cta-section.tsx | 16 ++++++-- src/components/hero-with-animations.tsx | 21 +++++------ src/components/how-it-works-section.tsx | 50 +++++++++++++++---------- src/styles.ts | 10 +++++ 4 files changed, 62 insertions(+), 35 deletions(-) create mode 100644 src/styles.ts diff --git a/src/components/cta-section.tsx b/src/components/cta-section.tsx index a81d583..56e41fd 100644 --- a/src/components/cta-section.tsx +++ b/src/components/cta-section.tsx @@ -1,12 +1,17 @@ "use client"; import Link from "next/link"; -import Image from "next/image"; // Import next/image +import Image from "next/image"; +import { styles, color } from "@/styles"; +import { cn } from "@/lib/utils"; export function CTASection() { return ( // Main container: Using Magier's style - large padding, specific bg, rounded -
+
{/* Decorative SVG - Top Right */} {/* Heading */} -

+

This is⚡️where FastFrame comes in
We are your remote design team 🚀
@@ -50,7 +55,10 @@ export function CTASection() {
Book a demo diff --git a/src/components/hero-with-animations.tsx b/src/components/hero-with-animations.tsx index 9d4ae0d..9757846 100644 --- a/src/components/hero-with-animations.tsx +++ b/src/components/hero-with-animations.tsx @@ -7,6 +7,8 @@ import { AuroraText } from "@/components/magicui/aurora-text"; import CTAButton from "./ui/CTAButton"; import { Spotlight } from "./ui/spotlight"; import HeroStatsBar from "./hero-stats-bar"; +import { styles, color } from "@/styles"; +import { cn } from "@/lib/utils"; export function HeroWithAnimations() { return ( @@ -34,13 +36,8 @@ export function HeroWithAnimations() { {/* Main Content */}
- -

in under 3 minutes. @@ -83,10 +80,10 @@ 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 - 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" + className={cn( + styles.subtitle, + "mt-[1.2vh] max-w-sm mx-auto md:mt-[1.5vh] md:max-w-md lg:mt-[1.8vh] lg:max-w-lg xl:max-w-xl" + )} > Upload a photo, pick from the largest library of pet-only styles, and see an instant HD preview on posters, mugs, phone cases and more. diff --git a/src/components/how-it-works-section.tsx b/src/components/how-it-works-section.tsx index d0d5c74..f0b7a6e 100644 --- a/src/components/how-it-works-section.tsx +++ b/src/components/how-it-works-section.tsx @@ -1,7 +1,9 @@ "use client"; import React from "react"; -import Image from "next/image"; // Import next/image +import Image from "next/image"; +import { styles, color } from "@/styles"; +import { cn } from "@/lib/utils"; export function HowItWorksSection() { return ( @@ -15,7 +17,10 @@ export function HowItWorksSection() { {/* Badge */}
{/* Corrected border class */} - + How it works
@@ -25,7 +30,7 @@ export function HowItWorksSection() { {/* Heading container */}
{/* Responsive heading */} -

+

How to get your custom pet portrait{' '} {/* Inline container for "magic" + icon */} @@ -36,7 +41,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={cn("inline-block h-12 w-12 sm:h-14 sm:w-14 lg:h-16 lg:w-16 rotate-[-12deg]", color.primary)} > f @@ -55,9 +60,7 @@ export function HowItWorksSection() {

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

- -

+

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

Upload a photo of your pet

-

+

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

@@ -94,7 +100,10 @@ export function HowItWorksSection() { {/* Corrected border class */}
{/* Number Chip */} -
2
+
2
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 +129,10 @@ export function HowItWorksSection() { {/* Corrected border class. Added transform-gpu for performance. */}
{/* Number Chip */} -
3
+
3
{/* Placeholder Image Area */}
{/* Replace with component */} @@ -137,7 +149,7 @@ export function HowItWorksSection() {

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 +161,12 @@ export function HowItWorksSection() { {/* Feature 1 */}
{/* Lightning bolt icon chip */} - + - + Instant result preview
@@ -162,12 +174,12 @@ export function HowItWorksSection() { {/* Feature 2 */}
{/* Diamond icon chip (SVG from public/svg/Icône SVG Diamant.svg) */} - + - + High quality materials
@@ -175,14 +187,14 @@ export function HowItWorksSection() { {/* Feature 3 */}
{/* Globe icon chip */} - + - + Worldwide delivery
diff --git a/src/styles.ts b/src/styles.ts new file mode 100644 index 0000000..600af82 --- /dev/null +++ b/src/styles.ts @@ -0,0 +1,10 @@ +export const styles = { + h1: "text-[3vh] sm:text-[3.2vh] md:text-[3.5vh] lg:text-[5vh] xl:text-[5.5vh] font-bold tracking-tight leading-tight md:leading-none lg:leading-[1.1] text-[#140F23]", + h2: "text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight tracking-tight text-[#140F23]", + subtitle: "text-base sm:text-lg leading-relaxed text-[#828088]", +}; + +export const color = { + primary: "text-[#5F1CFC]", + primaryBg: "bg-[#5F1CFC]", +};