Skip to content

feat(affiliates): redesign individual partner profile pages #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

Merged
stackified merged 1 commit into from
Mar 13, 2026
Merged

feat(affiliates): redesign individual partner profile pages #3

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
89 changes: 63 additions & 26 deletions apps/web/components/sections/partner-bio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,24 @@ export function PartnerBio({ name, bio, imageUrl, quote }: PartnerBioProps) {
return (
<section className="py-24 relative overflow-hidden">
<div className="container px-4 md:px-6">
<div className="flex flex-col items-center mb-16 text-center">
<div className="flex flex-col items-center mb-20 text-center relative z-10 w-full">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
className="inline-flex items-center justify-center p-3 rounded-2xl bg-primary/10 border border-primary/20 mb-6"
>
<span className="text-primary font-bold text-sm uppercase tracking-wider">Meet the Trader</span>
</motion.div>
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="text-4xl md:text-6xl font-bold font-heading mb-4"
transition={{ delay: 0.1 }}
className="text-4xl md:text-5xl lg:text-7xl font-bold font-heading mb-4 leading-tight"
>
A <span className="text-primary">proud</span> partner of <br /> {name}.
A proud partner of <br />
<span className="bg-gradient-to-b from-red-500 via-red-600 to-red-800 bg-clip-text text-transparent">{name}.</span>
</motion.h2>
</div>

Expand All @@ -36,21 +46,39 @@ export function PartnerBio({ name, bio, imageUrl, quote }: PartnerBioProps) {
transition={{ duration: 0.8 }}
className="flex flex-col items-center lg:items-start"
>
<div className="relative w-full aspect-square max-w-md rounded-2xl overflow-hidden shadow-2xl group">
<Image
src={imageUrl}
alt={name}
fill
className="object-cover transition-transform duration-700 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="relative w-full aspect-[4/5] max-w-lg mx-auto lg:mx-0">
{/* Decorative background glow */}
<div className="absolute -inset-4 bg-primary/20 rounded-full blur-3xl opacity-50 -z-10" />

<svg width="0" height="0" className="absolute">
<defs>
<clipPath id="squircle-clip" clipPathUnits="objectBoundingBox">
<path d="M 0,0.5 C 0,0 0,0 0.5,0 C 1,0 1,0 1,0.5 C 1,1 1,1 0.5,1 C 0,1 0,1 0,0.5 Z" />
</clipPath>
</defs>
</svg>

<div
className="relative w-full h-full overflow-hidden shadow-2xl group border-l-[6px] border-b-[6px] border-primary/20"
style={{ clipPath: "url(#squircle-clip)" }}
>
<Image
src={imageUrl}
alt={name}
fill
className="object-cover transition-transform duration-700 group-hover:scale-105"
priority
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80" />

{quote && (
<div className="absolute bottom-0 left-0 right-0 p-8 transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
<p className="text-xl md:text-2xl italic text-white font-medium leading-snug drop-shadow-md">&quot;{quote}&quot;</p>
<p className="mt-4 font-bold text-primary text-sm uppercase tracking-widest">— {name}</p>
</div>
)}
</div>
</div>
{quote && (
<div className="mt-8 text-center lg:text-left">
<p className="text-xl italic text-muted-foreground">&quot;{quote}&quot;</p>
<p className="mt-2 font-bold text-primary">— {name}</p>
</div>
)}
</motion.div>

{/* Text Side */}
Expand All @@ -59,21 +87,30 @@ export function PartnerBio({ name, bio, imageUrl, quote }: PartnerBioProps) {
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="flex flex-col justify-center"
className="flex flex-col justify-center h-full"
>
<h3 className="text-2xl md:text-3xl font-bold mb-6">About {name}.</h3>
<div className="space-y-4 text-muted-foreground text-lg leading-relaxed">
{bio.split('\n').map((paragraph, i) => (
<p key={i}>{paragraph}</p>
))}
<div className="inline-block px-4 py-2 rounded-lg bg-muted text-muted-foreground font-semibold text-sm mb-6 w-fit border border-border">
About The Partner
</div>

<h3 className="text-3xl md:text-4xl font-bold mb-8 font-heading">{name}</h3>

<div className="space-y-6 text-muted-foreground text-lg leading-relaxed relative">
<div className="absolute left-0 top-2 bottom-2 w-1 bg-gradient-to-b from-primary to-transparent rounded-full opacity-50 hidden md:block" />
<div className="md:pl-6 space-y-6 text-justify">
{bio.split('\n').map((paragraph, i) => (
<p key={i}>{paragraph}</p>
))}
</div>
</div>
<div className="mt-10">

<div className="mt-12">
<Button
size="lg"
className="rounded-full bg-primary hover:bg-red-700 text-white px-8"
className="rounded-xl bg-primary hover:bg-primary/90 text-white px-10 h-14 font-bold shadow-lg shadow-primary/20 transition-all hover:-translate-y-1"
asChild
>
<Link href="/register">Start Trading</Link>
<Link href="/register">Start Trading Under {name.split(' ')[0]}</Link>
</Button>
</div>
</motion.div>
Expand Down
73 changes: 33 additions & 40 deletions apps/web/components/sections/partner-cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,49 +14,42 @@ export function PartnerCTA({ partnerName, message }: PartnerCTAProps) {
return (
<section className="py-24 relative overflow-hidden">
{/* Background Decorative Elements */}
<div className="absolute inset-0 z-0">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[120px]" />
</div>

<div className="container px-4 md:px-6 relative z-10">
<div className="max-w-4xl mx-auto text-center">
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="text-4xl md:text-6xl font-bold font-heading mb-8"
>
A message from <span className="text-primary">{partnerName.split(' ')[0]}</span>.
</motion.h2>
<div className="absolute inset-0 bg-transparent z-0" />

<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.2 }}
className="mb-12"
>
<p className="text-xl md:text-2xl text-muted-foreground leading-relaxed italic">
{message || `Trade with the broker I trust. Join me at RestroFX and experience trading the way it was meant to be. Raw spreads, lightning-fast execution, and a platform that puts you first.`}
</p>
</motion.div>
<div className="container mx-auto max-w-7xl relative z-10">
<div className="relative rounded-[2rem] sm:rounded-[3rem] overflow-hidden bg-gradient-to-br from-primary via-red-600 to-red-700 p-8 sm:p-12 lg:p-24 shadow-2xl group text-center mx-auto max-w-[90%] sm:max-w-full">
{/* Animated Background Pattern */}
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMDUiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==')] opacity-30 group-hover:opacity-40 transition-opacity duration-500"></div>

<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
>
<Button
size="lg"
className="rounded-full px-12 h-16 text-xl font-bold bg-primary text-white shadow-xl hover:bg-red-700 hover:scale-105 transition-all duration-300 group"
asChild
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="relative z-10 space-y-8"
>
<Link href="/register">
JOIN RESTROFX <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-2 transition-transform" />
</Link>
</Button>
</motion.div>
<h2 className="text-4xl sm:text-6xl md:text-7xl font-bold font-heading text-white leading-tight">
A message from <br />
<span className="text-white/80 italic font-light">{partnerName.split(' ')[0]}.</span>
</h2>
<p className="text-lg sm:text-2xl text-white/90 font-light max-w-2xl mx-auto leading-relaxed italic">
&quot;{message}&quot;
</p>
<div className="pt-4 flex flex-col sm:flex-row gap-4 justify-center items-center">
<Button
size="lg"
variant="secondary"
className="w-full sm:w-auto rounded-full px-12 h-16 text-lg font-bold bg-white text-primary hover:bg-neutral-100 shadow-[0_20px_50px_rgba(0,0,0,0.3)] hover:-translate-y-2 hover:shadow-[0_30px_60px_rgba(220,0,0,0.4)] transition-all duration-500 group relative overflow-hidden active:scale-95"
asChild
>
<Link href="/register">
<span className="relative z-10 flex items-center justify-center">
JOIN RESTROFX <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-2 transition-transform duration-300" />
</span>
</Link>
</Button>
</div>
</motion.div>
</div>
</div>
</section>
Expand Down
37 changes: 17 additions & 20 deletions apps/web/components/sections/partner-features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { motion } from "framer-motion";
import { Card, CardContent, CardHeader, CardTitle } from "@crimsonfx/ui";

import { Zap, Percent, Activity } from "lucide-react";

export function PartnerFeatures() {
Expand Down Expand Up @@ -52,27 +52,24 @@ export function PartnerFeatures() {
key={index}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
viewport={{ once: true, margin: "-50px" }}
transition={{ delay: index * 0.2, duration: 0.6 }}
whileHover={{ y: -5 }}
className="h-full"
className="h-full group p-6 sm:p-8 rounded-[2rem] border-2 border-border hover:border-primary/50 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/10 bg-background/50 backdrop-blur-md relative overflow-hidden"
>
<Card className={`h-full relative overflow-hidden transition-all duration-300 border-2 ${feature.borderColor} bg-background/50 backdrop-blur-sm group hover:shadow-xl`}>
<div
className={`absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br ${feature.bgGradient}`}
/>
<CardHeader className="relative z-10 pb-4">
<div className={`p-3 rounded-xl bg-muted/50 border border-border w-fit mb-4 group-hover:scale-110 transition-transform duration-300`}>
<Icon className={`h-6 w-6 ${feature.iconColor}`} />
</div>
<CardTitle className="text-xl font-bold leading-tight">
{feature.title}
</CardTitle>
</CardHeader>
<CardContent className="relative z-10 text-muted-foreground">
<p className="leading-relaxed text-sm">{feature.description}</p>
</CardContent>
</Card>
<div
className={`absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 bg-gradient-to-br ${feature.bgGradient} -z-10`}
/>
<div className="flex flex-col h-full z-10 relative">
<div className={`p-4 rounded-2xl bg-muted/50 border border-border w-fit mb-6 group-hover:scale-110 group-hover:-translate-y-1 transition-all duration-300 shadow-sm`}>
<Icon className={`h-8 w-8 ${feature.iconColor} group-hover:rotate-6 transition-transform`} />
</div>
<h3 className="text-2xl font-bold font-heading mb-4 leading-tight group-hover:text-primary transition-colors duration-300">
{feature.title}
</h3>
<p className="leading-relaxed text-muted-foreground text-base sm:text-lg flex-grow">
{feature.description}
</p>
</div>
</motion.div>
);
})}
Expand Down
32 changes: 20 additions & 12 deletions apps/web/components/sections/partner-hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,14 @@ export function PartnerHero() {
return (
<section className="relative min-h-[70vh] flex items-center justify-center overflow-hidden bg-transparent pt-20 pb-12">
{/* Background Elements */}
<div className="absolute inset-0 z-0">
<div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-background via-background/60 to-transparent z-10" />
<div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-background via-background/20 to-transparent z-10" />

<div className="hero-glow-1 animate-pulse-slow opacity-20" />
<div className="hero-glow-2 animate-pulse-slow opacity-20" style={{ animationDelay: "2s" }} />

{/* Grid Pattern */}
<div className="absolute inset-0 bg-grid-pattern bg-grid-pattern-size opacity-[0.03] z-0" />
<div className="absolute inset-x-0 inset-y-0 overflow-hidden">
<div className="absolute top-0 right-0 w-1/2 h-full bg-primary/5 transform skew-x-12 origin-top-right z-0" />
<div className="absolute bottom-0 left-0 w-1/3 h-2/3 bg-primary/5 transform -skew-x-12 origin-bottom-left z-0" />
</div>

{/* Grid Pattern */}
<div className="absolute inset-0 bg-grid-pattern bg-grid-pattern-size opacity-[0.03] z-0 pointer-events-none" />

<div className="container px-4 md:px-6 relative z-10">
<div className="flex flex-col items-center text-center max-w-4xl mx-auto">
<motion.div
Expand All @@ -36,7 +33,7 @@ export function PartnerHero() {
transition={{ delay: 0.2, duration: 0.8, ease: "easeOut" }}
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs md:text-sm font-bold mb-8 backdrop-blur-md"
>
<div className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
<div className="h-2 w-2 rounded-full bg-primary animate-pulse" />
OFFICIAL PARTNER
</motion.div>

Expand Down Expand Up @@ -67,18 +64,29 @@ export function PartnerHero() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5, duration: 1, ease: [0.22, 1, 0.36, 1] }}
className="flex flex-col sm:flex-row gap-4 justify-center items-center w-full"
>
<Button
size="lg"
className="rounded-full px-12 h-16 text-lg font-bold bg-primary text-white shadow-[0_20px_50px_rgba(187,0,0,0.3)] hover:bg-red-700 hover:-translate-y-2 hover:shadow-[0_30px_60px_rgba(187,0,0,0.4)] transition-all duration-500 group relative overflow-hidden active:scale-95 border-none"
className="w-full sm:w-auto rounded-xl px-12 h-16 text-lg font-bold bg-primary text-white shadow-[0_20px_50px_rgba(187,0,0,0.3)] hover:bg-red-700 hover:scale-105 transition-all duration-300 group relative overflow-hidden border-none"
asChild
>
<Link href="/register">
<span className="relative z-10 flex items-center justify-center">
Start Trading <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-2 transition-transform duration-300" />
Start Trading <ArrowRight className="ml-3 h-5 w-5 group-hover:translate-x-1 transition-transform" />
</span>
</Link>
</Button>
<Button
variant="outline"
size="lg"
className="w-full sm:w-auto rounded-xl px-12 h-16 text-lg font-bold border-2 hover:bg-muted/50 transition-all duration-300 backdrop-blur-sm"
asChild
>
<Link href="#about">
Learn More
</Link>
</Button>
</motion.div>
</motion.div>
</div>
Expand Down
Loading