Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -31,6 +31,7 @@ export default function HomePage() {
   const navItems = [
     { name: "Solutions", id: "solutions" },
     { name: "Use Cases", id: "usecases" },
+    { name: "Technology", id: "/technology" },
     { name: "Pricing", id: "pricing" },
     { name: "Resources", id: "faq" },
     { name: "Contact", id: "contact" },

src/app/pricing/page.tsx

@@ -12,6 +12,7 @@ export default function PricingPage() {
   const navItems = [
     { name: "Solutions", id: "solutions" },
     { name: "Use Cases", id: "usecases" },
+    { name: "Technology", id: "/technology" },
     { name: "Pricing", id: "pricing" },
     { name: "Resources", id: "faq" },
     { name: "Contact", id: "contact" },
@@ -28,7 +29,7 @@ export default function PricingPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/about" },
+        { label: "About Us", href: "/contact" },
         { label: "Case Studies", href: "#casestudies" },
         { label: "Blog", href: "#" },
         { label: "Careers", href: "#" },

src/app/technology/page.tsx

@@ -0,0 +1,345 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { CheckCircle, AlertCircle, Wifi, Lock, TrendingUp, Zap } from "lucide-react";
+
+export default function TechnologyPage() {
+  const navItems = [
+    { name: "Solutions", id: "solutions" },
+    { name: "Use Cases", id: "usecases" },
+    { name: "Technology", id: "technology" },
+    { name: "Pricing", id: "pricing" },
+    { name: "Resources", id: "faq" },
+    { name: "Contact", id: "contact" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Solutions",      items: [
+        { label: "Manufacturing", href: "#" },
+        { label: "Healthcare", href: "#" },
+        { label: "Transportation", href: "#" },
+        { label: "Smart Cities", href: "#" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/contact" },
+        { label: "Case Studies", href: "#casestudies" },
+        { label: "Blog", href: "#" },
+        { label: "Careers", href: "#" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Documentation", href: "#" },
+        { label: "API Reference", href: "#" },
+        { label: "Contact Support", href: "/contact" },
+        { label: "Privacy Policy", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="largeSmall"
+      background="circleGradient"
+      cardStyle="outline"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="5G Private Networks" navItems={navItems} />
+      </div>
+
+      {/* Hero Section */}
+      <div id="hero" data-section="hero">
+        <HeroSplitDualMedia
+          tag="Technology Comparison"
+          title="Traditional 5G DAS vs. 5G Private Networks"
+          description="Understand the critical differences between Distributed Antenna Systems and dedicated private networks. Each approach offers distinct advantages and trade-offs for enterprise deployments."
+          background={{ variant: "plain" }}
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/a-modern-5g-das-infrastructure-diagram-i-1772919031454-387846af.png",              imageAlt: "5G DAS Infrastructure"},
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/a-private-network-infrastructure-layout-1772919033008-86e62354.png",              imageAlt: "5G Private Network Architecture"},
+          ]}
+          rating={5}
+          ratingText="Enterprise-Grade Solutions"
+          buttons={[{ text: "Compare Now", href: "#comparison" }]}
+          mediaAnimation="none"
+        />
+      </div>
+
+      {/* Comparison Features Section */}
+      <div id="comparison" data-section="comparison">
+        <FeatureCardOne
+          title="Detailed Technology Comparison"
+          description="Compare key technical and operational differences between Traditional DAS and Private 5G Networks."
+          tag="Architecture"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          gridVariant="two-columns-alternating-heights"
+          features={[
+            {
+              title: "Network Architecture",              description: "DAS (Distributed Antenna System): Distributed antenna points connected to centralized baseband processing. Private Network: Self-contained RAN with dedicated spectrum and edge computing integration for localized control.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/network-architecture-diagram-1772919031454-387846af.png",              imageAlt: "Network Architecture Comparison"},
+            {
+              title: "Spectrum & Frequency",              description: "DAS: Operates on shared public spectrum managed by MNOs. Private Network: Uses dedicated spectrum bands (sub-6 GHz, mmWave, or licensed shared access) for exclusive control and prioritization.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/spectrum-frequency-comparison-1772919032210-59056da5.png",              imageAlt: "Spectrum & Frequency"},
+            {
+              title: "Coverage & Reliability",              description: "DAS: Coverage depends on macro network availability. Private Network: 99.99%+ uptime with redundancy, automatic failover, and guaranteed QoS for mission-critical operations.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/coverage-reliability-diagram-1772919031075-4ec28dc2.png",              imageAlt: "Coverage & Reliability"},
+            {
+              title: "Operator Independence",              description: "DAS: Dependent on one or more MNOs for all services. Private Network: Completely independent operations with neutral host model enabling multi-operator flexibility and revenue sharing.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/operator-independence-1772919032421-b9454e9c.png",              imageAlt: "Operator Independence"},
+            {
+              title: "Security & Control",              description: "DAS: Security managed by external MNOs. Private Network: Complete control over security protocols, access management, encryption, and compliance requirements.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/security-control-diagram-1772919033008-86e62354.png",              imageAlt: "Security & Control"},
+            {
+              title: "Cost Model",              description: "DAS: Lease payments to DAS operator plus backhaul costs. Private Network: CapEx for infrastructure plus OpEx for management, with ROI potential through revenue sharing and operational efficiency.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ANc3ZzfZDlaGGjgYO9S7sd32tn/cost-model-comparison-1772919032598-07e47e95.png",              imageAlt: "Cost Model"},
+          ]}
+        />
+      </div>
+
+      {/* Pros & Cons Comparison */}
+      <div id="proscons" data-section="proscons" className="py-16 md:py-24">
+        <div className="w-full max-w-7xl mx-auto px-6 md:px-8">
+          <div className="mb-12 md:mb-20 text-center">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4">Pros & Cons Analysis</h2>
+            <p className="text-base md:text-lg text-foreground/70 max-w-2xl mx-auto">
+              Detailed breakdown of advantages and disadvantages for each technology approach.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12">
+            {/* Traditional 5G DAS */}
+            <div className="bg-card rounded-lg p-8 border border-accent/20">
+              <h3 className="text-2xl font-bold mb-8 text-foreground">Traditional 5G DAS</h3>
+
+              <div className="mb-8">
+                <div className="flex items-center gap-3 mb-4">
+                  <CheckCircle className="w-6 h-6 text-green-500" />
+                  <h4 className="font-semibold text-lg">Advantages</h4>
+                </div>
+                <ul className="space-y-3 pl-9">
+                  <li className="text-foreground/80">
+                    <strong>Lower Initial Investment:</strong> No spectrum licensing required; minimal infrastructure cost
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Faster Deployment:</strong> Leverages existing macro network infrastructure; weeks to months
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Vendor Management Simple:</strong> One or two MNOs handle all operations and maintenance
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Multi-Operator Support Built-in:</strong> DAS carriers naturally support multiple MNOs
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Proven Technology:</strong> Mature ecosystem with established best practices
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Low Operating Costs:</strong> Minimal ongoing infrastructure management burden
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-3 mb-4">
+                  <AlertCircle className="w-6 h-6 text-red-500" />
+                  <h4 className="font-semibold text-lg">Disadvantages</h4>
+                </div>
+                <ul className="space-y-3 pl-9">
+                  <li className="text-foreground/80">
+                    <strong>No Operational Control:</strong> Completely dependent on MNO decisions and network management
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Limited SLA Guarantees:</strong> Standard commercial SLAs (99.9%); no mission-critical redundancy
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>No Dedicated Resources:</strong> Shares public network capacity; no guaranteed QoS or bandwidth
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Security Limitations:</strong> Subject to public network security protocols; limited customization
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>No Revenue Generation:</strong> Pure cost center; no opportunity to monetize infrastructure
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Long-term Vendor Lock-in:</strong> Committed to specific DAS provider with limited exit options
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            {/* 5G Private Network */}
+            <div className="bg-card rounded-lg p-8 border border-primary-cta/20">
+              <h3 className="text-2xl font-bold mb-8 text-foreground">5G Private Network</h3>
+
+              <div className="mb-8">
+                <div className="flex items-center gap-3 mb-4">
+                  <CheckCircle className="w-6 h-6 text-green-500" />
+                  <h4 className="font-semibold text-lg">Advantages</h4>
+                </div>
+                <ul className="space-y-3 pl-9">
+                  <li className="text-foreground/80">
+                    <strong>Complete Operational Control:</strong> Full autonomy over network configuration, policies, and operations
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Mission-Critical Reliability:</strong> 99.99%+ uptime SLA with redundancy and automatic failover
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Guaranteed QoS & Performance:</strong> Dedicated spectrum and prioritization for critical applications
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Enhanced Security:</strong> Complete control over encryption, access management, and compliance
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Revenue Generation Opportunity:</strong> Neutral host model enables operator partnerships and revenue sharing
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Scalability & Future-Proof:</strong> Cloud-native architecture scales seamlessly to 6G standards
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-3 mb-4">
+                  <AlertCircle className="w-6 h-6 text-red-500" />
+                  <h4 className="font-semibold text-lg">Disadvantages</h4>
+                </div>
+                <ul className="space-y-3 pl-9">
+                  <li className="text-foreground/80">
+                    <strong>Higher Initial CapEx:</strong> Spectrum licensing (if required) plus infrastructure deployment costs
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Longer Deployment Timeline:</strong> Site surveys, design, procurement, and testing; 8-16 weeks typical
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Operational Complexity:</strong> Requires in-house expertise or managed service partnerships
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Ongoing OpEx Commitment:</strong> Continuous maintenance, monitoring, and optimization required
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Spectrum Planning Required:</strong> Need to plan and manage dedicated spectrum allocation
+                  </li>
+                  <li className="text-foreground/80">
+                    <strong>Internal Resources Needed:</strong> Requires trained staff or external partners for network management
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* When to Choose Each */}
+      <div id="whenchoose" data-section="whenchoose" className="bg-card/50 py-16 md:py-24">
+        <div className="w-full max-w-7xl mx-auto px-6 md:px-8">
+          <div className="mb-12 md:mb-20 text-center">
+            <h2 className="text-3xl md:text-5xl font-bold mb-4">When to Choose Each Approach</h2>
+            <p className="text-base md:text-lg text-foreground/70 max-w-2xl mx-auto">
+              Decision framework for selecting the right technology for your enterprise requirements.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12">
+            {/* Choose DAS */}
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-8 border-2 border-accent/30">
+              <h3 className="text-2xl font-bold mb-6 text-foreground">Choose Traditional DAS If:</h3>
+              <ul className="space-y-4">
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Budget-constrained with minimal initial capital available</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Require fast deployment (weeks rather than months)</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Standard commercial reliability requirements (99.9% SLA acceptable)</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Prefer minimal operational involvement and vendor-managed service</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Public venue or commercial building with consumer-focused services</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>No need for differentiated security or custom network policies</span>
+                </li>
+              </ul>
+            </div>
+
+            {/* Choose Private Network */}
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-8 border-2 border-primary-cta/30">
+              <h3 className="text-2xl font-bold mb-6 text-foreground">Choose 5G Private Network If:</h3>
+              <ul className="space-y-4">
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Mission-critical applications requiring 99.99%+ uptime SLA</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Need guaranteed QoS and prioritization for specific services</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Require complete operational control and independence from MNOs</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Manufacturing facility, hospital, or transportation hub requiring reliability</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Need enhanced security, compliance, or custom network policies</span>
+                </li>
+                <li className="flex gap-3">
+                  <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" />
+                  <span>Interested in revenue generation through operator partnerships</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Contact CTA Section */}
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Need Expert Guidance?"
+          title="Let's Determine the Right Technology for You"
+          description="Our infrastructure specialists can help evaluate your requirements and recommend the optimal deployment strategy—whether DAS, private network, or a hybrid approach."
+          buttons={[
+            { text: "Schedule Technology Consultation", href: "/contact" },
+            { text: "Download Comparison Guide", href: "#" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      {/* Footer */}
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="5G Private Networks"
+          copyrightText="© 2025 5G Private Networks. All rights reserved."
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}