Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import { Award, CheckCircle, Users } from "lucide-react";
 
 export default function LandingPage() {
@@ -29,12 +30,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Services", id: "services" },
-        {
+        { name: "Reviews", id: "reviews" },
-          name: "Services",          id: "services"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="SupportSphere"
     />
@@ -42,29 +41,17 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="Scale Your Business with Expert Remote Teams"
       description="SupportSphere delivers world-class BPO outsourcing solutions. Reduce operational costs by up to 60% while accessing top-tier global talent."
       buttons={[
-        {
+        { text: "Get a Free Quote", href: "#contact" },
-          text: "Get a Free Quote",          href: "#contact"},
+        { text: "Book Consultation", href: "#contact" },
-        {
-          text: "Book Consultation",          href: "#contact"},
       ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg", imageAlt: "SupportSphere HQ" },
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-watching-business-conference-computer-screen-looking-statistics_482257-125563.jpg",          imageAlt: "SupportSphere HQ"},
+        { imageSrc: "http://img.b2bpic.net/free-photo/system-administrator-monitoring-server-room-doing-checkup_482257-89777.jpg", imageAlt: "Global Team" },
-        {
+        { imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098556.jpg", imageAlt: "Data Management" }
-          imageSrc: "http://img.b2bpic.net/free-photo/system-administrator-monitoring-server-room-doing-checkup_482257-89777.jpg",          imageAlt: "Global Team"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/urban-mysterious-lights-film-aesthetic_23-2149098556.jpg",          imageAlt: "Data Management"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg",          imageAlt: "Customer Success"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg",          imageAlt: "Sales Operations"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-with-eyeglasses_23-2148452643.jpg",          imageAlt: "Technical Support"},
       ]}
       mediaAnimation="blur-reveal"
     />
@@ -76,39 +63,39 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "1", title: "Technical Support", subtitle: "Tier 1 & Tier 2 support delivered with 99% satisfaction.", category: "Support", value: "24/7" },
-          id: "1",          title: "Technical Support",          subtitle: "Tier 1 & Tier 2 support delivered with 99% satisfaction.",          category: "Support",          value: "24/7"},
+        { id: "2", title: "Sales & Leads", subtitle: "Outbound campaigns that drive measurable growth.", category: "Sales", value: "ROI" },
-        {
+        { id: "3", title: "Data Management", subtitle: "Precise transcription, entry, and analysis.", category: "Back Office", value: "99.9%" },
-          id: "2",          title: "Sales & Leads",          subtitle: "Outbound campaigns that drive measurable growth.",          category: "Sales",          value: "ROI"},
+        { id: "4", title: "Managed Operations", subtitle: "Full-scale outsourcing for complex business processes.", category: "Ops", value: "High Efficiency" },
-        {
-          id: "3",          title: "Data Management",          subtitle: "Precise transcription, entry, and analysis.",          category: "Back Office",          value: "99.9%"},
-        {
-          id: "4",          title: "Customer Experience",          subtitle: "Personalized omnichannel support for modern brands.",          category: "CX",          value: "100%"},
-        {
-          id: "5",          title: "Finance & Payroll",          subtitle: "Accuracy-first financial processing and reporting.",          category: "Operations",          value: "Secure"},
-        {
-          id: "6",          title: "Creative Services",          subtitle: "Graphic design, content creation, and media.",          category: "Marketing",          value: "Creative"},
       ]}
       title="Our Specialized Service Departments"
-      description="We offer six specialized departments under one trusted partner to ensure every business need is met."
+      description="Tailored outsourcing solutions designed for global scale and local quality."
     />
   </div>
 
+  <div id="reviews" data-section="reviews">
+      <TestimonialCardTwelve
+        cardTitle="Client Success Stories"
+        cardTag="Testimonials"
+        cardAnimation="slide-up"
+        useInvertedBackground={true}
+        testimonials={[
+          { id: "t1", name: "Alex P., CEO of TechGrowth", imageSrc: "http://img.b2bpic.net/free-photo/professional-young-woman-with-eyeglasses_23-2148452643.jpg" },
+          { id: "t2", name: "Jordan D., Ops Manager", imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg" },
+          { id: "t3", name: "Sarah M., Director of Support", imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg" }
+        ]}
+      />
+  </div>
+
   <div id="metrics" data-section="metrics">
       <MetricCardThree
       animationType="depth-3d"
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", icon: Users, title: "Clients Worldwide", value: "500+" },
-          id: "m1",          icon: Users,
+        { id: "m2", icon: Award, title: "Years Experience", value: "10+" },
-          title: "Clients Worldwide",          value: "500+"},
+        { id: "m3", icon: CheckCircle, title: "Agents Deployed", value: "2,000+" },
-        {
-          id: "m2",          icon: Award,
-          title: "Years Experience",          value: "10+"},
-        {
-          id: "m3",          icon: CheckCircle,
-          title: "Agents Deployed",          value: "2,000+"},
       ]}
       title="Global Success Metrics"
       description="Trusted by over 500+ global brands with 99.5% retention."
@@ -119,12 +106,8 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "What is BPO?", content: "Business Process Outsourcing involves partnering with a specialized provider to handle specific business tasks like support, billing, or sales." },
-          id: "f1",          title: "What is BPO?",          content: "Business Process Outsourcing involves partnering with a specialized provider to handle specific business tasks like support, billing, or sales."},
+        { id: "f2", title: "How much can I save?", content: "Businesses typically save up to 60% on operational costs by partnering with us compared to in-house management." },
-        {
-          id: "f2",          title: "How much can I save?",          content: "Businesses typically save up to 60% on operational costs by partnering with us compared to in-house management."},
-        {
-          id: "f3",          title: "Is data secure?",          content: "We maintain enterprise-grade security including NDA protection, GDPR compliance, and regular audits."},
       ]}
       sideTitle="Frequently Asked Questions"
       faqsAnimation="blur-reveal"
@@ -134,14 +117,11 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       text="Get in touch with our team today. We are ready to scale your business."
       buttons={[
-        {
+        { text: "Email: info@supportsphere.com", href: "mailto:info@supportsphere.com" },
-          text: "Email: info@supportsphere.com",          href: "mailto:info@supportsphere.com"},
+        { text: "Call: +1 (212) 555-0198", href: "tel:+12125550198" },
-        {
-          text: "Call: +1 (212) 555-0198",          href: "tel:+12125550198"},
       ]}
     />
   </div>
@@ -150,24 +130,8 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="SupportSphere"
       columns={[
-        {
+        { title: "Services", items: [{ label: "Tech Support", href: "#" }, { label: "Sales", href: "#" }] },
-          title: "Services",          items: [
+        { title: "Company", items: [{ label: "Reviews", href: "#reviews" }, { label: "Contact", href: "#contact" }] },
-            {
-              label: "Tech Support",              href: "#"},
-            {
-              label: "Sales",              href: "#"},
-            {
-              label: "CX",              href: "#"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
       ]}
       copyrightText="© 2026 SupportSphere Outsource Genius."
     />

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #121212;
+  --card: #1a0000;
   --foreground: #ffffff;
   --primary-cta: #ff0000;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #121212;
-  --secondary-cta-text: #000000;
+  --secondary-cta-text: #ffffff;
   --accent: #8b0000;
-  --background-accent: #1a0000;
+  --background-accent: #2a0000;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);