288 lines
13 KiB
TypeScript
288 lines
13 KiB
TypeScript
|
import { CarouselTestimonials } from "@/components/CarouselTestimonials";
|
||
|
|
import { CaseStudyHighlight } from "@/components/CaseStudyHighlight";
|
||
|
|
import { Footer } from "@/components/Footer";
|
||
|
|
import { HorizontalTagScroller } from "@/components/HorizontalTagScroller";
|
||
|
|
import { InlineCTA } from "@/components/InlineCTA";
|
||
|
|
import { ProcessSection } from "@/components/ProcessSection";
|
||
|
|
import { ResourceCards } from "@/components/ResourceCards";
|
||
|
|
import { SplitCallToAction } from "@/components/SplitCallToAction";
|
||
|
|
import { WhyChooseWDI } from "@/components/WhyChooseWDI";
|
||
|
|
import { ChevronRight } from "lucide-react";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
import { Helmet } from "react-helmet-async";
|
||
|
|
import { Navigation } from "@/components/Navigation";
|
||
|
|
import { HeroSection } from "@/components/HeroSection";
|
||
|
|
import { ClientLogos } from "@/components/ClientLogos";
|
||
|
|
import { useNavigate } from "react-router-dom";
|
||
|
|
|
||
|
|
|
||
|
|
const services = [
|
||
|
|
{
|
||
|
|
title: "Mobile App Development",
|
||
|
|
icon: (
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.",
|
||
|
|
link: "/services/mobile-app-development"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Web Platforms & SaaS",
|
||
|
|
icon: (
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
description: "Scalable, secure, and SEO-optimized web applications built for performance.",
|
||
|
|
link: "/web-cloud"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "AI & ML Solutions",
|
||
|
|
icon: (
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
description: "Intelligent features powered by cutting-edge algorithms and machine learning.",
|
||
|
|
link: "/artificial-intelligence"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "DevOps & Cloud",
|
||
|
|
icon: (
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
description: "CI/CD pipelines and managed cloud infrastructure for seamless deployment.",
|
||
|
|
link: "/services/system-architecture-devops"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Product Design & UX",
|
||
|
|
icon: (
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
description: "Human-centered UX with delightful micro-interactions and intuitive interfaces.",
|
||
|
|
link: "/design-experience"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "Security & Compliance",
|
||
|
|
icon: (
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={1.5}
|
||
|
|
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
description: "Pen-testing, auditing, and regulatory alignment for enterprise-grade security.",
|
||
|
|
link: "/solutions/compliance-ready-systems"
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
export const Homepage = () => {
|
||
|
|
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="dark min-h-screen bg-background">
|
||
|
|
<Helmet>
|
||
|
|
{/* Page Title and Meta Description */}
|
||
|
|
<title>Mobile App Development Services | WDI - iOS & Android App Development</title>
|
||
|
|
<meta
|
||
|
|
name="description"
|
||
|
|
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Canonical Link */}
|
||
|
|
<link rel="canonical" href="https://www.wdipl.com/" />
|
||
|
|
|
||
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
|
|
<meta property="og:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
|
||
|
|
<meta
|
||
|
|
property="og:description"
|
||
|
|
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
|
||
|
|
/>
|
||
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
|
|
<meta property="og:type" content="website" />
|
||
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
|
|
||
|
|
{/* Twitter Card Tags */}
|
||
|
|
<meta name="twitter:card" content="summary_large_image" />
|
||
|
|
<meta name="twitter:title" content="Mobile App Development Services | WDI - iOS & Android App Development" />
|
||
|
|
<meta
|
||
|
|
name="twitter:description"
|
||
|
|
content="Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available."
|
||
|
|
/>
|
||
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
|
|
||
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
||
|
|
<script type="application/ld+json">
|
||
|
|
{`
|
||
|
|
{
|
||
|
|
"@context": "https://schema.org",
|
||
|
|
"@type": "Organization",
|
||
|
|
"name": "WDI",
|
||
|
|
"url": "https://www.wdipl.com",
|
||
|
|
"sameAs": [
|
||
|
|
"https://www.facebook.com/wdideas",
|
||
|
|
"https://www.linkedin.com/in/website-developers-india/",
|
||
|
|
"https://www.instagram.com/wdipl/"
|
||
|
|
]
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</script>
|
||
|
|
</Helmet>
|
||
|
|
{/* <Navigation /> */}
|
||
|
|
|
||
|
|
{/* Hero Section - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<HeroSection />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Client Logos - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<ClientLogos />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Services Grid - Dark background */}
|
||
|
|
{/* <section className="bg-background">
|
||
|
|
<ServicesSection />
|
||
|
|
</section> */}
|
||
|
|
<section className="py-20 bg-background">
|
||
|
|
<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-left mb-20"
|
||
|
|
>
|
||
|
|
<div className="text-center">
|
||
|
|
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
|
||
|
|
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
|
||
|
|
End-to-end solutions for every stage of your product lifecycle.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, y: 40 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
|
|
>
|
||
|
|
{services.map((service, index) => {
|
||
|
|
const IconComponent = service.icon;
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
key={index}
|
||
|
|
initial={{ opacity: 0, y: 20 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
whileHover={{ y: -5 }}
|
||
|
|
className="group cursor-pointer"
|
||
|
|
onClick={() => navigate(service.link)}
|
||
|
|
>
|
||
|
|
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
||
|
|
<div className="flex flex-col items-start space-y-6">
|
||
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
||
|
|
{/* <IconComponent className="w-6 h-6 text-accent" /> */}
|
||
|
|
<svg
|
||
|
|
className="w-6 h-6 text-accent"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
>
|
||
|
|
{service.icon}
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
||
|
|
{service.title}
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-400 leading-relaxed">
|
||
|
|
{service.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2 text-accent font-medium">
|
||
|
|
<span>Explore Services</span>
|
||
|
|
<ChevronRight className="w-4 h-4" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Why Choose WDI - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<WhyChooseWDI />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Industry Solutions - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<HorizontalTagScroller />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Case Studies - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<CaseStudyHighlight />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Inline CTA - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<InlineCTA />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Process Steps - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<ProcessSection />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Testimonials - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<CarouselTestimonials />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Resources - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<ResourceCards />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Final CTA - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
<SplitCallToAction />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Footer - Dark background */}
|
||
|
|
<section className="bg-background">
|
||
|
|
{/* <Footer /> */}
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|