From 7e27e084063ca399980a6e0ed2a61aeed45cc853 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 2 Jul 2026 16:08:05 +0000
Subject: [PATCH] Bob AI: Update Packages section with pure black background,
 radial g

---
 src/pages/HomePage/sections/Packages.tsx | 56 ++++++++++++------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/pages/HomePage/sections/Packages.tsx b/src/pages/HomePage/sections/Packages.tsx
index 2d2dc86..034a105 100644
--- a/src/pages/HomePage/sections/Packages.tsx
+++ b/src/pages/HomePage/sections/Packages.tsx
@@ -5,6 +5,7 @@ import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import ScrollReveal from "@/components/ui/ScrollReveal";
+import { motion } from "motion/react";
 
 const plans = [
   {
@@ -52,38 +53,37 @@ type PricingPlan = {
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 const PackagesInline = () => (
-  <section aria-label="Pricing section" className="py-20">
-    <div className="flex flex-col gap-8 md:gap-10">
-      <div className="flex flex-col items-center gap-2 w-content-width mx-auto">
-        <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-          <p>{"PACKAGES"}</p>
+  <section aria-label="Pricing section" className="relative py-24 bg-[#000000] overflow-hidden">
+    {/* Radial glow behind Dominator card (approx 65% 50%) */}
+    <div 
+      className="absolute inset-0 pointer-events-none" 
+      style={{ background: 'radial-gradient(circle at 65% 50%, rgba(125,28,46,0.18) 0%, transparent 60%)' }} 
+    />
+    
+    {/* Decorative X watermark */}
+    <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-4 overflow-hidden">
+      <span className="font-tight font-black text-[700px] leading-none text-white select-none">X</span>
+    </div>
+
+    <div className="relative z-10 flex flex-col gap-16 w-content-width mx-auto">
+      <div className="flex flex-col items-center gap-4 text-center">
+        <div className="text-[#7D1C2E] font-tight font-bold tracking-widest text-lg uppercase">
+          — OUR PACKAGES
         </div>
 
-        <TextAnimation
-          text={"CHOOSE YOUR [X] LEVEL"}
-          variant={"fade-blur"}
-          gradientText={true}
-          tag="h2"
-          className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
-        />
-
-        <TextAnimation
-          text={"Transparent pricing for complete solutions."}
-          variant={"fade-blur"}
-          gradientText={false}
-          tag="p"
-          className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
-        />
-
-        {(undefined || undefined) && (
-          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-            {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
-            {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
-          </div>
-        )}
+        <motion.h2
+          initial={{ y: 100, opacity: 0, scale: 0.8 }}
+          whileInView={{ y: 0, opacity: 1, scale: 1 }}
+          viewport={{ once: true, margin: "-100px" }}
+          transition={{ type: "spring", stiffness: 300, damping: 12, mass: 2 }}
+          className="font-tight font-black text-[80px] leading-[0.9] text-white uppercase text-center"
+        >
+          CHOOSE YOUR<br/>
+          [<span className="text-[#7D1C2E]">X</span>] LEVEL
+        </motion.h2>
       </div>
 
-      <div className="flex flex-col gap-5 w-content-width mx-auto">
+      <div className="flex flex-col gap-5">
         {plans.map((plan) => (
           <ScrollReveal
             variant="slide-up"