From bc9fce4071542b7a6df96a969b073c5806ebb13f Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 3 Mar 2026 08:13:44 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 77 ++++++++----------------------------------------
 1 file changed, 13 insertions(+), 64 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4d501a7..35ad43b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -116,70 +116,19 @@ export default function LandingPage() {
       </div>
 
       <div id="pricing" data-section="pricing">
-        <div className="w-full py-20 px-6 md:px-10">
-          <div className="w-content-width mx-auto">
-            <h2 className="text-4xl md:text-5xl font-bold mb-6 text-center">Pricing & Membership Options</h2>
-            <p className="text-lg text-center mb-12 max-w-2xl mx-auto">Flexible plans designed for every athlete and budget. Get started with CheerUp! today.</p>
-            
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-              {/* Beginner Plan */}
-              <div className="bg-card border border-accent rounded-lg p-8 flex flex-col">
-                <h3 className="text-2xl font-bold mb-2">Beginner</h3>
-                <p className="text-foreground opacity-75 mb-6">Perfect for newcomers</p>
-                <div className="text-4xl font-bold mb-8">$149<span className="text-lg opacity-75">/month</span></div>
-                <ul className="space-y-3 mb-8 flex-grow">
-                  <li className="flex items-start"><span className="mr-3">✓</span> Introductory classes 2x/week</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Basic tumbling & stunting</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Community access</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Access to one camp</li>
-                </ul>
-                <button className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg font-semibold hover:opacity-90">Get Started</button>
-              </div>
-
-              {/* Intermediate Plan */}
-              <div className="bg-card border-2 border-primary-cta rounded-lg p-8 flex flex-col transform scale-105 md:scale-100 md:ring-2 md:ring-primary-cta">
-                <div className="bg-primary-cta text-primary-cta-text text-sm font-bold px-4 py-1 rounded-full w-fit mb-3">Most Popular</div>
-                <h3 className="text-2xl font-bold mb-2">Intermediate</h3>
-                <p className="text-foreground opacity-75 mb-6">For dedicated athletes</p>
-                <div className="text-4xl font-bold mb-8">$279<span className="text-lg opacity-75">/month</span></div>
-                <ul className="space-y-3 mb-8 flex-grow">
-                  <li className="flex items-start"><span className="mr-3">✓</span> Advanced training 4x/week</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Stunting & tumbling specialization</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Choreography sessions</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Two competitions included</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> All camps access</li>
-                </ul>
-                <button className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg font-semibold hover:opacity-90">Join Now</button>
-              </div>
-
-              {/* Elite Plan */}
-              <div className="bg-card border border-accent rounded-lg p-8 flex flex-col">
-                <h3 className="text-2xl font-bold mb-2">Elite</h3>
-                <p className="text-foreground opacity-75 mb-6">For champions</p>
-                <div className="text-4xl font-bold mb-8">$449<span className="text-lg opacity-75">/month</span></div>
-                <ul className="space-y-3 mb-8 flex-grow">
-                  <li className="flex items-start"><span className="mr-3">✓</span> Unlimited training access</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Personal coaching sessions</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Custom choreography</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Unlimited competitions</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Priority scheduling</li>
-                  <li className="flex items-start"><span className="mr-3">✓</span> Exclusive merchandise</li>
-                </ul>
-                <button className="w-full bg-primary-cta text-primary-cta-text py-3 rounded-lg font-semibold hover:opacity-90">Go Elite</button>
-              </div>
-            </div>
-
-            <div className="mt-12 p-6 bg-background-accent rounded-lg">
-              <h4 className="font-bold mb-2">Special Offers:</h4>
-              <ul className="text-sm space-y-1 opacity-90">
-                <li>• Outside Coaching: $50-150/hour depending on service</li>
-                <li>• Stunt Clinics: $25-75 per session</li>
-                <li>• Summer Camps: $399-799 per week</li>
-                <li>• New members: 15% off first month with referral</li>
-              </ul>
-            </div>
-          </div>
-        </div>
+        <MetricCardTwo
+          title="Pricing & Membership Options"
+          description="Flexible plans designed for every athlete and budget. Get started with CheerUp! today."
+          metrics={[
+            { id: "1", value: "$149", description: "Beginner - Introductory classes 2x/week" },
+            { id: "2", value: "$279", description: "Intermediate - Advanced training 4x/week" },
+            { id: "3", value: "$449", description: "Elite - Unlimited training access" }
+          ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
       </div>
 
       <div id="metrics" data-section="metrics">
-- 
2.49.1