All changes, done like fully react router uses, services, al/ml and solution page section alignment and missing section done!
This commit is contained in:
priyanshuvish
@@ -41,14 +41,16 @@ import {
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "../components/ui/tabs";
|
||||
import { navigateTo } from "@/App";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
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";
|
||||
|
||||
// Cross-Platform Hero Section
|
||||
const CrossPlatformHeroWithCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
@@ -138,7 +140,7 @@ const CrossPlatformHeroWithCTA = () => {
|
||||
>
|
||||
<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">
|
||||
<Share2 className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -825,6 +827,7 @@ const CrossPlatformServices = () => {
|
||||
|
||||
// Cross-Platform Case Studies
|
||||
const CrossPlatformCaseStudies = () => {
|
||||
const navigate = useNavigate();
|
||||
const caseStudies = [
|
||||
{
|
||||
title: "Household Management Revolution",
|
||||
@@ -948,7 +951,7 @@ const CrossPlatformCaseStudies = () => {
|
||||
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
|
||||
@@ -968,6 +971,7 @@ const CrossPlatformCaseStudies = () => {
|
||||
|
||||
// Mid-Page CTA
|
||||
const CrossPlatformInlineCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
@@ -1006,7 +1010,7 @@ const CrossPlatformInlineCTA = () => {
|
||||
|
||||
<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">
|
||||
<Target className="w-6 h-6 flex-shrink-0" />
|
||||
@@ -1019,9 +1023,98 @@ const CrossPlatformInlineCTA = () => {
|
||||
</section>
|
||||
);
|
||||
};
|
||||
// CrossPlatformTechStack
|
||||
|
||||
const CrossPlatformTechStack = () => {
|
||||
const technologies = [
|
||||
{
|
||||
name: "React Native",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||||
},
|
||||
{
|
||||
name: "Flutter",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg",
|
||||
},
|
||||
{
|
||||
name: "Xamarin",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xamarin/xamarin-original.svg",
|
||||
},
|
||||
{
|
||||
name: "Ionic",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ionic/ionic-original.svg",
|
||||
},
|
||||
{
|
||||
name: "Firebase",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
|
||||
},
|
||||
{
|
||||
name: "AWS",
|
||||
logo: awsLogoImage,
|
||||
},
|
||||
{
|
||||
name: "GraphQL / Apollo",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg",
|
||||
},
|
||||
{
|
||||
name: "TypeScript",
|
||||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
Cross-Platform App Development Technologies
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 leading-relaxed">
|
||||
We build seamless apps for iOS, Android, and the web using
|
||||
cutting-edge cross-platform frameworks and tools.
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default CrossPlatformTechStack;
|
||||
|
||||
|
||||
// Hire Cross-Platform Developers
|
||||
const HireCrossPlatformDevelopers = () => {
|
||||
const navigate = useNavigate();
|
||||
const developerTypes = [
|
||||
{
|
||||
title: "Senior Flutter Developer",
|
||||
@@ -1128,7 +1221,7 @@ const HireCrossPlatformDevelopers = () => {
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center"
|
||||
>
|
||||
<ShimmerButton className="px-8 py-4"
|
||||
onClick={() => navigateTo("/hire-talent/cross-platform-developers")}
|
||||
onClick={() => navigate("/hire-talent/cross-platform-developers")}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
||||
@@ -1224,6 +1317,7 @@ const CrossPlatformFAQs = () => {
|
||||
|
||||
// Final CTA Section
|
||||
const CrossPlatformFinalCTA = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<section className="py-20 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
@@ -1282,7 +1376,7 @@ const CrossPlatformFinalCTA = () => {
|
||||
>
|
||||
<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" />
|
||||
@@ -1311,7 +1405,7 @@ const CrossPlatformFinalCTA = () => {
|
||||
export const CrossPlatformAppDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen">
|
||||
<Navigation />
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-black">
|
||||
@@ -1323,29 +1417,34 @@ export const CrossPlatformAppDevelopment = () => {
|
||||
<CrossPlatformBenefits />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-black">
|
||||
<CrossPlatformCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Technologies */}
|
||||
<section className="bg-card">
|
||||
<section className="bg-background">
|
||||
<CrossPlatformTechnologies />
|
||||
</section>
|
||||
|
||||
{/* Development Process */}
|
||||
<section className="bg-background">
|
||||
<section className="bg-black">
|
||||
<CrossPlatformProcess />
|
||||
</section>
|
||||
|
||||
{/* Services */}
|
||||
<section className="bg-card">
|
||||
<section className="bg-background">
|
||||
<CrossPlatformServices />
|
||||
</section>
|
||||
|
||||
{/* Case Studies */}
|
||||
<section className="bg-background">
|
||||
<CrossPlatformCaseStudies />
|
||||
</section>
|
||||
|
||||
{/* Mid-Page CTA */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<CrossPlatformInlineCTA />
|
||||
</section> */}
|
||||
|
||||
{/* cross platform tech */}
|
||||
<section className="bg-black">
|
||||
<CrossPlatformTechStack />
|
||||
</section>
|
||||
|
||||
{/* Hire Developers */}
|
||||
@@ -1354,18 +1453,18 @@ export const CrossPlatformAppDevelopment = () => {
|
||||
</section>
|
||||
|
||||
{/* FAQs */}
|
||||
<section className="bg-card">
|
||||
{/* <section className="bg-card">
|
||||
<CrossPlatformFAQs />
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="bg-background">
|
||||
<section className="bg-black">
|
||||
<CrossPlatformFinalCTA />
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<section className="bg-card">
|
||||
<Footer />
|
||||
<section className="bg-background">
|
||||
{/* <Footer /> */}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user