Update src/app/page.tsx

src/app/page.tsx

@@ -2,273 +2,125 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactText from '@/components/sections/contact/ContactText';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import { Database, Globe, Rocket } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
         defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
+        borderRadius="pill"
-        contentWidth="mediumSmall"
+        contentWidth="mediumLarge"
-        sizing="mediumLargeSizeMediumTitles"
+        sizing="largeSizeMediumTitles"
-        background="grid"
+        background="noiseDiagonalGradient"
-        cardStyle="solid"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarStyleApple
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "hero" },
-          name: "Home",
+              { name: "Advantage", id: "features" },
-          id: "hero",
+              { name: "Impact", id: "metrics" },
-        },
+              { name: "Stories", id: "testimonials" },
-        {
+              { name: "Contact", id: "contact" },
-          name: "Services",
+            ]}
-          id: "features",
+            brandName="Ammerlus Inc"
-        },
+          />
-        {
+        </div>
-          name: "Metrics",
-          id: "metrics",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Ammerlus Inc"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroCentered
+          <HeroBillboard
-      background={{
+            background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient",
+            title="Architecting the Future with Ammerlus Inc"
-      }}
+            description="Powered by Hupfumi Africa, we bridge the gap between imagination and digital reality. High-performance software solutions for the next era of innovation."
-      title="Architecting the Future with Ammerlus Inc"
+            tag="Next Gen Engineering"
-      description="Powered by Hupfumi Africa, we bridge the gap between imagination and digital reality. High-performance software solutions for the next era of innovation."
+            buttons={[{ text: "View Solutions", href: "#features" }, { text: "Contact Us", href: "#contact" }]}
-      avatars={[
+            imageSrc="http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg"
-        {
+          />
-          src: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-desk-table-business-company-office_482257-16773.jpg",
+        </div>
-          alt: "Client 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-doctor-wearing-lab-coat_23-2149551157.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      avatarText="Trusted by 500+ Innovators"
-      buttons={[
-        {
-          text: "View Solutions",
-          href: "#features",
-        },
-        {
-          text: "Contact Us",
-          href: "#contact",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "AI Integration",
-        },
-        {
-          type: "text",
-          text: "Cloud Infrastructure",
-        },
-        {
-          type: "text",
-          text: "Blockchain Solutions",
-        },
-        {
-          type: "text",
-          text: "DevOps Optimization",
-        },
-        {
-          type: "text",
-          text: "Cybersecurity",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <AboutMetric
+          <InlineImageSplitTextAbout
-      useInvertedBackground={true}
+            useInvertedBackground={true}
-      title="Our Engineering Powerhouse"
+            heading={[{ type: 'text', content: "Our Engineering Powerhouse" }]}
-      metrics={[
+          />
-        {
+        </div>
-          icon: Database,
-          label: "Dev Cycles",
-          value: "24/7",
-        },
-        {
-          icon: Rocket,
-          label: "Deployments",
-          value: "150+",
-        },
-        {
-          icon: Globe,
-          label: "Global Reach",
-          value: "Hupfumi",
-        },
-      ]}
-      metricsAnimation="blur-reveal"
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardSixteen
+          <FeatureCardOne
-      animationType="depth-3d"
+            animationType="depth-3d"
-      textboxLayout="default"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            gridVariant="bento-grid"
-      negativeCard={{
+            useInvertedBackground={false}
-        items: [
+            title="Ammerlus Advantage"
-          "Legacy overhead",
+            description="We don't just write code; we architect systems that define the future."
-          "Slow deployment",
+            features={[
-          "Insecure pipelines",
+              { title: "AI-native architecture", description: "Advanced neural systems for modern enterprise.", imageSrc: "https://images.unsplash.com/photo-1677442136019-21780ecad995" },
-          "Fragmented data",
+              { title: "Rapid delivery", description: "Speed to market without compromising on quality.", imageSrc: "https://images.unsplash.com/photo-1661956602116-aa6865609028" },
-          "Downtime risk",
+              { title: "Zero-trust security", description: "Hardened infrastructure for the global cloud.", imageSrc: "https://images.unsplash.com/photo-1639815188546-c430e3863483" },
-        ],
+            ]}
-      }}
+          />
-      positiveCard={{
+        </div>
-        items: [
-          "AI-native architecture",
-          "Rapid delivery",
-          "Zero-trust security",
-          "Unified ecosystems",
-          "Always-on resilience",
-        ],
-      }}
-      title="Ammerlus Advantage"
-      description="We don't just write code; we architect systems that define the future."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="metrics" data-section="metrics">
-      <MetricCardTwo
+          <MetricCardSeven
-      animationType="scale-rotate"
+            animationType="depth-3d"
-      textboxLayout="split"
+            textboxLayout="split"
-      gridVariant="bento-grid"
+            useInvertedBackground={true}
-      useInvertedBackground={true}
+            title="Performance at Scale"
-      metrics={[
+            description="Quantifiable impact delivered through Hupfumi Africa infrastructure."
-        {
+            metrics={[
-          id: "m1",
+              { id: "u", value: "99.99%", title: "Uptime Guarantee", items: ["High availability", "Redundant systems"] },
-          value: "99.99%",
+              { id: "s", value: "2x", title: "Faster Launch", items: ["Optimized pipelines", "Automated CI/CD"] },
-          description: "Uptime Guarantee",
+              { id: "c", value: "40%", title: "Cost Efficiency", items: ["Resource optimization", "Waste reduction"] },
-        },
+            ]}
-        {
+          />
-          id: "m2",
+        </div>
-          value: "2x",
-          description: "Faster Time-to-Market",
-        },
-        {
-          id: "m3",
-          value: "40%",
-          description: "Lower Operating Costs",
-        },
-      ]}
-      title="Performance at Scale"
-      description="Quantifiable impact delivered through Hupfumi Africa infrastructure."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
+          <TestimonialCardSixteen
-      animationType="slide-up"
+            animationType="depth-3d"
-      textboxLayout="default"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      testimonials={[
+            title="Voices of Innovation"
-        {
+            description="Client success stories powered by our engineering."
-          id: "t1",
+            kpiItems={[{ value: "500+", label: "Projects" }, { value: "99%", label: "Satisfaction" }, { value: "20+", label: "Countries" }]}
-          name: "Kojo Mensah",
+            testimonials={[
-          role: "CEO",
+              { id: "t1", name: "Kojo Mensah", role: "CEO", company: "Hupfumi", rating: 5, imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" },
-          testimonial: "Ammerlus transformed our digital stack.",
+              { id: "t2", name: "Sarah Ahmed", role: "CTO", company: "TechCorp", rating: 5, imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80" },
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-sitting-desk-table-business-company-office_482257-16773.jpg",
+            ]}
-        },
+          />
-        {
+        </div>
-          id: "t2",
-          name: "Sarah Ahmed",
-          role: "CTO",
-          testimonial: "Seamless execution, exceptional talent.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-doctor-wearing-lab-coat_23-2149551157.jpg",
-        },
-        {
-          id: "t3",
-          name: "Amara Okoro",
-          role: "Founder",
-          testimonial: "Hupfumi Africa's tech is unmatched.",
-          imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
-        },
-        {
-          id: "t4",
-          name: "David Zhou",
-          role: "Director",
-          testimonial: "The future of development is here.",
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
-        },
-        {
-          id: "t5",
-          name: "Elena Rossi",
-          role: "Head of Engineering",
-          testimonial: "Professional, efficient, and brilliant.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
-        },
-      ]}
-      title="Voices of Innovation"
-      description="Client success stories powered by our engineering."
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactCenter
+          <ContactText
-      useInvertedBackground={true}
+            background={{ variant: "sparkles-gradient" }}
-      background={{
+            text="Ready to architect the next big breakthrough? Let's get started."
-        variant: "gradient-bars",
+            buttons={[{ text: "Get in touch", href: "#" }]}
-      }}
+            useInvertedBackground={false}
-      tag="Let's Build"
+          />
-      title="Start Your Journey with Ammerlus"
+        </div>
-      description="Get in touch to discuss your next technical challenge."
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoReveal
+          <FooterBaseReveal
-      logoText="Ammerlus Inc"
+            logoText="Ammerlus Inc"
-      leftLink={{
+            columns={[
-        text: "Hupfumi Africa",
+              { title: "Services", items: [{ label: "Cloud", href: "#" }, { label: "Security", href: "#" }] },
-        href: "https://hupfumi.africa",
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
-      }}
+            ]}
-      rightLink={{
+          />
-        text: "Terms",
+        </div>
-        href: "#",
-      }}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #1a2f1d;
+  --card: #0a0a0a;
   --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --primary-cta: #106efb;
   --primary-cta-text: #0a1a0c;
-  --secondary-cta: #0d200f;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #d4f6d8;
-  --accent: #1a3d1f;
+  --accent: #1f7cff;
-  --background-accent: #355e3b;
+  --background-accent: #004a93;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);