From 93f93cd5873cc2deea178168ddfa9dd6bec3a539 Mon Sep 17 00:00:00 2001
From: laveshparyani <laveshparyani01@gmail.com>
Date: Fri, 13 Mar 2026 14:20:43 +0530
Subject: [PATCH] feat(affiliates): redesign individual partner profile pages

This commit completely overhauls the design of the /partners/[slug] affiliate profile pages. It introduces modern glassmorphism UI elements to the PartnerFeatures section, adds SVG mask styling to the PartnerBio section, implements geometric background and dual CTA buttons to the PartnerHero, and replaces the simple PartnerCTA with a high-impact, full-width gradient container CTA overlay. These changes ensure the profile pages align with the premium aesthetic of the main affiliate portal.
---
 apps/web/components/sections/partner-bio.tsx  | 89 +++++++++++++------
 apps/web/components/sections/partner-cta.tsx  | 73 +++++++--------
 .../components/sections/partner-features.tsx  | 37 ++++----
 apps/web/components/sections/partner-hero.tsx | 32 ++++---
 4 files changed, 133 insertions(+), 98 deletions(-)

diff --git a/apps/web/components/sections/partner-bio.tsx b/apps/web/components/sections/partner-bio.tsx
index 8b092f8..fcca125 100644
--- a/apps/web/components/sections/partner-bio.tsx
+++ b/apps/web/components/sections/partner-bio.tsx
@@ -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>
 
@@ -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 */}
@@ -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>
diff --git a/apps/web/components/sections/partner-cta.tsx b/apps/web/components/sections/partner-cta.tsx
index 1912fcf..6d779db 100644
--- a/apps/web/components/sections/partner-cta.tsx
+++ b/apps/web/components/sections/partner-cta.tsx
@@ -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>
diff --git a/apps/web/components/sections/partner-features.tsx b/apps/web/components/sections/partner-features.tsx
index cfc3ab6..9697aa7 100644
--- a/apps/web/components/sections/partner-features.tsx
+++ b/apps/web/components/sections/partner-features.tsx
@@ -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() {
@@ -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>
           );
         })}
diff --git a/apps/web/components/sections/partner-hero.tsx b/apps/web/components/sections/partner-hero.tsx
index 4e419ea..8645cba 100644
--- a/apps/web/components/sections/partner-hero.tsx
+++ b/apps/web/components/sections/partner-hero.tsx
@@ -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
@@ -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>
 
@@ -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>