All changes, done like fully react router uses, services, al/ml and solution page section alignment and missing section done!

2025-09-23 20:13:31 +05:30
parent 5f5ddb1cd6
commit e78c8672e9
158 changed files with 2444 additions and 2093 deletions
--- a/pages/NativeAppDevelopment.tsx
+++ b/pages/NativeAppDevelopment.tsx
@@ -1,4 +1,4 @@
-import { navigateTo } from "@/App";
+import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import {
  Apple,
@@ -41,9 +41,11 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
 import ranoutofImage from "../src/images/ranoutof.webp"
 import seezunImage from "../src/images/seezun.webp";
 import regroupImage from "../src/images/regroup.webp";
+import awsLogoImage from "../src/images/aws-logo.png";

 // Native App Development Hero Section
 const NativeHeroWithCTA = () => {
+  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
@@ -55,7 +57,7 @@ const NativeHeroWithCTA = () => {
        />

        {/* Canonical Link */}
-       <link rel="canonical" href="https://www.wdipl.com/services/native-app-development" />
+        <link rel="canonical" href="https://www.wdipl.com/services/native-app-development" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Native App Development Services | WDI Expert Solutions" />
@@ -134,7 +136,7 @@ const NativeHeroWithCTA = () => {
            >
              <ShimmerButton
                className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/start-a-project")}
+                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <Gauge className="w-5 h-5 flex-shrink-0" />
@@ -787,14 +789,12 @@ const NativeProcess = () => {
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.8, delay: index * 0.2 }}
                  viewport={{ once: true }}
-                  className={`flex items-center ${
-                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
-                  } flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                    } flex-col lg:gap-16 gap-8`}
                >
                  <div
-                    className={`flex-1 ${
-                      isEven ? "lg:text-right" : "lg:text-left"
-                    } text-center lg:text-left`}
+                    className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
+                      } text-center lg:text-left`}
                  >
                    <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                      <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -830,7 +830,8 @@ const NativeProcess = () => {

 // Native Case Studies
 const NativeCaseStudies = () => {
-   const caseStudies = [
+  const navigate = useNavigate();
+  const caseStudies = [
    {
      title: "Household Management Revolution",
      client: "RanOutOf",
@@ -839,7 +840,7 @@ const NativeCaseStudies = () => {
      image: ranoutofImage,
      results: "3M+ downloads",
      gradient: "from-[#007F33]/20 to-[#007F33]/10",
-      buttonLink: "/projects/ranoutof", 
+      buttonLink: "/projects/ranoutof",
    },
    {
      title: "E-commerce Platform Innovation",
@@ -849,7 +850,7 @@ const NativeCaseStudies = () => {
      image: seezunImage,
      results: "800K+ users",
      gradient: "from-blue-500/20 to-cyan-500/20",
-      buttonLink: "/projects/seezun", 
+      buttonLink: "/projects/seezun",
    },
    {
      title: "Social Networking Platform",
@@ -859,7 +860,7 @@ const NativeCaseStudies = () => {
      image: regroupImage,
      results: "1.5M+ downloads",
      gradient: "from-[#a98453]/20 to-[#a98453]/10",
-      buttonLink: "/projects/regroup", 
+      buttonLink: "/projects/regroup",
    },
  ];

@@ -953,7 +954,7 @@ const NativeCaseStudies = () => {
                      variant="ghost"
                      size="sm"
                      className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
-                      onClick={() => navigateTo(study.buttonLink)}
+                      onClick={() => navigate(study.buttonLink)}
                    >
                      <span className="text-sm font-medium">
                        VIEW CASE STUDY
@@ -973,6 +974,7 @@ const NativeCaseStudies = () => {

 // Mid-Page CTA
 const NativeInlineCTA = () => {
+  const navigate = useNavigate();
  return (
    <section className="py-20 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
@@ -1011,7 +1013,7 @@ const NativeInlineCTA = () => {

            <ShimmerButton
              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
-              onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1025,8 +1027,94 @@ const NativeInlineCTA = () => {
  );
 };

+// NativeAppTechStack
+
+const NativeAppTechStack = () => {
+  const technologies = [
+    {
+      name: "Swift",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
+    },
+    {
+      name: "Objective-C",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/objectivec/objectivec-plain.svg",
+    },
+    {
+      name: "Xcode",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xcode/xcode-original.svg",
+    },
+    {
+      name: "UIKit",
+      logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Apple_logo_black.svg/512px-Apple_logo_black.svg.png",
+    },
+    {
+      name: "Android (Java/Kotlin)",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg",
+    },
+    {
+      name: "Android Studio",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-plain.svg",
+    },
+    {
+      name: "Firebase",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
+    },
+    {
+      name: "AWS",
+      logo: awsLogoImage,
+    },
+  ];
+
+  return (
+    <section className="py-32 bg-black">
+      <div className="container mx-auto px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="text-center mb-20"
+        >
+          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
+            Powering Native App Development
+          </h2>
+          <p className="text-xl text-gray-300 leading-relaxed">
+            We leverage native frameworks and tools to deliver high-performance apps for iOS and Android.
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
+          {technologies.map((tech, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.5, delay: index * 0.01 }}
+              viewport={{ once: true }}
+              whileHover={{ scale: 1.1, y: -5 }}
+              className="flex flex-col items-center group"
+            >
+              <div className="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
+                <ImageWithFallback
+                  src={tech.logo}
+                  alt={tech.name}
+                  className="w-12 h-12 object-contain"
+                />
+              </div>
+              <span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
+                {tech.name}
+              </span>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
 // Hire Native Developers
 const HireNativeDevelopers = () => {
+  const navigate = useNavigate();
  const developerTypes = [
    {
      title: "Senior iOS Native Developer",
@@ -1150,7 +1238,7 @@ const HireNativeDevelopers = () => {
          className="flex flex-col sm:flex-row gap-4 justify-center"
        >
          <ShimmerButton className="px-8 py-4"
-          onClick={() => navigateTo("/hire-talent/native-app-developers")}
+            onClick={() => navigate("/hire-talent/native-app-developers")}
          >
            <div className="inline-flex items-center gap-2">
              <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1248,6 +1336,7 @@ const NativeFAQs = () => {

 // Final CTA Section
 const NativeFinalCTA = () => {
+  const navigate = useNavigate();
  return (
    <section className="py-20 relative overflow-hidden">
      <div className="container mx-auto px-6 lg:px-8 relative z-10">
@@ -1299,7 +1388,7 @@ const NativeFinalCTA = () => {
            className="space-y-8"
          >
            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
-            onClick={() => navigateTo("/start-a-project")}
+              onClick={() => navigate("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1329,7 +1418,7 @@ const NativeFinalCTA = () => {
 export const NativeAppDevelopment = () => {
  return (
    <div className="dark min-h-screen">
-      <Navigation />
+      {/* <Navigation /> */}

      {/* Hero Section */}
      <section className="bg-black">
@@ -1341,9 +1430,20 @@ export const NativeAppDevelopment = () => {
        <NativeVsCrossPlatform />
      </section>

+      {/* Case Studies */}
+      <section className="bg-background">
+        <NativeCaseStudies />
+      </section>
+
      {/* Capabilities */}
-      <section className="bg-card">
+      {/* <section className="bg-black">
        <NativeCapabilities />
+      </section> */}
+
+
+      {/* Development Process */}
+      <section className="bg-card">
+        <NativeProcess />
      </section>

      {/* Use Cases */}
@@ -1351,19 +1451,14 @@ export const NativeAppDevelopment = () => {
        <NativeUseCases />
      </section>

-      {/* Development Process */}
-      <section className="bg-card">
-        <NativeProcess />
-      </section>
-
-      {/* Case Studies */}
-      <section className="bg-background">
-        <NativeCaseStudies />
-      </section>
-
      {/* Mid-Page CTA */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
        <NativeInlineCTA />
+      </section> */}
+
+      {/* NativeAppTechStack */}
+      <section className="bg-card">
+        <NativeAppTechStack />
      </section>

      {/* Hire Developers */}
@@ -1372,18 +1467,18 @@ export const NativeAppDevelopment = () => {
      </section>

      {/* FAQs */}
-      <section className="bg-card">
+      {/* <section className="bg-card">
        <NativeFAQs />
-      </section>
+      </section> */}

      {/* Final CTA */}
-      <section className="bg-background">
+      <section className="bg-card">
        <NativeFinalCTA />
      </section>

      {/* Footer */}
-      <section className="bg-card">
-        <Footer />
+      <section className="bg-background">
+        {/* <Footer /> */}
      </section>
    </div>
  );