Skip to content

Standardize landing page styles #5

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 1 commit into
base: main
Choose a base branch
from
Open

Standardize landing page styles #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 12 additions & 4 deletions src/components/cta-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<div className="relative mx-auto my-8 w-full rounded-[32px] bg-[#5F1CFC] px-5 py-12 sm:p-12 md:p-16 flex flex-col items-center overflow-hidden">
<div className={cn(
"relative mx-auto my-8 w-full rounded-[32px] px-5 py-12 sm:p-12 md:p-16 flex flex-col items-center overflow-hidden",
color.primaryBg
)}>
{/* Decorative SVG - Top Right */}
<Image
src="/svg/cta1.svg"
Expand All @@ -31,7 +36,7 @@ export function CTASection() {
{/* Content Wrapper */}
<div className="flex flex-col items-center text-center gap-6 z-10 w-full">
{/* Heading */}
<h2 className="text-white font-bold text-3xl sm:text-4xl lg:text-5xl leading-tight tracking-tight max-w-4xl">
<h2 className={cn(styles.h2, "text-white max-w-4xl")}>
This is⚡️where FastFrame comes in
<span className="block text-xl sm:text-2xl lg:text-3xl mt-3 font-medium leading-snug tracking-tight">
<br />We are your remote design team 🚀<br />
Expand All @@ -50,7 +55,10 @@ export function CTASection() {
<div className="mt-6">
<Link
href="/demo"
className="inline-block rounded-full bg-white px-6 py-3 text-base font-bold text-[#5F1CFC] tracking-tight transition-transform duration-200 hover:scale-105 sm:px-8 sm:py-4"
className={cn(
"inline-block rounded-full bg-white px-6 py-3 text-base font-bold tracking-tight transition-transform duration-200 hover:scale-105 sm:px-8 sm:py-4",
color.primary
)}
>
Book a demo
</Link>
Expand Down
21 changes: 9 additions & 12 deletions src/components/hero-with-animations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -34,13 +36,8 @@ export function HeroWithAnimations() {

{/* Main Content */}
<div className="text-center">

<h1 className="text-[3vh] font-bold tracking-tight text-[#140F23] leading-tight
sm:text-[3.2vh] sm:leading-tight
md:text-[3.5vh] md:leading-none md:tracking-[-0.5px]
lg:text-[5vh] lg:leading-[1.1] lg:tracking-[-0.75px]
xl:text-[5.5vh] xl:leading-[1.1] xl:tracking-[-1px]
max-w-[80vw] mx-auto"

<h1 className={cn(styles.h1, "max-w-[80vw] mx-auto")}
>
<motion.div
initial={{ opacity: 0, y: 20 }}
Expand Down Expand Up @@ -72,7 +69,7 @@ export function HeroWithAnimations() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 1 }}
className="block text-[1.7vh] text-[#5F1CFC] font-medium mt-1"
className={cn("block text-[1.7vh] font-medium mt-1", color.primary)}
>
in under 3 minutes.
</motion.div>
Expand All @@ -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.

Expand Down
50 changes: 31 additions & 19 deletions src/components/how-it-works-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -15,7 +17,10 @@ export function HowItWorksSection() {
{/* Badge */}
<div className="flex flex-col items-start">
{/* Corrected border class */}
<span className="rounded-[42px] border-2 border-[#E5E5EA] py-[7.5px] px-[17px] text-base font-medium leading-4 tracking-[-0.32px] text-[#5F1CFC]">
<span className={cn(
"rounded-[42px] border-2 border-[#E5E5EA] py-[7.5px] px-[17px] text-base font-medium leading-4 tracking-[-0.32px]",
color.primary
)}>
How it works
</span>
</div>
Expand All @@ -25,7 +30,7 @@ export function HowItWorksSection() {
{/* Heading container */}
<div className="w-full lg:w-auto">
{/* Responsive heading */}
<h2 className="text-4xl font-bold leading-tight tracking-tighter text-[#140F23] sm:text-3xl lg:text-[50px] xl:text-[56px]">
<h2 className={cn(styles.h2, "lg:text-[50px] xl:text-[56px]")}>
How to get your custom pet portrait{' '}
{/* Inline container for "magic" + icon */}
<span className="inline-flex items-center gap-2 align-bottom">
Expand All @@ -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)}
>
<path d="M18.137 21.824c-5.645 1.549-9.088 7.132-8.092 10.944c.998 3.813 4.766-.53 10.411-2.08c5.643-1.551 11.024.281 10.028-3.532c-.997-3.813-6.702-6.883-12.347-5.332" />f
<path d="M13.768 20.047c1.701-.632 1.918-4.417 1.012-6.969c-.906-2.55-3.02-4.103-4.721-3.469c-1.7.635-2.344 3.217-1.438 5.767c.906 2.551 3.445 5.306 5.147 4.671" />
Expand All @@ -55,9 +60,7 @@ export function HowItWorksSection() {
</div>

{/* Paragraph with responsive max-width */}
<p className="w-full max-w-md text-md leading-relaxed tracking-[-0.36px] text-[#828088] lg:pt-2">

</p>
<p className={cn(styles.subtitle, "w-full max-w-md text-md tracking-[-0.36px] lg:pt-2")}></p>
</div>
</div>

Expand All @@ -67,7 +70,10 @@ export function HowItWorksSection() {
{/* Corrected border class */}
<div className="relative flex flex-col items-start rounded-[42px] border-2 border-gray-200] bg-white p-3 ">
{/* Number Chip */}
<div className="absolute -top-4 -left-4 flex items-center justify-center w-9 h-9 rounded-full bg-[#5F1CFC] text-white font-bold text-lg shadow-md border-4 border-white">1</div>
<div className={cn(
"absolute -top-4 -left-4 flex items-center justify-center w-9 h-9 rounded-full text-white font-bold text-lg shadow-md border-4 border-white",
color.primaryBg
)}>1</div>
{/* Placeholder Image Area */}
<div className="flex h-[300px] w-full items-center justify-center rounded-[32px] bg-[#F7E6D4] bg-[radial-gradient(circle,_#ede9fe_1px,_transparent_1px)] [background-size:20px_20px]">
{/* Replace with <Image /> component */}
Expand All @@ -84,7 +90,7 @@ export function HowItWorksSection() {
<h3 className="text-xl font-medium leading-tight tracking-tight text-[#140F23] md:text-2xl">
Upload a photo of your pet
</h3>
<p className="text-base leading-relaxed text-[#828088] sm:text-lg">
<p className={cn(styles.subtitle, "text-base sm:text-lg")}>
Pick a photo you like—any clear picture works. Just upload it to get started.
</p>
</div>
Expand All @@ -94,7 +100,10 @@ export function HowItWorksSection() {
{/* Corrected border class */}
<div className="relative flex flex-col items-start rounded-[42px] border-2 border-gray-200 bg-white p-3 ">
{/* Number Chip */}
<div className="absolute -top-4 -left-4 flex items-center justify-center w-9 h-9 rounded-full bg-[#5F1CFC] text-white font-bold text-lg shadow-md border-4 border-white">2</div>
<div className={cn(
"absolute -top-4 -left-4 flex items-center justify-center w-9 h-9 rounded-full text-white font-bold text-lg shadow-md border-4 border-white",
color.primaryBg
)}>2</div>
<div className="flex h-[300px] w-full items-center justify-center rounded-[32px] bg-[#F7E6D4] bg-[radial-gradient(circle,_#ede9fe_1px,_transparent_1px)] [background-size:20px_20px]">

<Image
Expand All @@ -110,7 +119,7 @@ export function HowItWorksSection() {
<h3 className="text-xl font-medium leading-tight tracking-tight text-[#140F23] md:text-2xl">
Choose your favorite style
</h3>
<p className="text-base leading-relaxed text-[#828088] sm:text-lg">
<p className={cn(styles.subtitle, "text-base sm:text-lg")}>
Pick between a handcrafted design or get an instant, high-quality AI illustration. See previews on different products before you decide.
</p>
</div>
Expand All @@ -120,7 +129,10 @@ export function HowItWorksSection() {
{/* Corrected border class. Added transform-gpu for performance. */}
<div className="relative flex transform-gpu flex-col items-start rounded-[42px] border-2 border-gray-200 bg-white p-3 transition-transform duration-300 md:rotate-[4deg] md:hover:rotate-[2deg]">
{/* Number Chip */}
<div className="absolute -top-4 -left-4 flex items-center justify-center w-9 h-9 rounded-full bg-[#5F1CFC] text-white font-bold text-lg shadow-md border-4 border-white">3</div>
<div className={cn(
"absolute -top-4 -left-4 flex items-center justify-center w-9 h-9 rounded-full text-white font-bold text-lg shadow-md border-4 border-white",
color.primaryBg
)}>3</div>
{/* Placeholder Image Area */}
<div className="flex h-[300px] w-full items-center justify-center rounded-[32px] bg-[#E9C69E]">
{/* Replace with <Image /> component */}
Expand All @@ -137,7 +149,7 @@ export function HowItWorksSection() {
<h3 className="text-xl font-medium leading-tight tracking-tight text-[#140F23] md:text-2xl">
Get your artwork
</h3>
<p className="text-base leading-relaxed text-[#828088] sm:text-lg">
<p className={cn(styles.subtitle, "text-base sm:text-lg")}>
Place your order and receive your pet's portrait as a digital file or printed product. It's that simple.
</p>
</div>
Expand All @@ -149,40 +161,40 @@ export function HowItWorksSection() {
{/* Feature 1 */}
<div className="flex items-center gap-2">
{/* Lightning bolt icon chip */}
<span className="flex items-center justify-center w-8 h-8 rounded-full bg-[#5F1CFC] text-white">
<span className={cn("flex items-center justify-center w-8 h-8 rounded-full text-white", color.primaryBg)}>
<svg width="20" height="20" fill="none" viewBox="0 0 20 20">
<path d="M11 2L4 11h5l-1 7 7-9h-5l1-7z" fill="white"/>
</svg>
</span>
<span className="text-base font-medium text-[#5F1CFC]">
<span className={cn("text-base font-medium", color.primary)}>
Instant result preview
</span>
</div>

{/* Feature 2 */}
<div className="flex items-center gap-2">
{/* Diamond icon chip (SVG from public/svg/Icône SVG Diamant.svg) */}
<span className="flex items-center justify-center w-8 h-8 rounded-full bg-[#5F1CFC] text-white">
<span className={cn("flex items-center justify-center w-8 h-8 rounded-full text-white", color.primaryBg)}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="w-4 h-4">
<path fill="#fff" d="M32.711 64 64 30H44.71L32.711 64zM64 28l-8.762-11.969L46.031 28H64zM53.508 15H32.437l11.494 12.45L53.508 15zM32 30H21.41L32 59.99 42.59 30H32zM0 30l31.289 34L19.29 30H0zM32 28h9.72L32 17.47 22.28 28H32zM8.762 16.031 0 28h17.969L8.762 16.031zM31.563 15H10.492l9.577 12.45L31.563 15zM32 13a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v11a1 1 0 0 1-1 1zM40 13a1 1 0 0 1-.759-1.65l6-7a1 1 0 0 1 1.518 1.3l-6 7A.993.993 0 0 1 40 13zM24 13a.993.993 0 0 1-.759-.35l-6-7a1 1 0 0 1 1.518-1.3l6 7A1 1 0 0 1 24 13z"/>
</svg>
</span>
<span className="text-base font-medium text-[#5F1CFC]">
<span className={cn("text-base font-medium", color.primary)}>
High quality materials
</span>
</div>

{/* Feature 3 */}
<div className="flex items-center gap-2">
{/* Globe icon chip */}
<span className="flex items-center justify-center w-8 h-8 rounded-full bg-[#5F1CFC] text-white">
<span className={cn("flex items-center justify-center w-8 h-8 rounded-full text-white", color.primaryBg)}>
<svg width="20" height="20" fill="none" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="7" stroke="white" strokeWidth="2" fill="none"/>
<ellipse cx="10" cy="10" rx="7" ry="3" stroke="white" strokeWidth="2" fill="none"/>
<path d="M10 3v14" stroke="white" strokeWidth="2"/>
</svg>
</span>
<span className="text-base font-medium text-[#5F1CFC]">
<span className={cn("text-base font-medium", color.primary)}>
Worldwide delivery
</span>
</div>
Expand Down
10 changes: 10 additions & 0 deletions src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]",
};