WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Compare commits

base: WDIPL:b006f6794af7fde405dd8aa2826eb43a741db153
Branches Tags
WDIPL:main WDIPL:production WDIPL:tejas-clean WDIPL:tejas-dev WDIPL:rajendra.reddy-patch-1 WDIPL:parth-dev WDIPL:yasin-dev WDIPL:arya-dev WDIPL:priyanshu
..
compare: WDIPL:742bd44d0d6bcf0dc75670831db66a3c9f42ec1e
Branches Tags
WDIPL:production WDIPL:main WDIPL:tejas-clean WDIPL:tejas-dev WDIPL:rajendra.reddy-patch-1 WDIPL:parth-dev WDIPL:yasin-dev WDIPL:arya-dev WDIPL:priyanshu

3 Commits
b006f6794a ... 742bd44d0d

Author SHA1 Message Date
Siddhesh More
742bd44d0d Merge pull request 'arya-dev' (#2) from arya-dev into main 
Reviewed-on: PriyanshuVishwakarma/Wdipl-react#2
 2026-02-17 06:42:16 +00:00
aryabenade
14103041e6 removed seezuns 2026-02-17 12:08:19 +05:30
aryabenade
3b9215e544 update git ignore 2026-02-17 11:34:12 +05:30
14 changed files with 832 additions and 829 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -11,6 +11,7 @@ node_modules
dist
dist-ssr
*.local
package-lock.json
# Editor directories and files
.vscode/*

62
components/CaseStudyHighlight.tsx
View File

@@ -4,7 +4,7 @@ import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import regroupImage from '../src/images/regroup.webp';
import seezunImage from '../src/images/seezun.webp';
// import seezunImage from '../src/images/seezun.webp';
// import wokaImage from '../src/images/woka.webp';
import wokaAwardImage from '../src/images/woka.webp';
import tanamiImage from '../src/images/tanami.webp';
@@ -24,13 +24,13 @@ const featuredCaseStudy = {
};
const caseStudies = [
{
title: "Seezun",
description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
achievement: "+85% Brand Recognition",
industryTags: ["Branding", "Fashion"],
image: seezunImage
},
// {
// title: "Seezun",
// description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
// achievement: "+85% Brand Recognition",
// industryTags: ["Branding", "Fashion"],
// image: seezunImage
// },
{
title: "Regroup",
description: "Built Regroup as a social platform that brings together passion, global connections, teamwork, and love for sports through a vibrant online community.",
@@ -50,8 +50,8 @@ const caseStudies = [
const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; index: number }) => {
const getNavigationPath = (title: string) => {
switch (title) {
case 'Seezun':
return '/projects/seezun';
// case 'Seezun':
// return '/projects/seezun';
case 'Woka':
return '/projects/woka';
case 'Tanami':
@@ -78,7 +78,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
<ImageWithFallback
src={study.image}
alt={
study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
// study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
study.title === "Woka" ? "Woka learning platform banner showcasing educational mobile app features" :
study.title === "Tanami" ? "Tanami Capital financial platform banner showcasing investment portfolio management" :
study.title === "Regroup" ? "Regroup mobile app banner showcasing sports networking features" :
@@ -86,7 +86,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
}
className={`w-full h-full ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "object-contain" : "object-cover"} object-center ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "group-hover:scale-[1.02]" : "group-hover:scale-105"} transition-transform duration-500 rounded-[10px]`}
/>
<div className="absolute top-4 left-4 z-10">
<div className="absolute z-10 top-4 left-4">
<span className="px-3 py-1 bg-accent text-accent-foreground text-sm font-medium rounded-[10px]">
{study.achievement}
</span>
@@ -94,10 +94,10 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
</div>
<div className="p-6">
<h3 className="text-xl font-semibold text-foreground mb-3 group-hover:text-accent transition-colors duration-300">
<h3 className="mb-3 text-xl font-semibold transition-colors duration-300 text-foreground group-hover:text-accent">
{study.title}
</h3>
<p className="text-muted-foreground text-sm mb-4 leading-relaxed">
<p className="mb-4 text-sm leading-relaxed text-muted-foreground">
{study.description}
</p>
@@ -113,7 +113,7 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
</div>
<button
className="text-accent text-sm font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300"
className="flex items-center gap-2 text-sm font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-1"
onClick={(e) => {
e.stopPropagation();
navigate(getNavigationPath(study.title));
@@ -129,21 +129,21 @@ const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; in
export const CaseStudyHighlight = () => {
const navigate = useNavigate();
return (
<section className="relative py-20 bg-background overflow-hidden">
<section className="relative py-20 overflow-hidden bg-background">
<GridPattern strokeDasharray="4 2" />
<div className="relative z-10 container mx-auto px-6 lg:px-8">
<div className="container relative z-10 px-6 mx-auto 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-16"
className="mb-16 text-center"
>
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-4">
<h2 className="mb-4 text-3xl font-semibold lg:text-4xl text-foreground">
See What We've Built
</h2>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
<p className="max-w-2xl mx-auto text-lg text-muted-foreground">
Real results from real projects. Here's how we've helped companies scale their digital products.
</p>
</motion.div>
@@ -156,33 +156,33 @@ export const CaseStudyHighlight = () => {
className="bg-card rounded-[10px] overflow-hidden mb-12 group cursor-pointer hover:bg-card/80 hover:shadow-xl hover:scale-[1.01] transition-all duration-300 border border-transparent hover:border-accent/20"
onClick={() => navigate('/projects/woka')}
>
<div className="grid lg:grid-cols-3 gap-0">
<div className="grid gap-0 lg:grid-cols-3">
<div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
<ImageWithFallback
src={featuredCaseStudy.image}
alt="Woka educational platform mobile app interface with award recognition and interactive learning features for children"
className="w-full h-full object-contain object-center group-hover:scale-[1.02] transition-transform duration-700 rounded-[10px]"
/>
<div className="absolute top-6 left-6 z-10">
<div className="absolute z-10 top-6 left-6">
<span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
{featuredCaseStudy.achievement}
</span>
</div>
</div>
<div className="p-8 lg:p-12 flex flex-col justify-center">
<h3 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6 group-hover:text-accent transition-colors duration-300">
<div className="flex flex-col justify-center p-8 lg:p-12">
<h3 className="mb-6 text-3xl font-semibold transition-colors duration-300 lg:text-4xl text-foreground group-hover:text-accent">
{featuredCaseStudy.title}
</h3>
<p className="text-muted-foreground mb-8 leading-relaxed">
<p className="mb-8 leading-relaxed text-muted-foreground">
{featuredCaseStudy.description}
</p>
<div className="space-y-4 mb-8">
<div className="mb-8 space-y-4">
{featuredCaseStudy.metrics.map((metric) => (
<div key={metric.label} className="flex justify-between items-center">
<span className="text-muted-foreground text-sm">{metric.label}</span>
<span className="text-foreground font-semibold">{metric.value}</span>
<div key={metric.label} className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">{metric.label}</span>
<span className="font-semibold text-foreground">{metric.value}</span>
</div>
))}
</div>
@@ -199,7 +199,7 @@ export const CaseStudyHighlight = () => {
</div>
<button
className="text-accent font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-3 group-hover:translate-x-2 transition-transform duration-300"
className="flex items-center gap-3 font-medium transition-colors transition-transform duration-300 text-accent hover:text-foreground group-hover:translate-x-2"
onClick={(e) => {
e.stopPropagation();
navigate('/projects/woka');
@@ -211,7 +211,7 @@ export const CaseStudyHighlight = () => {
</div>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
<div className="grid gap-8 mb-12 md:grid-cols-2 lg:grid-cols-3">
{caseStudies.map((study, index) => (
<SmallCaseStudyCard key={study.title} study={study} index={index} />
))}

40
components/CaseStudySlider.tsx
View File

@@ -31,7 +31,7 @@ import niftyCase from "../src/images/niftyCase.webp";
import prospertyCase from "../src/images/prospertyCase.webp";
import ranoutofCase from "../src/images/ranoutof-case.webp";
import RrCase from "../src/images/resturant-reward-case.webp";
import seezunCase from "../src/images/seezun-case.webp";
// import seezunCase from "../src/images/seezun-case.webp";
import simplitendCase from "../src/images/simplitendCase.webp";
import tcCase from "../src/images/tc-case.webp";
import vib360Case from "../src/images/vib360Case.webp";
@@ -53,16 +53,16 @@ const defaultCaseStudies = [
link: "/projects/ranoutof",
icon: Package
},
{
id: 2,
title: "Seezun",
image: seezunCase,
category: "E-commerce",
industry: "Retail",
featured: true,
link: "/projects/seezun",
icon: ShoppingCart
},
// {
// id: 2,
// title: "Seezun",
// image: seezunCase,
// category: "E-commerce",
// industry: "Retail",
// featured: true,
// link: "/projects/seezun",
// icon: ShoppingCart
// },
{
id: 3,
title: "Woka",
@@ -267,7 +267,7 @@ export const CaseStudySlider = ({
onMouseLeave={() => setIsAutoPlaying(autoPlay)}
ref={containerRef}
>
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
{/* Header */}
<div className="flex items-center justify-end mb-8">
{caseStudies.length > visibleSlides && (
@@ -277,7 +277,7 @@ export const CaseStudySlider = ({
size="icon"
onClick={prevSlide}
disabled={currentIndex === 0}
className="h-10 w-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
>
<ChevronLeft className="w-5 h-5" />
</Button>
@@ -286,7 +286,7 @@ export const CaseStudySlider = ({
size="icon"
onClick={nextSlide}
disabled={currentIndex >= maxIndex}
className="h-10 w-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
className="w-10 h-10 rounded-full border-white/20 hover:border-accent/50 disabled:opacity-50"
>
<ChevronRight className="w-5 h-5" />
</Button>
@@ -330,19 +330,19 @@ export const CaseStudySlider = ({
className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-[full] cursor-pointer"
onClick={() => navigate(study.link)}
>
<CardContent className="p-0 h-full CardContentOverride">
<CardContent className="h-full p-0 CardContentOverride">
{/* Image */}
<div className="relative overflow-hidden">
<ImageWithFallback
src={study.image}
alt={study.title}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
{/* Category Badge */}
<div className="absolute top-2 left-4">
<Badge className="bg-accent/90 text-white border-0 text-xs">
<Badge className="text-xs text-white border-0 bg-accent/90">
{study.category}
</Badge>
</div>
@@ -350,7 +350,7 @@ export const CaseStudySlider = ({
{/* Featured Badge */}
{study.featured && (
<div className="absolute top-2 right-4">
<div className="bg-amber-500/90 text-white px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
<div className="flex items-center gap-1 px-2 py-1 text-xs font-medium text-white rounded-full bg-amber-500/90">
<Star className="w-3 h-3 fill-current" />
Featured
</div>
@@ -359,7 +359,7 @@ export const CaseStudySlider = ({
{/* Icon */}
<div className="absolute bottom-4 left-4">
<div className="w-10 h-10 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center">
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-white/20 backdrop-blur-md">
<IconComponent className="w-5 h-5 text-white" />
</div>
</div>
@@ -374,7 +374,7 @@ export const CaseStudySlider = ({
{/* Dots Indicator */}
{caseStudies.length > visibleSlides && (
<div className="flex justify-center items-center gap-2 mt-8">
<div className="flex items-center justify-center gap-2 mt-8">
{Array.from({ length: maxIndex + 1 }).map((_, index) => (
<button
key={index}

22
components/ClientLogos.tsx
View File

@@ -7,7 +7,7 @@ const companyLogos = [
{ name: "CloudNova Systems", logo: null, width: "140" },
{ name: "AMOZ", logo: null, width: "90" },
{ name: "SimpliTend", logo: null, width: "120" },
{ name: "Seezun", logo: null, width: "100" },
// { name: "Seezun", logo: null, width: "100" },
{ name: "TradersCircuit", logo: null, width: "140" },
{ name: "FreeU", logo: null, width: "90" },
{ name: "Amble", logo: null, width: "100" },
@@ -128,7 +128,7 @@ const ProjectImageCircles = () => (
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
viewport={{ once: true }}
className="flex justify-center items-center mb-12"
className="flex items-center justify-center mb-12"
>
<div className="flex items-center">
{countryFlags.map((flag, index) => (
@@ -154,9 +154,9 @@ const ProjectImageCircles = () => (
zIndex: countryFlags.length - index
}}
>
<div className="absolute inset-0 w-16 h-16 rounded-full bg-white/10 backdrop-blur-sm border-2 border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 transition-all duration-300 shadow-lg group-hover:shadow-xl flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl">
<div
className="w-10 h-8 flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300"
className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110"
role="img"
aria-label={flag.alt}
>
@@ -165,7 +165,7 @@ const ProjectImageCircles = () => (
</div>
{/* Subtle glow effect */}
<div className="absolute inset-0 w-16 h-16 rounded-full bg-gradient-to-br from-accent/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="absolute inset-0 w-16 h-16 transition-opacity duration-300 rounded-full opacity-0 bg-gradient-to-br from-accent/10 to-transparent group-hover:opacity-100"></div>
{/* Tooltip */}
<div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg border border-white/10 z-50">
@@ -182,10 +182,10 @@ const ProjectImageCircles = () => (
const LogoCard = ({ name, width }: { name: string; width: string }) => (
<div
className="flex items-center justify-center h-16 bg-white/8 rounded-xl border border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 transition-all duration-300 px-6 shadow-lg backdrop-blur-sm group"
className="flex items-center justify-center h-16 px-6 transition-all duration-300 border shadow-lg bg-white/8 rounded-xl border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 backdrop-blur-sm group"
style={{ minWidth: `${width}px` }}
>
<span className="text-white/80 font-medium text-sm text-center leading-tight group-hover:text-white/95 transition-colors duration-300">
<span className="text-sm font-medium leading-tight text-center transition-colors duration-300 text-white/80 group-hover:text-white/95">
{name}
</span>
</div>
@@ -204,7 +204,7 @@ const MarqueeRow = ({ logos }: { logos: typeof companyLogos }) => (
ease: "linear",
},
}}
className="flex gap-6 items-center"
className="flex items-center gap-6"
style={{
width: "fit-content",
}}
@@ -220,15 +220,15 @@ export const ClientLogos = () => {
<section className="relative py-20 bg-[#121212] border-y border-white/5 overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="relative z-10 container mx-auto px-6 lg:px-8">
<div className="container relative z-10 px-6 mx-auto 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-8"
className="mb-8 text-center"
>
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
<h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
Trusted by Founders and CTOs Across 15+ Countries
</h2>
</motion.div>

32
components/CountryFlags.tsx
View File

@@ -9,14 +9,14 @@ const foundersAndCTOs = [
flagEmoji: "🇮🇳",
projectType: "Care Management"
},
{
name: "Seezun",
title: "Fashion Marketplace",
country: "United Kingdom",
code: "GB",
flagEmoji: "🇬🇧",
projectType: "P2P Platform"
},
// {
// name: "Seezun",
// title: "Fashion Marketplace",
// country: "United Kingdom",
// code: "GB",
// flagEmoji: "🇬🇧",
// projectType: "P2P Platform"
// },
{
name: "AMOZ",
title: "E-commerce Platform",
@@ -132,7 +132,7 @@ export const CountryFlags = () => {
viewport={{ once: true }}
className="mb-12"
>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6 max-w-7xl mx-auto">
<div className="grid grid-cols-2 gap-6 mx-auto sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 max-w-7xl">
{foundersAndCTOs.map((project, index) => (
<motion.div
key={project.code + index}
@@ -149,12 +149,12 @@ export const CountryFlags = () => {
scale: 1.05,
transition: { duration: 0.2 }
}}
className="group cursor-pointer relative"
className="relative cursor-pointer group"
>
<div className="text-center">
{/* Flag Icon */}
<div className="flex justify-center mb-3">
<div className="w-14 h-14 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center group-hover:bg-white/20 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl">
<div className="flex items-center justify-center transition-all duration-300 border rounded-full shadow-lg w-14 h-14 bg-white/10 backdrop-blur-sm border-white/20 group-hover:bg-white/20 group-hover:border-accent/30 group-hover:shadow-xl">
<span className="text-2xl" role="img" aria-label={`${project.country} flag`}>
{project.flagEmoji}
</span>
@@ -163,10 +163,10 @@ export const CountryFlags = () => {
{/* Project Badge */}
<div className="bg-white/8 rounded-lg border border-white/10 px-3 py-2.5 group-hover:bg-white/12 group-hover:border-accent/30 transition-all duration-300 shadow-sm backdrop-blur-sm min-h-[60px] flex flex-col justify-center">
<div className="text-white/90 font-medium text-sm leading-tight mb-1 group-hover:text-white transition-colors duration-300">
<div className="mb-1 text-sm font-medium leading-tight transition-colors duration-300 text-white/90 group-hover:text-white">
{project.name}
</div>
<div className="text-white/60 text-xs leading-tight">
<div className="text-xs leading-tight text-white/60">
{project.projectType}
</div>
</div>
@@ -174,9 +174,9 @@ export const CountryFlags = () => {
{/* Enhanced Tooltip */}
<div className="absolute -top-24 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-4 py-3 rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-300 whitespace-nowrap pointer-events-none shadow-xl border border-white/20 z-50 backdrop-blur-md">
<div className="text-center">
<div className="font-semibold text-accent mb-1">{project.name}</div>
<div className="text-white/80 mb-1">{project.title}</div>
<div className="text-white/60 flex items-center gap-1 justify-center">
<div className="mb-1 font-semibold text-accent">{project.name}</div>
<div className="mb-1 text-white/80">{project.title}</div>
<div className="flex items-center justify-center gap-1 text-white/60">
<span>{project.flagEmoji}</span>
<span>{project.country}</span>
</div>

206
components/FeaturedCaseStudies.tsx
View File

@@ -4,12 +4,12 @@ import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { Card, CardContent } from "./ui/card";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import {
ArrowRight,
TrendingUp,
Users,
Zap,
Eye,
import {
ArrowRight,
TrendingUp,
Users,
Zap,
Eye,
ShoppingCart,
Heart,
Star,
@@ -26,7 +26,7 @@ import {
PieChart
} from "lucide-react";
import ranoutofLocalImage from '../src/images/ranoutof.webp';
import seezunLocalImage from '../src/images/seezun.webp';
// import seezunLocalImage from '../src/images/seezun.webp';
import simpletendLocalImage from '../src/images/simplitend.webp';
import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
@@ -52,22 +52,22 @@ const FeaturedCaseStudies = () => {
accentColor: "blue",
featured: true
},
{
id: 2,
title: "Seezun",
client: "Seezun",
description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
keyAchievement: {
number: "85%",
metric: "Brand Recognition",
icon: TrendingUp
},
visual: seezunLocalImage,
tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
gradient: "from-purple-500/20 to-pink-500/20",
accentColor: "purple",
featured: false
},
// {
// id: 2,
// title: "Seezun",
// client: "Seezun",
// description: "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
// keyAchievement: {
// number: "85%",
// metric: "Brand Recognition",
// icon: TrendingUp
// },
// visual: seezunLocalImage,
// tags: ["Marketplace", "P2P", "Fashion", "Mobile & Web"],
// gradient: "from-purple-500/20 to-pink-500/20",
// accentColor: "purple",
// featured: false
// },
{
id: 3,
title: "WOKA",
@@ -157,14 +157,14 @@ const FeaturedCaseStudies = () => {
return (
<section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
{/* Section Header */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center mb-16"
className="mb-16 text-center"
>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -174,26 +174,26 @@ const FeaturedCaseStudies = () => {
className="mb-6"
>
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
<div className="flex items-center gap-2 px-6 py-3 bg-black rounded-full">
<Star className="w-5 h-5 text-accent" />
<span className="text-white text-base font-medium">Featured Work</span>
<span className="text-base font-medium text-white">Featured Work</span>
</div>
</div>
</motion.div>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Featured Success Stories
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
Discover how we've helped companies across industries achieve remarkable results with our innovative development solutions.
</p>
</motion.div>
{/* Case Studies Grid - Consistent Dimensions */}
<div className="grid lg:grid-cols-3 gap-8 items-stretch">
<div className="grid items-stretch gap-8 lg:grid-cols-3">
{caseStudies.map((study, index) => {
const AchievementIcon = study.keyAchievement.icon;
return (
<motion.div
key={study.id}
@@ -201,16 +201,18 @@ const FeaturedCaseStudies = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.2 }}
viewport={{ once: true }}
className="group h-full"
className="h-full group"
>
<Card
<Card
className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
onClick={() => {
if (study.title === 'Seezun') {
navigate('/projects/seezun');
} else if (study.title === 'WOKA') {
if (study.title === 'WOKA') {
navigate('/projects/woka');
} else if (study.title === 'Tanami') {
}
// else if (study.title === 'Seezun') {
// navigate('/projects/seezun');
// }
else if (study.title === 'Tanami') {
navigate('/projects/tanami');
} else {
navigate('/case-studies');
@@ -220,20 +222,20 @@ const FeaturedCaseStudies = () => {
<CardContent className="p-0 flex flex-col h-full min-h-[600px]">
{/* Visual Section - Fixed Height */}
<div className="relative overflow-hidden">
<div className="relative h-64 w-full">
<div className="relative w-full h-64">
<ImageWithFallback
src={study.visual}
alt={study.title}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
/>
{/* Overlay with gradient */}
<div className={`absolute inset-0 bg-gradient-to-t ${study.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />
{/* Featured Badge */}
{study.featured && (
<div className="absolute top-4 left-4">
<Badge className="bg-accent text-white shadow-lg">
<Badge className="text-white shadow-lg bg-accent">
<Star className="w-3 h-3 mr-1" />
Featured
</Badge>
@@ -244,22 +246,21 @@ const FeaturedCaseStudies = () => {
<div className="absolute bottom-4 left-4 right-4">
<motion.div
whileHover={{ scale: 1.05 }}
className="bg-black/80 backdrop-blur-md rounded-xl p-4 border border-white/10"
className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
>
<div className="flex items-center gap-3">
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}>
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}>
<AchievementIcon className="w-5 h-5 text-white" />
</div>
<div className="min-w-0 flex-1">
<div className="flex-1 min-w-0">
<div className="text-2xl font-bold text-white">{study.keyAchievement.number}</div>
<div className="text-sm text-gray-300 leading-tight">{study.keyAchievement.metric}</div>
<div className="text-sm leading-tight text-gray-300">{study.keyAchievement.metric}</div>
</div>
</div>
</motion.div>
@@ -272,15 +273,15 @@ const FeaturedCaseStudies = () => {
<div className="flex-1">
{/* Project Title - Consistent Height */}
<div className="mb-4 min-h-[60px] flex items-start">
<h3 className="text-xl font-semibold text-white leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
<h3 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
{study.title}
</h3>
</div>
{/* Client & Description - Consistent Height */}
<div className="mb-6 min-h-[100px]">
<div className="text-accent font-medium text-sm mb-2">{study.client}</div>
<p className="text-gray-300 text-sm leading-relaxed line-clamp-4">
<div className="mb-2 text-sm font-medium text-accent">{study.client}</div>
<p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
{study.description}
</p>
</div>
@@ -289,10 +290,10 @@ const FeaturedCaseStudies = () => {
<div className="mb-6 min-h-[32px]">
<div className="flex flex-wrap gap-2">
{study.tags.map((tag) => (
<Badge
key={tag}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
<Badge
key={tag}
variant="secondary"
className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
>
{tag}
</Badge>
@@ -304,15 +305,17 @@ const FeaturedCaseStudies = () => {
{/* CTA Button - Fixed at Bottom */}
<div className="mt-auto">
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
<Button
className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
<Button
className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
onClick={(e) => {
e.stopPropagation();
if (study.title === 'Seezun') {
navigate('/projects/seezun');
} else if (study.title === 'WOKA') {
if (study.title === 'WOKA') {
navigate('/projects/woka');
} else if (study.title === 'Tanami') {
}
// else if (study.title === 'Seezun') {
// navigate('/projects/seezun');
// }
else if (study.title === 'Tanami') {
navigate('/projects/tanami');
} else {
navigate('/case-studies');
@@ -320,7 +323,7 @@ const FeaturedCaseStudies = () => {
}}
>
<span>View Full Case Study</span>
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
<ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
</Button>
</motion.div>
</div>
@@ -340,14 +343,14 @@ const FeaturedCaseStudies = () => {
viewport={{ once: true }}
className="mt-20 mb-16"
>
<h3 className="text-3xl lg:text-4xl font-semibold text-white mb-12 text-center">
<h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl">
More Success Stories
</h3>
<div className="grid lg:grid-cols-3 gap-8 items-stretch">
<div className="grid items-stretch gap-8 lg:grid-cols-3">
{moreSuccessStories.map((story, index) => {
const AchievementIcon = story.keyAchievement.icon;
return (
<motion.div
key={story.id}
@@ -355,9 +358,9 @@ const FeaturedCaseStudies = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.01 }}
viewport={{ once: true }}
className="group h-full"
className="h-full group"
>
<Card
<Card
className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
onClick={() => {
if (story.title === 'TradersCircuit') {
@@ -376,36 +379,35 @@ const FeaturedCaseStudies = () => {
<CardContent className="p-0 flex flex-col h-full min-h-[600px]">
{/* Visual Section - Fixed Height */}
<div className="relative overflow-hidden">
<div className="relative h-64 w-full">
<div className="relative w-full h-64">
<ImageWithFallback
src={story.visual}
alt={`${story.title} - ${story.client}`}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
className="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
/>
{/* Overlay with gradient */}
<div className={`absolute inset-0 bg-gradient-to-t ${story.gradient} opacity-20 group-hover:opacity-40 transition-opacity duration-500`} />
{/* Key Achievement - Overlaid on Visual */}
<div className="absolute bottom-4 left-4 right-4">
<motion.div
whileHover={{ scale: 1.05 }}
className="bg-black/80 backdrop-blur-md rounded-xl p-4 border border-white/10"
className="p-4 border bg-black/80 backdrop-blur-md rounded-xl border-white/10"
>
<div className="flex items-center gap-3">
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}>
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}>
<AchievementIcon className="w-5 h-5 text-white" />
</div>
<div className="min-w-0 flex-1">
<div className="flex-1 min-w-0">
<div className="text-2xl font-bold text-white">{story.keyAchievement.number}</div>
<div className="text-sm text-gray-300 leading-tight">{story.keyAchievement.metric}</div>
<div className="text-sm leading-tight text-gray-300">{story.keyAchievement.metric}</div>
</div>
</div>
</motion.div>
@@ -418,15 +420,15 @@ const FeaturedCaseStudies = () => {
<div className="flex-1">
{/* Project Title - Consistent Height */}
<div className="mb-4 min-h-[60px] flex items-start">
<h4 className="text-xl font-semibold text-white leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
<h4 className="text-xl font-semibold leading-tight text-white transition-colors duration-300 group-hover:text-accent line-clamp-2">
{story.title}
</h4>
</div>
{/* Client & Description - Consistent Height */}
<div className="mb-6 min-h-[100px]">
<div className="text-accent font-medium text-sm mb-2">{story.client}</div>
<p className="text-gray-300 text-sm leading-relaxed line-clamp-4">
<div className="mb-2 text-sm font-medium text-accent">{story.client}</div>
<p className="text-sm leading-relaxed text-gray-300 line-clamp-4">
{story.description}
</p>
</div>
@@ -435,10 +437,10 @@ const FeaturedCaseStudies = () => {
<div className="mb-6 min-h-[32px]">
<div className="flex flex-wrap gap-2">
{story.tags.map((tag) => (
<Badge
key={tag}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
<Badge
key={tag}
variant="secondary"
className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
>
{tag}
</Badge>
@@ -450,8 +452,8 @@ const FeaturedCaseStudies = () => {
{/* CTA Button - Fixed at Bottom */}
<div className="mt-auto">
<motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
<Button
className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
<Button
className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
onClick={(e) => {
e.stopPropagation();
if (story.title === 'TradersCircuit') {
@@ -468,7 +470,7 @@ const FeaturedCaseStudies = () => {
}}
>
<span>View Full Case Study</span>
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
<ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
</Button>
</motion.div>
</div>
@@ -487,12 +489,12 @@ const FeaturedCaseStudies = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
viewport={{ once: true }}
className="text-center mt-16"
className="mt-16 text-center"
>
<Button
variant="outline"
<Button
variant="outline"
size="lg"
className="border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white hover:border-accent/50 transition-all duration-300"
className="text-gray-300 transition-all duration-300 border-gray-600 hover:bg-gray-800 hover:text-white hover:border-accent/50"
>
<Eye className="w-5 h-5 mr-2" />
View All Case Studies

2
fix-figma-imports.md
View File

@@ -40,7 +40,7 @@ const clutchLogo = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=
- `pages/iOSAppDevelopment.tsx`
- `pages/TanamiProject.tsx`
- `components/CaseStudyHighlight.tsx`
- `pages/SeezunProject.tsx`
<!-- - `pages/SeezunProject.tsx` -->
- `pages/WokaProject.tsx`
- `pages/RanOutOfProject.tsx`
- `imports/Group1597880681.tsx`

8
install-and-run.md
View File

@@ -29,12 +29,12 @@ Replace the imports in `components/CaseStudyHighlight.tsx`:
```tsx
// OLD:
import regroupImage from "figma:asset/92c9546d073e10bfa567559041d8b7e5b0d84ce7.png";
import seezunImage from "figma:asset/06e3cfb0c62c4da1116eaa2ecf65c8d2c54cf50a.png";
// import seezunImage from "figma:asset/06e3cfb0c62c4da1116eaa2ecf65c8d2c54cf50a.png";
import wokaAwardImage from "figma:asset/91ae572d9f4dbf6bf5424e541b65db8087a129ff.png";
// NEW:
const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
// const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";
```
@@ -48,7 +48,7 @@ If you're on Windows, you can run this PowerShell script to fix all files at onc
# Fix CaseStudyHighlight.tsx
$content = Get-Content "components/CaseStudyHighlight.tsx"
$content = $content -replace 'import regroupImage from "figma:asset/[^"]+";', 'const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";'
$content = $content -replace 'import seezunImage from "figma:asset/[^"]+";', 'const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";'
# $content = $content -replace 'import seezunImage from "figma:asset/[^"]+";', 'const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";'
$content = $content -replace 'import wokaAwardImage from "figma:asset/[^"]+";', 'const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";'
$content | Set-Content "components/CaseStudyHighlight.tsx"
```
@@ -60,7 +60,7 @@ sed -i 's/import clutchLogo from "figma:asset\/[^"]*";/const clutchLogo = "https
# Fix CaseStudyHighlight.tsx
sed -i 's/import regroupImage from "figma:asset\/[^"]*";/const regroupImage = "https:\/\/images.unsplash.com\/photo-1551650975-87deedd944c3?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
sed -i 's/import seezunImage from "figma:asset\/[^"]*";/const seezunImage = "https:\/\/images.unsplash.com\/photo-1512941937669-90a1b58e7e9c?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
# sed -i 's/import seezunImage from "figma:asset\/[^"]*";/const seezunImage = "https:\/\/images.unsplash.com\/photo-1512941937669-90a1b58e7e9c?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
sed -i 's/import wokaAwardImage from "figma:asset\/[^"]*";/const wokaAwardImage = "https:\/\/images.unsplash.com\/photo-1517077304055-6e89abbf09b0?w=600\&h=400\&fit=crop\&auto=format";/' components/CaseStudyHighlight.tsx
```

70
pages/CaseStudies.tsx
View File

@@ -32,7 +32,7 @@ import { Input } from "../components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import ambleCase from "../src/images/amble-case.webp";
import ranoutofCase from "../src/images/ranoutof-case.webp";
import seezunCase from "../src/images/seezun-case.webp";
// import seezunCase from "../src/images/seezun-case.webp";
import tcCase from "../src/images/tc-case.webp";
import wokaCase from "../src/images/woka-case.webp";
import gtCase from "../src/images/gt-case.webp";
@@ -59,16 +59,16 @@ const caseStudies = [
link: "/projects/ranoutof",
icon: Package
},
{
id: 2,
title: "Seezun",
image: seezunCase,
category: "E-commerce",
industry: "Retail",
featured: true,
link: "/projects/seezun",
icon: ShoppingCart
},
// {
// id: 2,
// title: "Seezun",
// image: seezunCase,
// category: "E-commerce",
// industry: "Retail",
// featured: true,
// link: "/projects/seezun",
// icon: ShoppingCart
// },
{
id: 3,
title: "Woka",
@@ -234,7 +234,7 @@ export const CaseStudies = () => {
const navigate = useNavigate();
return (
<div className="dark min-h-screen bg-background">
<div className="min-h-screen dark bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
@@ -292,17 +292,17 @@ export const CaseStudies = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="relative container mx-auto px-6 lg:px-8"
className="container relative px-6 mx-auto lg:px-8"
>
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-accent/20 text-accent">
Our Success Stories
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-semibold leading-tight mb-6">
<h1 className="mb-6 text-4xl font-semibold leading-tight md:text-6xl lg:text-7xl">
<span className="text-white">Portfolios That </span>
<span className="text-accent">Define Excellence</span>
</h1>
<p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
Explore our portfolio of award-winning projects that have transformed businesses and delighted millions of users across diverse industries.
</p>
</div>
@@ -310,18 +310,18 @@ export const CaseStudies = () => {
</section>
{/* Filters Section */}
<section className="py-12 bg-background border-b border-white/10">
<div className="container mx-auto px-6 lg:px-8">
<section className="py-12 border-b bg-background border-white/10">
<div className="container px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="max-w-6xl mx-auto"
>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
<div className="grid items-end grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
{/* Search */}
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Search className="absolute w-4 h-4 transform -translate-y-1/2 left-3 top-1/2 text-muted-foreground" />
<Input
placeholder="Search portfolios..."
value={searchTerm}
@@ -381,9 +381,9 @@ export const CaseStudies = () => {
{/* Case Studies Grid */}
<section className="py-20 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="container px-6 mx-auto lg:px-8">
<div className="mx-auto max-w-7xl">
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{filteredCaseStudies.map((study, index) => {
const IconComponent = study.icon;
return (
@@ -394,28 +394,28 @@ export const CaseStudies = () => {
transition={{ duration: 0.6, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
className="cursor-pointer group"
onClick={() => navigate(study.link)}
>
<Card className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-full"
<Card className="h-full overflow-hidden transition-all duration-500 shadow-lg bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-2xl hover:shadow-accent/10 rounded-2xl"
onClick={(e) => {
e.stopPropagation();
navigate(study.link);
}}
>
<CardContent className="CardContentOverride p-0 pb-0 h-full">
<CardContent className="h-full p-0 pb-0 CardContentOverride">
{/* Image Header */}
<div className="relative overflow-hidden">
<ImageWithFallback
src={study.image}
alt={study.title}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
{/* Category Badge */}
<div className="absolute top-2 left-4">
<Badge className="bg-accent/90 text-white border-0">
<Badge className="text-white border-0 bg-accent/90">
{study.category}
</Badge>
</div>
@@ -423,7 +423,7 @@ export const CaseStudies = () => {
{/* Featured Badge */}
{study.featured && (
<div className="absolute top-2 right-4">
<div className="bg-amber-500/90 text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1">
<div className="flex items-center gap-1 px-3 py-1 text-xs font-medium text-white rounded-full bg-amber-500/90">
<Star className="w-3 h-3 fill-current" />
Featured
</div>
@@ -432,7 +432,7 @@ export const CaseStudies = () => {
{/* Icon Overlay */}
<div className="absolute bottom-4 left-4">
<div className="w-12 h-12 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 rounded-full bg-white/20 backdrop-blur-md">
<IconComponent className="w-6 h-6 text-white" />
</div>
</div>
@@ -449,24 +449,24 @@ export const CaseStudies = () => {
{/* CTA Section */}
<section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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 max-w-4xl mx-auto"
className="max-w-4xl mx-auto text-center"
>
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
<h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
Ready to Create Your Own Success Story?
</h2>
<p className="text-xl text-gray-300 leading-relaxed mb-8">
<p className="mb-8 text-xl leading-relaxed text-gray-300">
Join the ranks of industry leaders who have transformed their businesses with our innovative solutions.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<div className="flex flex-col justify-center gap-4 sm:flex-row">
<Button
size="lg"
className="bg-accent hover:bg-accent/90 text-white"
className="text-white bg-accent hover:bg-accent/90"
onClick={() => navigate("/start-a-project")}
>
Start Your Project

336
pages/CrossPlatformAppDevelopment.tsx
View File

@@ -44,7 +44,7 @@ import {
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 seezunImage from "../src/images/seezun.webp";
import regroupImage from "../src/images/regroup.webp";
import awsLogoImage from "../src/images/aws-logo.png";
@@ -100,7 +100,7 @@ const CrossPlatformHeroWithCTA = () => {
`}
</script>
</Helmet>
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
<motion.div
initial={{ opacity: 0, x: -50 }}
@@ -114,18 +114,18 @@ const CrossPlatformHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">
<span className="text-sm font-medium text-white/70">
Cross-Platform App Development
</span>
</motion.div>
{/* Main Heading */}
<div className="space-y-6">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
<h1 className="text-4xl font-semibold leading-tight text-white md:text-5xl lg:text-6xl">
Efficient Cross-Platform App Development
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
Develop high-quality mobile apps that run seamlessly on iOS and
Android from a single codebase, saving time and resources.
</p>
@@ -136,22 +136,22 @@ const CrossPlatformHeroWithCTA = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
className="flex flex-col gap-4 sm:flex-row"
>
<ShimmerButton
className="text-lg px-8 py-4"
className="px-8 py-4 text-lg"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Share2 className="w-5 h-5 flex-shrink-0" />
<Share2 className="flex-shrink-0 w-5 h-5" />
<span>Discover Cross-Platform Benefits</span>
</div>
</ShimmerButton>
<a
href="#quote"
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-medium text-white transition bg-gray-800 rounded-md hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
>
<MessageSquare className="w-4 h-4 flex-shrink-0" />
<MessageSquare className="flex-shrink-0 w-4 h-4" />
<span>Request a Quote</span>
</a>
</motion.div>
@@ -175,20 +175,20 @@ const CrossPlatformHeroWithCTA = () => {
{/* Overlapping iOS and Android phones */}
<div className="relative">
{/* iOS-style phone (left) */}
<div className="absolute -left-8 top-4 w-44 h-64 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl transform -rotate-6">
<div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
<div className="absolute h-64 transform border border-gray-700 shadow-2xl -left-8 top-4 w-44 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl -rotate-6">
<div className="flex items-center justify-center w-full h-8 bg-gray-700 rounded-t-3xl">
<div className="w-12 h-1 bg-gray-600 rounded-full"></div>
</div>
<div className="p-4 space-y-3">
<div className="h-3 bg-accent rounded"></div>
<div className="h-2 bg-gray-600 rounded w-4/5"></div>
<div className="h-2 bg-gray-600 rounded w-3/5"></div>
<div className="h-3 rounded bg-accent"></div>
<div className="w-4/5 h-2 bg-gray-600 rounded"></div>
<div className="w-3/5 h-2 bg-gray-600 rounded"></div>
<div className="grid grid-cols-2 gap-2 mt-4">
<div className="h-8 bg-gray-700 rounded-lg"></div>
<div className="h-8 bg-gray-700 rounded-lg"></div>
</div>
<div className="h-12 bg-blue-500/20 rounded-lg mt-4 flex items-center justify-center">
<span className="text-xs text-blue-400 font-medium">
<div className="flex items-center justify-center h-12 mt-4 rounded-lg bg-blue-500/20">
<span className="text-xs font-medium text-blue-400">
iOS
</span>
</div>
@@ -196,20 +196,20 @@ const CrossPlatformHeroWithCTA = () => {
</div>
{/* Android-style phone (right) */}
<div className="absolute right-8 top-8 w-44 h-64 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl transform rotate-6">
<div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
<div className="absolute h-64 transform border border-gray-700 shadow-2xl right-8 top-8 w-44 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl rotate-6">
<div className="flex items-center justify-center w-full h-8 bg-gray-700 rounded-t-3xl">
<div className="w-12 h-1 bg-gray-600 rounded-full"></div>
</div>
<div className="p-4 space-y-3">
<div className="h-3 bg-accent rounded"></div>
<div className="h-2 bg-gray-600 rounded w-4/5"></div>
<div className="h-2 bg-gray-600 rounded w-3/5"></div>
<div className="h-3 rounded bg-accent"></div>
<div className="w-4/5 h-2 bg-gray-600 rounded"></div>
<div className="w-3/5 h-2 bg-gray-600 rounded"></div>
<div className="grid grid-cols-2 gap-2 mt-4">
<div className="h-8 bg-gray-700 rounded-lg"></div>
<div className="h-8 bg-gray-700 rounded-lg"></div>
</div>
<div className="h-12 bg-green-500/20 rounded-lg mt-4 flex items-center justify-center">
<span className="text-xs text-green-400 font-medium">
<div className="flex items-center justify-center h-12 mt-4 rounded-lg bg-green-500/20">
<span className="text-xs font-medium text-green-400">
Android
</span>
</div>
@@ -217,7 +217,7 @@ const CrossPlatformHeroWithCTA = () => {
</div>
{/* Central connection indicator */}
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-accent/20 rounded-full border-2 border-accent/30 flex items-center justify-center backdrop-blur-sm">
<div className="absolute flex items-center justify-center w-16 h-16 transform -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 bg-accent/20 border-accent/30 backdrop-blur-sm">
<GitMerge className="w-8 h-8 text-accent" />
</div>
</div>
@@ -228,11 +228,11 @@ const CrossPlatformHeroWithCTA = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="flex justify-center gap-4 flex-wrap"
className="flex flex-wrap justify-center gap-4"
>
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
className="text-blue-300 bg-blue-500/20 border-blue-500/30"
>
Flutter
</Badge>
@@ -244,7 +244,7 @@ const CrossPlatformHeroWithCTA = () => {
</Badge>
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
className="text-purple-300 bg-purple-500/20 border-purple-500/30"
>
Single Codebase
</Badge>
@@ -294,18 +294,18 @@ const CrossPlatformBenefits = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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-16"
className="mb-16 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
Advantages of Choosing Cross-Platform
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Cross-platform development offers unparalleled efficiency and reach
for businesses looking to maximize their mobile app impact.
</p>
@@ -316,7 +316,7 @@ const CrossPlatformBenefits = () => {
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 max-w-6xl mx-auto"
className="grid max-w-6xl gap-8 mx-auto md:grid-cols-2 lg:grid-cols-3"
>
{benefits.slice(0, 3).map((benefit, index) => {
const IconComponent = benefit.icon;
@@ -330,15 +330,15 @@ const CrossPlatformBenefits = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
<IconComponent className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{benefit.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{benefit.description}
</p>
</CardContent>
@@ -354,7 +354,7 @@ const CrossPlatformBenefits = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
className="grid max-w-4xl gap-8 mx-auto mt-8 md:grid-cols-2"
>
{benefits.slice(3).map((benefit, index) => {
const IconComponent = benefit.icon;
@@ -368,15 +368,15 @@ const CrossPlatformBenefits = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
<IconComponent className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{benefit.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{benefit.description}
</p>
</CardContent>
@@ -394,18 +394,18 @@ const CrossPlatformBenefits = () => {
const CrossPlatformTechnologies = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Leading Cross-Platform Frameworks We Utilize
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
We leverage the most powerful and mature cross-platform frameworks
to deliver exceptional mobile experiences.
</p>
@@ -418,22 +418,22 @@ const CrossPlatformTechnologies = () => {
viewport={{ once: true }}
>
<Tabs defaultValue="flutter" className="max-w-6xl mx-auto">
<TabsList className="grid w-full grid-cols-2 mb-12 bg-gray-900/50 border border-gray-800 h-17">
<TabsTrigger value="flutter" className="text-base py-4 h-full">
<TabsList className="grid w-full grid-cols-2 mb-12 border border-gray-800 bg-gray-900/50 h-17">
<TabsTrigger value="flutter" className="h-full py-4 text-base">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-blue-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">F</span>
<div className="flex items-center justify-center w-6 h-6 bg-blue-500 rounded">
<span className="text-xs font-bold text-white">F</span>
</div>
Flutter Development
</div>
</TabsTrigger>
<TabsTrigger
value="react-native"
className="text-base py-4 h-full"
className="h-full py-4 text-base"
>
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-cyan-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">RN</span>
<div className="flex items-center justify-center w-6 h-6 rounded bg-cyan-500">
<span className="text-xs font-bold text-white">RN</span>
</div>
React Native Development
</div>
@@ -441,13 +441,13 @@ const CrossPlatformTechnologies = () => {
</TabsList>
<TabsContent value="flutter" className="mt-0">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="grid items-center gap-16 lg:grid-cols-2">
<div className="space-y-8">
<div className="space-y-6">
<div className="flex items-center gap-4">
<div className="w-16 h-16 bg-blue-500/20 rounded-2xl flex items-center justify-center">
<div className="w-8 h-8 bg-blue-500 rounded flex items-center justify-center">
<span className="text-white font-bold">F</span>
<div className="flex items-center justify-center w-16 h-16 bg-blue-500/20 rounded-2xl">
<div className="flex items-center justify-center w-8 h-8 bg-blue-500 rounded">
<span className="font-bold text-white">F</span>
</div>
</div>
<div>
@@ -460,7 +460,7 @@ const CrossPlatformTechnologies = () => {
</div>
</div>
<p className="text-gray-300 leading-relaxed">
<p className="leading-relaxed text-gray-300">
Known for expressive UIs and hot-reload functionality that
accelerates development cycles. Flutter allows for
pixel-perfect designs and smooth animations across
@@ -484,7 +484,7 @@ const CrossPlatformTechnologies = () => {
key={index}
className="flex items-center gap-3 text-gray-300"
>
<CheckCircle className="w-5 h-5 text-blue-500 flex-shrink-0" />
<CheckCircle className="flex-shrink-0 w-5 h-5 text-blue-500" />
{benefit}
</li>
))}
@@ -492,10 +492,10 @@ const CrossPlatformTechnologies = () => {
</div>
</div>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8">
<div className="p-8 border border-gray-800 bg-gray-900/50 backdrop-blur-md rounded-2xl">
<div className="space-y-6">
<div className="flex items-center gap-4 mb-6">
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 bg-blue-500/20 rounded-xl">
<Code className="w-6 h-6 text-blue-500" />
</div>
<h4 className="text-lg font-semibold text-white">
@@ -514,9 +514,9 @@ const CrossPlatformTechnologies = () => {
].map((tech, index) => (
<div
key={index}
className="bg-gray-800/50 rounded-lg p-3 text-center"
className="p-3 text-center rounded-lg bg-gray-800/50"
>
<span className="text-gray-300 text-sm">{tech}</span>
<span className="text-sm text-gray-300">{tech}</span>
</div>
))}
</div>
@@ -526,13 +526,13 @@ const CrossPlatformTechnologies = () => {
</TabsContent>
<TabsContent value="react-native" className="mt-0">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="grid items-center gap-16 lg:grid-cols-2">
<div className="space-y-8">
<div className="space-y-6">
<div className="flex items-center gap-4">
<div className="w-16 h-16 bg-cyan-500/20 rounded-2xl flex items-center justify-center">
<div className="w-8 h-8 bg-cyan-500 rounded flex items-center justify-center">
<span className="text-white font-bold">RN</span>
<div className="flex items-center justify-center w-16 h-16 bg-cyan-500/20 rounded-2xl">
<div className="flex items-center justify-center w-8 h-8 rounded bg-cyan-500">
<span className="font-bold text-white">RN</span>
</div>
</div>
<div>
@@ -545,7 +545,7 @@ const CrossPlatformTechnologies = () => {
</div>
</div>
<p className="text-gray-300 leading-relaxed">
<p className="leading-relaxed text-gray-300">
Uses JavaScript and React paradigms to create truly native
mobile applications. Leverages existing web development
skills for mobile app creation.
@@ -568,7 +568,7 @@ const CrossPlatformTechnologies = () => {
key={index}
className="flex items-center gap-3 text-gray-300"
>
<CheckCircle className="w-5 h-5 text-cyan-500 flex-shrink-0" />
<CheckCircle className="flex-shrink-0 w-5 h-5 text-cyan-500" />
{benefit}
</li>
))}
@@ -576,10 +576,10 @@ const CrossPlatformTechnologies = () => {
</div>
</div>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8">
<div className="p-8 border border-gray-800 bg-gray-900/50 backdrop-blur-md rounded-2xl">
<div className="space-y-6">
<div className="flex items-center gap-4 mb-6">
<div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 bg-cyan-500/20 rounded-xl">
<Code className="w-6 h-6 text-cyan-500" />
</div>
<h4 className="text-lg font-semibold text-white">
@@ -598,9 +598,9 @@ const CrossPlatformTechnologies = () => {
].map((tech, index) => (
<div
key={index}
className="bg-gray-800/50 rounded-lg p-3 text-center"
className="p-3 text-center rounded-lg bg-gray-800/50"
>
<span className="text-gray-300 text-sm">{tech}</span>
<span className="text-sm text-gray-300">{tech}</span>
</div>
))}
</div>
@@ -652,18 +652,18 @@ const CrossPlatformProcess = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
Streamlined Process for Cross-Platform Success
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Our proven methodology ensures efficient development and deployment
across multiple platforms.
</p>
@@ -692,26 +692,26 @@ const CrossPlatformProcess = () => {
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 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">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<div className="p-8 transition-all duration-300 border shadow-lg bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl">
<div className="flex items-center justify-center gap-4 mb-4 lg:justify-start">
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-2xl font-semibold text-foreground">
{step.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{step.description}
</p>
</div>
</div>
{/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
<div className="z-10 hidden w-4 h-4 border-4 rounded-full bg-accent border-background lg:block"></div>
<div className="flex-1 hidden lg:block"></div>
</motion.div>
@@ -767,18 +767,18 @@ const CrossPlatformServices = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Our Comprehensive Cross-Platform Solutions
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
From new development to migration and ongoing support, we provide
end-to-end cross-platform services.
</p>
@@ -789,7 +789,7 @@ const CrossPlatformServices = () => {
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"
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
>
{services.map((service, index) => {
const IconComponent = service.icon;
@@ -803,15 +803,15 @@ const CrossPlatformServices = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
<div className="flex items-center justify-center w-12 h-12 mb-6 rounded-lg bg-accent/20">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<h3 className="text-xl font-semibold text-white mb-4">
<h3 className="mb-4 text-xl font-semibold text-white">
{service.title}
</h3>
<p className="text-gray-300 leading-relaxed">
<p className="leading-relaxed text-gray-300">
{service.description}
</p>
</CardContent>
@@ -839,16 +839,16 @@ const CrossPlatformCaseStudies = () => {
gradient: "from-[#007F33]/20 to-[#007F33]/10",
buttonLink: "/projects/ranoutof",
},
{
title: "E-commerce Platform Innovation",
client: "Seezun",
description:
"Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
image: seezunImage,
results: "800K+ users",
gradient: "from-blue-500/20 to-cyan-500/20",
buttonLink: "/projects/seezun",
},
// {
// title: "E-commerce Platform Innovation",
// client: "Seezun",
// description:
// "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
// image: seezunImage,
// results: "800K+ users",
// gradient: "from-blue-500/20 to-cyan-500/20",
// buttonLink: "/projects/seezun",
// },
{
title: "Social Networking Platform",
client: "Regroup",
@@ -863,18 +863,18 @@ const CrossPlatformCaseStudies = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
Android Apps That Define Industries
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Discover how we've helped businesses succeed with powerful Android
applications that leverage the platform's capabilities.
</p>
@@ -885,7 +885,7 @@ const CrossPlatformCaseStudies = () => {
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"
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
>
{caseStudies.map((study, index) => (
<motion.div
@@ -895,13 +895,13 @@ const CrossPlatformCaseStudies = () => {
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
className="cursor-pointer group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
<CardContent className="p-0 flex flex-col h-full">
<Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="flex flex-col h-full p-0">
<div className="p-8 pb-6">
<div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
<svg
className="w-6 h-6 text-accent"
viewBox="0 0 24 24"
@@ -911,7 +911,7 @@ const CrossPlatformCaseStudies = () => {
</svg>
</div>
<div className="flex-1">
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
<div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
{study.client}
</div>
<Badge
@@ -928,20 +928,20 @@ const CrossPlatformCaseStudies = () => {
</h3>
</div>
<div className="px-8 pb-6 flex-1">
<div className="flex-1 px-8 pb-6">
<div
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
>
<ImageWithFallback
src={study.image}
alt={study.title}
className="w-full h-48 object-cover rounded-lg shadow-lg"
className="object-cover w-full h-48 rounded-lg shadow-lg"
/>
</div>
</div>
<div className="px-8 pb-6">
<p className="text-muted-foreground text-sm leading-relaxed">
<p className="text-sm leading-relaxed text-muted-foreground">
{study.description}
</p>
</div>
@@ -950,7 +950,7 @@ const CrossPlatformCaseStudies = () => {
<Button
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"
className="justify-between w-full transition-all duration-300 text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1"
onClick={() => navigate(study.buttonLink)}
>
<span className="text-sm font-medium">
@@ -974,13 +974,13 @@ const CrossPlatformInlineCTA = () => {
const navigate = useNavigate();
return (
<section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center max-w-4xl mx-auto"
className="max-w-4xl mx-auto text-center"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -990,30 +990,30 @@ const CrossPlatformInlineCTA = () => {
className="space-y-8"
>
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
<div className="flex items-center gap-2 px-6 py-3 bg-black rounded-full">
<GitMerge className="w-5 h-5 text-white" />
<span className="text-white text-base font-medium">
<span className="text-base font-medium text-white">
Cross-Platform Innovation
</span>
</div>
</div>
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
<h2 className="text-4xl font-semibold leading-tight text-white lg:text-5xl">
Considering a{" "}
<span className="text-accent">Cross-Platform Approach?</span>
</h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
<p className="max-w-2xl mx-auto text-xl leading-relaxed text-gray-300">
Let's analyze if cross-platform is the right fit for your project
goals and maximize your development efficiency.
</p>
<ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
className="px-10 py-5 text-xl shadow-lg rounded-2xl hover:shadow-xl"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Target className="w-6 h-6 flex-shrink-0" />
<Target className="flex-shrink-0 w-6 h-6" />
<span>Get a Free Strategy Session</span>
</div>
</ShimmerButton>
@@ -1063,24 +1063,24 @@ const CrossPlatformTechStack = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Cross-Platform App Development Technologies
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
<p className="text-xl leading-relaxed text-gray-300">
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">
<div className="grid max-w-4xl grid-cols-2 gap-8 mx-auto md:grid-cols-4">
{technologies.map((tech, index) => (
<motion.div
key={index}
@@ -1091,14 +1091,14 @@ const CrossPlatformTechStack = () => {
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">
<div className="flex items-center justify-center w-20 h-20 mb-4 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 rounded-2xl group-hover:border-accent/30 group-hover:shadow-xl">
<ImageWithFallback
src={tech.logo}
alt={tech.name}
className="w-12 h-12 object-contain"
className="object-contain w-12 h-12"
/>
</div>
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
<span className="text-sm text-gray-300 transition-colors duration-300 group-hover:text-white">
{tech.name}
</span>
</motion.div>
@@ -1138,18 +1138,18 @@ const HireCrossPlatformDevelopers = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
Hire Expert Flutter & React Native Developers
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Find seasoned professionals skilled in both Flutter and React Native
to accelerate your cross-platform development.
</p>
@@ -1160,7 +1160,7 @@ const HireCrossPlatformDevelopers = () => {
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 mb-12"
className="grid gap-8 mb-12 md:grid-cols-2 lg:grid-cols-3"
>
{developerTypes.map((dev, index) => (
<motion.div
@@ -1170,12 +1170,12 @@ const HireCrossPlatformDevelopers = () => {
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
className="cursor-pointer group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8">
<div className="flex items-center gap-4 mb-6">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
<GitMerge className="w-6 h-6 text-accent" />
</div>
<div>
@@ -1188,11 +1188,11 @@ const HireCrossPlatformDevelopers = () => {
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{dev.title}
</h3>
<p className="text-muted-foreground text-sm mb-4">
<p className="mb-4 text-sm text-muted-foreground">
{dev.specialties}
</p>
@@ -1218,22 +1218,22 @@ const HireCrossPlatformDevelopers = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="flex flex-col sm:flex-row gap-4 justify-center"
className="flex flex-col justify-center gap-4 sm:flex-row"
>
<ShimmerButton className="px-8 py-4"
onClick={() => navigate("/hire-talent/cross-platform-developers")}
>
<div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" />
<UserPlus className="flex-shrink-0 w-5 h-5" />
<span>Hire Cross-Platform Developers</span>
</div>
</ShimmerButton>
<Button
variant="outline"
className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-auto rounded-lg transition-all duration-300"
className="h-auto px-8 py-4 transition-all duration-300 rounded-lg border-white/20 text-foreground hover:bg-white/10"
>
<span>View Talent Profiles</span>
<ArrowRight className="ml-2 w-4 h-4" />
<ArrowRight className="w-4 h-4 ml-2" />
</Button>
</motion.div>
</div>
@@ -1268,18 +1268,18 @@ const CrossPlatformFAQs = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Frequently Asked Questions
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
<p className="text-xl leading-relaxed text-gray-300">
Common questions about cross-platform app development.
</p>
</motion.div>
@@ -1296,14 +1296,14 @@ const CrossPlatformFAQs = () => {
<AccordionItem
key={index}
value={`item-${index}`}
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
className="px-10 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md rounded-2xl"
>
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<AccordionTrigger className="py-10 text-xl text-left hover:no-underline">
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
<AccordionContent className="pb-10 text-lg leading-relaxed text-gray-300">
{faq.answer}
</AccordionContent>
</AccordionItem>
@@ -1319,14 +1319,14 @@ const CrossPlatformFAQs = () => {
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">
<section className="relative py-20 overflow-hidden">
<div className="container relative z-10 px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center max-w-4xl mx-auto"
className="max-w-4xl mx-auto text-center"
>
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -1336,9 +1336,9 @@ const CrossPlatformFinalCTA = () => {
className="mb-8"
>
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<div className="flex items-center gap-2 px-6 py-3 rounded-full bg-background">
<GitMerge className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">
<span className="text-base font-medium text-foreground">
Ready to Launch?
</span>
</div>
@@ -1350,7 +1350,7 @@ const CrossPlatformFinalCTA = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight"
className="mb-6 text-4xl font-semibold leading-tight lg:text-5xl text-foreground"
>
Achieve Broader Reach with{" "}
<span className="text-accent">WDI's Cross-Platform Expertise</span>
@@ -1361,7 +1361,7 @@ const CrossPlatformFinalCTA = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
className="max-w-2xl mx-auto mb-12 text-xl leading-relaxed text-muted-foreground"
>
Leverage our experience to build robust, beautiful apps for both iOS
and Android efficiently.
@@ -1375,16 +1375,16 @@ const CrossPlatformFinalCTA = () => {
className="space-y-8"
>
<ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
className="px-12 py-6 text-xl shadow-2xl rounded-2xl hover:shadow-accent/25"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" />
<Rocket className="flex-shrink-0 w-6 h-6" />
<span>Start Your Cross-Platform Project</span>
</div>
</ShimmerButton>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Free consultation • Strategy session • Rapid development
</p>
</motion.div>
@@ -1392,10 +1392,10 @@ const CrossPlatformFinalCTA = () => {
</div>
{/* Background Decorative Elements */}
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
<div className="absolute rounded-full top-20 left-20 w-60 h-60 bg-accent/5 blur-3xl"></div>
<div className="absolute rounded-full bottom-20 right-20 w-60 h-60 bg-blue-500/5 blur-3xl"></div>
<div className="absolute transform -translate-x-1/2 -translate-y-1/2 rounded-full top-1/2 left-1/2 w-80 h-80 bg-purple-500/3 blur-3xl"></div>
</div>
</section>
);
@@ -1404,7 +1404,7 @@ const CrossPlatformFinalCTA = () => {
// Main Cross-Platform App Development Page
export const CrossPlatformAppDevelopment = () => {
return (
<div className="dark min-h-screen">
<div className="min-h-screen dark">
{/* <Navigation /> */}
{/* Hero Section */}

286
pages/NativeAppDevelopment.tsx
View File

@@ -39,7 +39,7 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import ranoutofImage from "../src/images/ranoutof.webp"
import seezunImage from "../src/images/seezun.webp";
// import seezunImage from "../src/images/seezun.webp";
import regroupImage from "../src/images/regroup.webp";
import awsLogoImage from "../src/images/aws-logo.png";
@@ -95,7 +95,7 @@ const NativeHeroWithCTA = () => {
`}
</script>
</Helmet>
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
<motion.div
initial={{ opacity: 0, x: -50 }}
@@ -109,18 +109,18 @@ const NativeHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">
<span className="text-sm font-medium text-white/70">
Native App Development
</span>
</motion.div>
{/* Main Heading */}
<div className="space-y-6">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
<h1 className="text-4xl font-semibold leading-tight text-white md:text-5xl lg:text-6xl">
Native App Development: Uncompromising Performance & Experience
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
Building bespoke applications tailored for a single operating
system to deliver the highest level of performance, security,
and device integration.
@@ -132,22 +132,22 @@ const NativeHeroWithCTA = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
className="flex flex-col gap-4 sm:flex-row"
>
<ShimmerButton
className="text-lg px-8 py-4"
className="px-8 py-4 text-lg"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Gauge className="w-5 h-5 flex-shrink-0" />
<Gauge className="flex-shrink-0 w-5 h-5" />
<span>Discover Native Advantages</span>
</div>
</ShimmerButton>
<a
href="#consultation"
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-medium text-white transition bg-gray-800 rounded-md hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
>
<MessageSquare className="w-4 h-4 flex-shrink-0" />
<MessageSquare className="flex-shrink-0 w-4 h-4" />
<span>Request Consultation</span>
</a>
</motion.div>
@@ -169,11 +169,11 @@ const NativeHeroWithCTA = () => {
className="relative h-[400px] w-full mb-8 flex items-center justify-center"
>
{/* Split-screen container */}
<div className="relative w-full h-full flex">
<div className="relative flex w-full h-full">
{/* iOS Native App (left half) */}
<div className="w-1/2 h-full bg-gradient-to-br from-blue-900/20 to-blue-800/20 rounded-l-3xl border-l border-t border-b border-blue-500/30 flex flex-col items-center justify-center p-6">
<div className="w-32 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl mb-4">
<div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
<div className="flex flex-col items-center justify-center w-1/2 h-full p-6 border-t border-b border-l bg-gradient-to-br from-blue-900/20 to-blue-800/20 rounded-l-3xl border-blue-500/30">
<div className="w-32 h-48 mb-4 border border-gray-700 shadow-xl bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl">
<div className="flex items-center justify-center w-full h-6 bg-gray-700 rounded-t-2xl">
<div className="w-8 h-0.5 bg-gray-600 rounded-full"></div>
</div>
<div className="p-3 space-y-2">
@@ -184,7 +184,7 @@ const NativeHeroWithCTA = () => {
<div className="h-6 bg-gray-700 rounded-lg"></div>
<div className="h-6 bg-gray-700 rounded-lg"></div>
</div>
<div className="h-8 bg-blue-500/20 rounded-lg mt-2 flex items-center justify-center">
<div className="flex items-center justify-center h-8 mt-2 rounded-lg bg-blue-500/20">
<Apple className="w-4 h-4 text-blue-500" />
</div>
</div>
@@ -192,7 +192,7 @@ const NativeHeroWithCTA = () => {
<div className="text-center">
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
className="text-xs text-blue-300 bg-blue-500/20 border-blue-500/30"
>
iOS Native
</Badge>
@@ -200,9 +200,9 @@ const NativeHeroWithCTA = () => {
</div>
{/* Android Native App (right half) */}
<div className="w-1/2 h-full bg-gradient-to-br from-green-900/20 to-green-800/20 rounded-r-3xl border-r border-t border-b border-green-500/30 flex flex-col items-center justify-center p-6">
<div className="w-32 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl mb-4">
<div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
<div className="flex flex-col items-center justify-center w-1/2 h-full p-6 border-t border-b border-r bg-gradient-to-br from-green-900/20 to-green-800/20 rounded-r-3xl border-green-500/30">
<div className="w-32 h-48 mb-4 border border-gray-700 shadow-xl bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl">
<div className="flex items-center justify-center w-full h-6 bg-gray-700 rounded-t-2xl">
<div className="w-8 h-0.5 bg-gray-600 rounded-full"></div>
</div>
<div className="p-3 space-y-2">
@@ -213,7 +213,7 @@ const NativeHeroWithCTA = () => {
<div className="h-6 bg-gray-700 rounded-lg"></div>
<div className="h-6 bg-gray-700 rounded-lg"></div>
</div>
<div className="h-8 bg-green-500/20 rounded-lg mt-2 flex items-center justify-center">
<div className="flex items-center justify-center h-8 mt-2 rounded-lg bg-green-500/20">
<svg
className="w-4 h-4 text-green-500"
viewBox="0 0 24 24"
@@ -227,7 +227,7 @@ const NativeHeroWithCTA = () => {
<div className="text-center">
<Badge
variant="secondary"
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
className="text-xs text-green-300 bg-green-500/20 border-green-500/30"
>
Android Native
</Badge>
@@ -244,7 +244,7 @@ const NativeHeroWithCTA = () => {
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="flex justify-center gap-4 flex-wrap"
className="flex flex-wrap justify-center gap-4"
>
<Badge
variant="secondary"
@@ -254,13 +254,13 @@ const NativeHeroWithCTA = () => {
</Badge>
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
className="text-blue-300 bg-blue-500/20 border-blue-500/30"
>
Maximum Performance
</Badge>
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
className="text-purple-300 bg-purple-500/20 border-purple-500/30"
>
Native Features
</Badge>
@@ -310,18 +310,18 @@ const NativeVsCrossPlatform = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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-16"
className="mb-16 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
Native vs. Cross-Platform: When to Choose Native
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Native development delivers uncompromising performance and platform
integration for applications that demand the highest standards.
</p>
@@ -332,7 +332,7 @@ const NativeVsCrossPlatform = () => {
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 max-w-6xl mx-auto"
className="grid max-w-6xl gap-8 mx-auto md:grid-cols-2 lg:grid-cols-3"
>
{comparisons.slice(0, 3).map((item, index) => {
const IconComponent = item.icon;
@@ -346,15 +346,15 @@ const NativeVsCrossPlatform = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
<IconComponent className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{item.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{item.description}
</p>
</CardContent>
@@ -370,7 +370,7 @@ const NativeVsCrossPlatform = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
className="grid max-w-4xl gap-8 mx-auto mt-8 md:grid-cols-2"
>
{comparisons.slice(3).map((item, index) => {
const IconComponent = item.icon;
@@ -384,15 +384,15 @@ const NativeVsCrossPlatform = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
<IconComponent className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{item.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{item.description}
</p>
</CardContent>
@@ -497,18 +497,18 @@ const NativeCapabilities = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Expertise Across Leading Native Platforms
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
Comprehensive native development capabilities covering both iOS and
Android ecosystems with deep platform expertise.
</p>
@@ -519,7 +519,7 @@ const NativeCapabilities = () => {
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"
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
>
{capabilities.map((capability, index) => {
const IconComponent = capability.icon;
@@ -533,15 +533,15 @@ const NativeCapabilities = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
<div className="flex items-center justify-center w-12 h-12 mb-6 rounded-lg bg-accent/20">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<h3 className="text-xl font-semibold text-white mb-4">
<h3 className="mb-4 text-xl font-semibold text-white">
{capability.title}
</h3>
<p className="text-gray-300 leading-relaxed mb-6">
<p className="mb-6 leading-relaxed text-gray-300">
{capability.description}
</p>
<div className="flex flex-wrap gap-2">
@@ -549,7 +549,7 @@ const NativeCapabilities = () => {
<Badge
key={tech}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
className="text-xs text-gray-300 border-gray-700 bg-gray-800/50"
>
{tech}
</Badge>
@@ -645,18 +645,18 @@ const NativeUseCases = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
When Native Development is Your Best Choice
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Certain application requirements and business goals make native
development the optimal choice for long-term success.
</p>
@@ -667,7 +667,7 @@ const NativeUseCases = () => {
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"
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
>
{useCases.map((useCase, index) => {
const IconComponent = useCase.icon;
@@ -681,15 +681,15 @@ const NativeUseCases = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
<div className="flex items-center justify-center w-12 h-12 mb-6 rounded-lg bg-accent/20">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{useCase.title}
</h3>
<p className="text-muted-foreground leading-relaxed mb-6">
<p className="mb-6 leading-relaxed text-muted-foreground">
{useCase.description}
</p>
<div className="space-y-2">
@@ -756,18 +756,18 @@ const NativeProcess = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Precision & Excellence in Every Native Project
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
Our proven native development methodology ensures optimal
performance and platform integration at every stage.
</p>
@@ -796,26 +796,26 @@ const NativeProcess = () => {
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">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<div className="p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md rounded-2xl hover:border-accent/30 hover:shadow-xl">
<div className="flex items-center justify-center gap-4 mb-4 lg:justify-start">
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-white mb-4">
<h3 className="mb-4 text-2xl font-semibold text-white">
{step.title}
</h3>
<p className="text-gray-300 leading-relaxed">
<p className="leading-relaxed text-gray-300">
{step.description}
</p>
</div>
</div>
{/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
<div className="z-10 hidden w-4 h-4 border-4 border-black rounded-full bg-accent lg:block"></div>
<div className="flex-1 hidden lg:block"></div>
</motion.div>
@@ -842,16 +842,16 @@ const NativeCaseStudies = () => {
gradient: "from-[#007F33]/20 to-[#007F33]/10",
buttonLink: "/projects/ranoutof",
},
{
title: "E-commerce Platform Innovation",
client: "Seezun",
description:
"Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
image: seezunImage,
results: "800K+ users",
gradient: "from-blue-500/20 to-cyan-500/20",
buttonLink: "/projects/seezun",
},
// {
// title: "E-commerce Platform Innovation",
// client: "Seezun",
// description:
// "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
// image: seezunImage,
// results: "800K+ users",
// gradient: "from-blue-500/20 to-cyan-500/20",
// buttonLink: "/projects/seezun",
// },
{
title: "Social Networking Platform",
client: "Regroup",
@@ -866,18 +866,18 @@ const NativeCaseStudies = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
Android Apps That Define Industries
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Discover how we've helped businesses succeed with powerful Android
applications that leverage the platform's capabilities.
</p>
@@ -888,7 +888,7 @@ const NativeCaseStudies = () => {
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"
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
>
{caseStudies.map((study, index) => (
<motion.div
@@ -898,13 +898,13 @@ const NativeCaseStudies = () => {
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
className="cursor-pointer group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
<CardContent className="p-0 flex flex-col h-full">
<Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="flex flex-col h-full p-0">
<div className="p-8 pb-6">
<div className="flex items-start gap-4 mb-6">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
<svg
className="w-6 h-6 text-accent"
viewBox="0 0 24 24"
@@ -914,7 +914,7 @@ const NativeCaseStudies = () => {
</svg>
</div>
<div className="flex-1">
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
<div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
{study.client}
</div>
<Badge
@@ -931,20 +931,20 @@ const NativeCaseStudies = () => {
</h3>
</div>
<div className="px-8 pb-6 flex-1">
<div className="flex-1 px-8 pb-6">
<div
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
>
<ImageWithFallback
src={study.image}
alt={study.title}
className="w-full h-48 object-cover rounded-lg shadow-lg"
className="object-cover w-full h-48 rounded-lg shadow-lg"
/>
</div>
</div>
<div className="px-8 pb-6">
<p className="text-muted-foreground text-sm leading-relaxed">
<p className="text-sm leading-relaxed text-muted-foreground">
{study.description}
</p>
</div>
@@ -953,7 +953,7 @@ const NativeCaseStudies = () => {
<Button
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"
className="justify-between w-full transition-all duration-300 text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1"
onClick={() => navigate(study.buttonLink)}
>
<span className="text-sm font-medium">
@@ -977,13 +977,13 @@ const NativeInlineCTA = () => {
const navigate = useNavigate();
return (
<section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center max-w-4xl mx-auto"
className="max-w-4xl mx-auto text-center"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -993,30 +993,30 @@ const NativeInlineCTA = () => {
className="space-y-8"
>
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
<div className="flex items-center gap-2 px-6 py-3 bg-black rounded-full">
<Gauge className="w-5 h-5 text-white" />
<span className="text-white text-base font-medium">
<span className="text-base font-medium text-white">
Peak Performance
</span>
</div>
</div>
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
<h2 className="text-4xl font-semibold leading-tight text-white lg:text-5xl">
Ready to Achieve{" "}
<span className="text-accent">Peak App Performance?</span>
</h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
<p className="max-w-2xl mx-auto text-xl leading-relaxed text-gray-300">
Let our native experts guide your next high-impact application to
deliver uncompromising performance and user experience.
</p>
<ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
className="px-10 py-5 text-xl shadow-lg rounded-2xl hover:shadow-xl"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" />
<MessageSquare className="flex-shrink-0 w-6 h-6" />
<span>Discuss Your Native App Project</span>
</div>
</ShimmerButton>
@@ -1067,23 +1067,23 @@ const NativeAppTechStack = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Powering Native App Development
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
<p className="text-xl leading-relaxed text-gray-300">
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">
<div className="grid max-w-4xl grid-cols-2 gap-8 mx-auto md:grid-cols-4">
{technologies.map((tech, index) => (
<motion.div
key={index}
@@ -1094,14 +1094,14 @@ const NativeAppTechStack = () => {
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">
<div className="flex items-center justify-center w-20 h-20 mb-4 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 rounded-2xl group-hover:border-accent/30 group-hover:shadow-xl">
<ImageWithFallback
src={tech.logo}
alt={tech.name}
className="w-12 h-12 object-contain"
className="object-contain w-12 h-12"
/>
</div>
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
<span className="text-sm text-gray-300 transition-colors duration-300 group-hover:text-white">
{tech.name}
</span>
</motion.div>
@@ -1155,18 +1155,18 @@ const HireNativeDevelopers = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
Find Your Elite Native App Development Team
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Access our pool of highly specialized iOS and Android native
developers for your most demanding projects.
</p>
@@ -1177,7 +1177,7 @@ const HireNativeDevelopers = () => {
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 mb-12"
className="grid gap-8 mb-12 md:grid-cols-2 lg:grid-cols-3"
>
{developerTypes.map((dev, index) => (
<motion.div
@@ -1187,12 +1187,12 @@ const HireNativeDevelopers = () => {
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
className="cursor-pointer group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8">
<div className="flex items-center gap-4 mb-6">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
<Gauge className="w-6 h-6 text-accent" />
</div>
<div>
@@ -1205,11 +1205,11 @@ const HireNativeDevelopers = () => {
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{dev.title}
</h3>
<p className="text-muted-foreground text-sm mb-4">
<p className="mb-4 text-sm text-muted-foreground">
{dev.specialties}
</p>
@@ -1235,23 +1235,23 @@ const HireNativeDevelopers = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="flex flex-col sm:flex-row gap-4 justify-center"
className="flex flex-col justify-center gap-4 sm:flex-row"
>
<ShimmerButton className="px-8 py-4"
onClick={() => navigate("/hire-talent/native-app-developers")}
>
<div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" />
<UserPlus className="flex-shrink-0 w-5 h-5" />
<span>Hire Native Developers</span>
</div>
</ShimmerButton>
<Button
variant="outline"
className="border-white text-white hover:bg-white/10 hover:text-white px-8 py-4 rounded-lg transition-all duration-300 h-auto"
className="h-auto px-8 py-4 text-white transition-all duration-300 border-white rounded-lg hover:bg-white/10 hover:text-white"
style={{ color: "white" }}
>
<span>Get a Consultation</span>
<ArrowRight className="ml-2 w-4 h-4" />
<ArrowRight className="w-4 h-4 ml-2" />
</Button>
</motion.div>
</div>
@@ -1287,18 +1287,18 @@ const NativeFAQs = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Frequently Asked Questions
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
<p className="text-xl leading-relaxed text-gray-300">
Common questions about native app development.
</p>
</motion.div>
@@ -1315,14 +1315,14 @@ const NativeFAQs = () => {
<AccordionItem
key={index}
value={`item-${index}`}
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
className="px-10 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md rounded-2xl"
>
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<AccordionTrigger className="py-10 text-xl text-left hover:no-underline">
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
<AccordionContent className="pb-10 text-lg leading-relaxed text-gray-300">
{faq.answer}
</AccordionContent>
</AccordionItem>
@@ -1338,14 +1338,14 @@ const NativeFAQs = () => {
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">
<section className="relative py-20 overflow-hidden">
<div className="container relative z-10 px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 50 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center max-w-4xl mx-auto"
className="max-w-4xl mx-auto text-center"
>
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -1355,16 +1355,16 @@ const NativeFinalCTA = () => {
className="mb-8"
>
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<div className="flex items-center gap-2 px-6 py-3 rounded-full bg-background">
<Gauge className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">
<span className="text-base font-medium text-foreground">
Maximum Potential
</span>
</div>
</div>
</motion.div>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
<h2 className="mb-6 text-4xl font-semibold leading-tight lg:text-5xl text-foreground">
Unlock Full Potential with{" "}
<span className="text-accent">WDI's Native Expertise</span>
</h2>
@@ -1374,7 +1374,7 @@ const NativeFinalCTA = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
className="max-w-2xl mx-auto mb-12 text-xl leading-relaxed text-muted-foreground"
>
Invest in an application that delivers unparalleled performance,
security, and a truly immersive user experience.
@@ -1387,16 +1387,16 @@ const NativeFinalCTA = () => {
viewport={{ once: true }}
className="space-y-8"
>
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
<ShimmerButton className="px-12 py-6 text-xl shadow-2xl rounded-2xl hover:shadow-accent/25"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" />
<Rocket className="flex-shrink-0 w-6 h-6" />
<span>Start Your Native App Journey</span>
</div>
</ShimmerButton>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
Expert consultation • Architecture planning • Performance
optimization
</p>
@@ -1405,10 +1405,10 @@ const NativeFinalCTA = () => {
</div>
{/* Background Decorative Elements */}
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
<div className="absolute rounded-full top-20 left-20 w-60 h-60 bg-accent/5 blur-3xl"></div>
<div className="absolute rounded-full bottom-20 right-20 w-60 h-60 bg-blue-500/5 blur-3xl"></div>
<div className="absolute transform -translate-x-1/2 -translate-y-1/2 rounded-full top-1/2 left-1/2 w-80 h-80 bg-purple-500/3 blur-3xl"></div>
</div>
</section>
);
@@ -1417,7 +1417,7 @@ const NativeFinalCTA = () => {
// Main Native App Development Page
export const NativeAppDevelopment = () => {
return (
<div className="dark min-h-screen">
<div className="min-h-screen dark">
{/* <Navigation /> */}
{/* Hero Section */}

370
pages/SeezunProject.tsx
View File

@@ -13,16 +13,16 @@ import { motion } from "framer-motion";
import { AlertTriangle, ArrowRight, Bell, Calendar, CheckCircle, Cloud, Code, Cpu, Database, ExternalLink, Globe, Home, Image, Leaf, List, Mic, Palette, Repeat, Ruler, Scan, Server, Share2, ShieldCheck, ShoppingBag, Smartphone, Sparkles, Split, Star, Target, TestTube, Users, Zap } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../components/ui/button";
import seezunImage from "../src/images/seezun.webp";
import seezunLogo from "../src/images/seezun-logo.png";
// import seezunImage from "../src/images/seezun.webp";
// import seezunLogo from "../src/images/seezun-logo.png";
const projectData = {
hero: {
title: "Seezun: Your Seasonal Fashion & Lifestyle Hub",
subtitle: "Rent, Buy, or Sell South Asian Clothing",
subtitleTwo: "Discover a new way to update your wardrobe, rent, buy, or sell both new and preloved South Asian outfits on Seezun. Enjoy simple, seamless exchanges for every style and every occasion.",
imageUrl: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center",
imageAlt: "Seezun App Showcase"
// title: "Seezun: Your Seasonal Fashion & Lifestyle Hub",
// subtitle: "Rent, Buy, or Sell South Asian Clothing",
// subtitleTwo: "Discover a new way to update your wardrobe, rent, buy, or sell both new and preloved South Asian outfits on Seezun. Enjoy simple, seamless exchanges for every style and every occasion.",
// imageUrl: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center",
// imageAlt: "Seezun App Showcase"
},
details: {
technologies: [
@@ -43,7 +43,7 @@ const projectData = {
{ label: "Transaction Growth", value: "+200%", description: "Monthly marketplace activity" }
],
executiveSummary: {
content: "Seezun reimagines the South Asian clothing market with a customer-driven platform connecting buyers, sellers, and renters. By analyzing preferences, trends, and inventory, Seezun offers a seamless, tailored shopping experience, making fashion accessible, sustainable, and affordable."
// content: "Seezun reimagines the South Asian clothing market with a customer-driven platform connecting buyers, sellers, and renters. By analyzing preferences, trends, and inventory, Seezun offers a seamless, tailored shopping experience, making fashion accessible, sustainable, and affordable."
},
businessObjectives: [
"Launch seasonal style collections curated by fashion experts for every occasion",
@@ -147,198 +147,198 @@ const projectData = {
};
export const SeezunProject = () => {
const navigate = useNavigate();
return (
<div className="dark min-h-screen bg-background">
// export const SeezunProject = () => {
// const navigate = useNavigate();
// return (
// <div className="min-h-screen dark bg-background">
{/* Section 1: Hero with Heading, Subheading, and Image */}
<PortfolioHero
title={projectData.hero.title}
subtitle={projectData.hero.subtitle}
subtitleTwo={projectData.hero.subtitleTwo}
imageUrl={seezunImage}
imageAlt={projectData.hero.imageAlt}
/>
// {/* Section 1: Hero with Heading, Subheading, and Image */}
// <PortfolioHero
// title={projectData.hero.title}
// subtitle={projectData.hero.subtitle}
// subtitleTwo={projectData.hero.subtitleTwo}
// imageUrl={seezunImage}
// imageAlt={projectData.hero.imageAlt}
// />
{/* Section 2: Project Details */}
<PortfolioProjectDetails
details={projectData.details}
achievements={projectData.achievements}
/>
// {/* Section 2: Project Details */}
// <PortfolioProjectDetails
// details={projectData.details}
// achievements={projectData.achievements}
// />
{/* Executive Summary */}
<PortfolioExecutiveSummary
content={projectData.executiveSummary.content}
/>
// {/* Executive Summary */}
// <PortfolioExecutiveSummary
// content={projectData.executiveSummary.content}
// />
{/* Project Overview */}
<section className="py-24 bg-background">
<div className="container mx-auto px-4 lg:px-6">
<div className="max-w-6xl mx-auto text-center mb-16">
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
Project Overview
</h2>
</div>
// {/* Project Overview */}
// <section className="py-24 bg-background">
// <div className="container px-4 mx-auto lg:px-6">
// <div className="max-w-6xl mx-auto mb-16 text-center">
// <h2 className="mb-6 text-3xl font-semibold lg:text-5xl text-foreground">
// Project Overview
// </h2>
// </div>
<div className="grid lg:grid-cols-3 gap-12">
<PortfolioProjectOverview
icon={<Globe className="w-8 h-8 text-accent" />}
title="Background & Context"
description="Access to premium South Asian fashion is often limited by high costs, low availability, and the lack of trusted rental or resale options. This platform bridges that gap by making luxury ethnic wear accessible, affordable, and sustainable for all."
borderColor="border-accent/20"
hoverColor="accent"
/>
// <div className="grid gap-12 lg:grid-cols-3">
// <PortfolioProjectOverview
// icon={<Globe className="w-8 h-8 text-accent" />}
// title="Background & Context"
// description="Access to premium South Asian fashion is often limited by high costs, low availability, and the lack of trusted rental or resale options. This platform bridges that gap by making luxury ethnic wear accessible, affordable, and sustainable for all."
// borderColor="border-accent/20"
// hoverColor="accent"
// />
<PortfolioProjectOverview
icon={<Users className="w-8 h-8 text-blue-400" />}
title="Target Audience"
description="Fashion-conscious individuals and South Asian communities seeking affordable access to premium traditional and contemporary clothing through renting, buying, or selling."
borderColor="border-blue-400/20"
hoverColor="blue-400"
/>
// <PortfolioProjectOverview
// icon={<Users className="w-8 h-8 text-blue-400" />}
// title="Target Audience"
// description="Fashion-conscious individuals and South Asian communities seeking affordable access to premium traditional and contemporary clothing through renting, buying, or selling."
// borderColor="border-blue-400/20"
// hoverColor="blue-400"
// />
<PortfolioProjectOverview
icon={<Target className="w-8 h-8 text-green-400" />}
title="Business Objectives"
points={projectData.businessObjectives}
borderColor="border-green-400/20"
hoverColor="green-400"
/>
</div>
</div>
</section>
// <PortfolioProjectOverview
// icon={<Target className="w-8 h-8 text-green-400" />}
// title="Business Objectives"
// points={projectData.businessObjectives}
// borderColor="border-green-400/20"
// hoverColor="green-400"
// />
// </div>
// </div>
// </section>
{/* Core Features */}
<PortfolioCoreFeatures
title="Core Features & Functionality"
subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
features={projectData.coreFeatures}
/>
// {/* Core Features */}
// <PortfolioCoreFeatures
// title="Core Features & Functionality"
// subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
// features={projectData.coreFeatures}
// />
{/* Challenges & Solution Architecture */}
<PortfolioChallengeSolution
challenges={[
{
icon: <Cpu className="w-6 h-6" />,
title: "Technical Challenges",
description: "Building a real-time AI recommendation engine within MVP timelines, implementing split-payment workflows across multiple vendors, and optimizing media-heavy seasonal lookbooks for mobile.",
},
{
icon: <Split className="w-6 h-6" />,
title: "Project Management Challenges",
description: "Coordinating between fashion consultants, AI developers, and backend engineers, while managing seasonal content updates without downtime.",
},
]}
// {/* Challenges & Solution Architecture */}
// <PortfolioChallengeSolution
// challenges={[
// {
// icon: <Cpu className="w-6 h-6" />,
// title: "Technical Challenges",
// description: "Building a real-time AI recommendation engine within MVP timelines, implementing split-payment workflows across multiple vendors, and optimizing media-heavy seasonal lookbooks for mobile.",
// },
// {
// icon: <Split className="w-6 h-6" />,
// title: "Project Management Challenges",
// description: "Coordinating between fashion consultants, AI developers, and backend engineers, while managing seasonal content updates without downtime.",
// },
// ]}
technologyStack={[
{ icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: React native (mobile), React.js (Webapp)" },
{ icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Laravel (PHP) with modular microservices" },
{ icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MySQL" },
{ icon: <Cloud className="w-5 h-5 text-accent" />, label: "Cloud: AWS EC2, CloudFront, S3 (for media)" },
]}
highlights={[
{ text: "Premium South Asian clothing rentals for every occasion" },
{ text: "Secure buy & sell platform for new and pre-loved fashion" },
{ text: "Sustainable circular fashion promoting garment reuse" },
{ text: "Advanced size matching with authentic community reviews" },
]}
/>
// technologyStack={[
// { icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: React native (mobile), React.js (Webapp)" },
// { icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Laravel (PHP) with modular microservices" },
// { icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MySQL" },
// { icon: <Cloud className="w-5 h-5 text-accent" />, label: "Cloud: AWS EC2, CloudFront, S3 (for media)" },
// ]}
// highlights={[
// { text: "Premium South Asian clothing rentals for every occasion" },
// { text: "Secure buy & sell platform for new and pre-loved fashion" },
// { text: "Sustainable circular fashion promoting garment reuse" },
// { text: "Advanced size matching with authentic community reviews" },
// ]}
// />
{/* Development Process */}
<PortfolioDevelopmentProcess
title="Development Process & Methodology"
subtitle=""
phases={projectData.developmentPhases}
/>
// {/* Development Process */}
// <PortfolioDevelopmentProcess
// title="Development Process & Methodology"
// subtitle=""
// phases={projectData.developmentPhases}
// />
{/* Results & Impact */}
<PortfolioResultsImpact
title="Results & Business Impact"
subtitle="The platform has revolutionized access to South Asian fashion by driving higher rental engagement, boosting resale transactions, expanding vendor participation, and promoting sustainable wardrobe practices across the community."
metrics={projectData.resultsMetrics}
achievements={projectData.technicalAchievements}
/>
// {/* Results & Impact */}
// <PortfolioResultsImpact
// title="Results & Business Impact"
// subtitle="The platform has revolutionized access to South Asian fashion by driving higher rental engagement, boosting resale transactions, expanding vendor participation, and promoting sustainable wardrobe practices across the community."
// metrics={projectData.resultsMetrics}
// achievements={projectData.technicalAchievements}
// />
{/* Lessons Learned */}
<PortfolioLessonsSection
title="Lessons Learned"
description="Key insights and learnings from the RanOutOf development journey."
workedTitle="What Worked Well"
workedIcon={<CheckCircle className="w-6 h-6" />}
workedColor="#22c55e" // Tailwind green-500
workedLessons={[
"Seamless Rentals and Bargaining Feature",
"Seasonal lookbooks increased browsing time and purchase intent",
"Vendor self-management tools reduced admin workload",
]}
improveTitle="Areas for Improvement"
improveIcon={<ArrowRight className="w-6 h-6" />}
improveColor="#eab308" // Tailwind yellow-500
improveLessons={[
"More robust A/B testing for recommendation algorithms",
"Expand seasonal tagging into hyperlocal weather-based recommendations",
]}
/>
// {/* Lessons Learned */}
// <PortfolioLessonsSection
// title="Lessons Learned"
// description="Key insights and learnings from the RanOutOf development journey."
// workedTitle="What Worked Well"
// workedIcon={<CheckCircle className="w-6 h-6" />}
// workedColor="#22c55e" // Tailwind green-500
// workedLessons={[
// "Seamless Rentals and Bargaining Feature",
// "Seasonal lookbooks increased browsing time and purchase intent",
// "Vendor self-management tools reduced admin workload",
// ]}
// improveTitle="Areas for Improvement"
// improveIcon={<ArrowRight className="w-6 h-6" />}
// improveColor="#eab308" // Tailwind yellow-500
// improveLessons={[
// "More robust A/B testing for recommendation algorithms",
// "Expand seasonal tagging into hyperlocal weather-based recommendations",
// ]}
// />
{/* Future Roadmap */}
<PortfolioRoadmapSection
title="Future Roadmap"
description="Planned enhancements and features to further revolutionize grocery management apps."
roadmapItems={projectData.futureRoadmap}
icon={<ArrowRight className="w-5 h-5" />}
/>
// {/* Future Roadmap */}
// <PortfolioRoadmapSection
// title="Future Roadmap"
// description="Planned enhancements and features to further revolutionize grocery management apps."
// roadmapItems={projectData.futureRoadmap}
// icon={<ArrowRight className="w-5 h-5" />}
// />
{/* Client Testimonial */}
<PortfolioTestimonial
logo={seezunLogo}
alt="Seezun Logo"
rating={5}
testimonial="“WDI delivered a cutting-edge, scalable platform that exceeded expectations. Their AI integration and vendor management tools gave us a strong advantage in the fashion-tech market. Their expertise and responsiveness made them a trusted partner throughout the project.”"
clientName="Urmila"
clientRole=" Product Manager, Seezun"
/>
// {/* Client Testimonial */}
// <PortfolioTestimonial
// logo={seezunLogo}
// alt="Seezun Logo"
// rating={5}
// testimonial="“WDI delivered a cutting-edge, scalable platform that exceeded expectations. Their AI integration and vendor management tools gave us a strong advantage in the fashion-tech market. Their expertise and responsiveness made them a trusted partner throughout the project.”"
// clientName="Urmila"
// clientRole=" Product Manager, Seezun"
// />
{/* CTA Section */}
<section className="py-24 bg-background">
<div className="container mx-auto px-4 lg:px-6">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="max-w-4xl mx-auto text-center"
>
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
Ready to Transform Your Fashion Marketplace?
</h2>
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
Let's create a sustainable fashion platform together. From concept to launch, we'll help you build a marketplace that revolutionizes how people shop, rent, and sell clothing.
</p>
// {/* CTA Section */}
// <section className="py-24 bg-background">
// <div className="container px-4 mx-auto lg:px-6">
// <motion.div
// initial={{ opacity: 0, y: 30 }}
// whileInView={{ opacity: 1, y: 0 }}
// transition={{ duration: 0.8 }}
// viewport={{ once: true }}
// className="max-w-4xl mx-auto text-center"
// >
// <h2 className="mb-8 text-3xl font-semibold lg:text-5xl text-foreground">
// Ready to Transform Your Fashion Marketplace?
// </h2>
// <p className="max-w-3xl mx-auto mb-12 text-xl text-muted-foreground">
// Let's create a sustainable fashion platform together. From concept to launch, we'll help you build a marketplace that revolutionizes how people shop, rent, and sell clothing.
// </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
onClick={() => navigate('/contact-us')}
className="bg-accent hover:bg-accent/90 text-accent-foreground"
>
Start Your Project
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
size="lg"
variant="outline"
onClick={() => navigate('/case-studies')}
className="border-accent/30 text-accent hover:bg-accent/10"
>
View More Case Studies
<ExternalLink className="w-5 h-5 ml-2" />
</Button>
</div>
</motion.div>
</div>
</section>
// <div className="flex flex-col justify-center gap-4 sm:flex-row">
// <Button
// size="lg"
// onClick={() => navigate('/contact-us')}
// className="bg-accent hover:bg-accent/90 text-accent-foreground"
// >
// Start Your Project
// <ArrowRight className="w-5 h-5 ml-2" />
// </Button>
// <Button
// size="lg"
// variant="outline"
// onClick={() => navigate('/case-studies')}
// className="border-accent/30 text-accent hover:bg-accent/10"
// >
// View More Case Studies
// <ExternalLink className="w-5 h-5 ml-2" />
// </Button>
// </div>
// </motion.div>
// </div>
// </section>
</div>
);
};
// </div>
// );
// };

222
pages/iOSAppDevelopment.tsx
View File

@@ -6,7 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import ranoutofImage from "../src/images/ranoutof.webp";
import seezunImage from "../src/images/seezun.webp";
// import seezunImage from "../src/images/seezun.webp";
import wokaImage from "../src/images/woka.webp";
import swiftImage from "../src/images/swift-programming.webp";
import apllePayImage from "../src/images/apple-pay.png";
@@ -105,7 +105,7 @@ const IOSHeroWithCTA = () => {
`}
</script>
</Helmet>
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
<motion.div
initial={{ opacity: 0, x: -50 }}
@@ -119,18 +119,18 @@ const IOSHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">
<span className="text-sm font-medium text-white/70">
iOS App Development
</span>
</motion.div>
{/* Main Heading */}
<div className="space-y-6">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
<h1 className="text-4xl font-semibold leading-tight text-white md:text-5xl lg:text-6xl">
Expert iOS App Development Services
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
Crafting intuitive, high-performance iPhone and iPad
applications that define user experience and drive engagement.
</p>
@@ -141,15 +141,15 @@ const IOSHeroWithCTA = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
className="flex flex-col gap-4 sm:flex-row"
>
<ShimmerButton
className="text-lg px-8 py-4"
className="px-8 py-4 text-lg"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<svg
className="w-6 h-4 flex-shrink-0"
className="flex-shrink-0 w-6 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
@@ -166,9 +166,9 @@ const IOSHeroWithCTA = () => {
</ShimmerButton>
<a
href="#portfolio"
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-medium text-white transition bg-gray-800 rounded-md hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
>
<Eye className="w-4 h-4 flex-shrink-0" />
<Eye className="flex-shrink-0 w-4 h-4" />
<span>See Our iOS Work</span>
</a>
</motion.div>
@@ -217,23 +217,23 @@ const IOSCaseStudies = () => {
accentColor: "green",
featured: false,
},
{
id: 2,
title: "Seezun",
client: "Seezun",
description:
"Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
keyAchievement: {
number: "85%",
metric: "Brand Recognition",
icon: TrendingUp,
},
visual: seezunImage,
tags: ["iOS App", "P2P Marketplace", "Fashion", "E-commerce"],
gradient: "from-purple-500/20 to-pink-500/20",
accentColor: "purple",
featured: false,
},
// {
// id: 2,
// title: "Seezun",
// client: "Seezun",
// description:
// "Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
// keyAchievement: {
// number: "85%",
// metric: "Brand Recognition",
// icon: TrendingUp,
// },
// visual: seezunImage,
// tags: ["iOS App", "P2P Marketplace", "Fashion", "E-commerce"],
// gradient: "from-purple-500/20 to-pink-500/20",
// accentColor: "purple",
// featured: false,
// },
{
id: 3,
title: "WOKA",
@@ -255,14 +255,14 @@ const IOSCaseStudies = () => {
return (
<section className="py-32" id="portfolio">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
{/* Section Header */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center mb-16"
className="mb-16 text-center"
>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -272,19 +272,19 @@ const IOSCaseStudies = () => {
className="mb-6"
>
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<div className="flex items-center gap-2 px-6 py-3 rounded-full bg-background">
<Star className="w-5 h-5 text-accent" />
<span className="text-foreground text-base font-medium">
<span className="text-base font-medium text-foreground">
iOS Success Stories
</span>
</div>
</div>
</motion.div>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
iOS Apps That Drive Results
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Discover how we've helped businesses succeed with exceptional iOS
applications that leverage native capabilities and deliver
outstanding user experiences.
@@ -292,7 +292,7 @@ const IOSCaseStudies = () => {
</motion.div>
{/* Case Studies Grid - Matching Main Case Studies Layout */}
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-8 items-stretch">
<div className="grid items-stretch grid-cols-1 gap-8 lg:grid-cols-3 md:grid-cols-2">
{caseStudies.map((study, index) => {
const AchievementIcon = study.keyAchievement.icon;
@@ -303,7 +303,7 @@ const IOSCaseStudies = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.2 }}
viewport={{ once: true }}
className="group h-full"
className="h-full group"
>
<Card
className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
@@ -320,11 +320,11 @@ const IOSCaseStudies = () => {
<CardContent className="p-0 flex flex-col h-full min-h-[650px]">
{/* Visual Section - Fixed Height with Responsive Container */}
<div className="relative overflow-hidden bg-gray-900/50 rounded-t-2xl">
<div className="relative h-64 sm:h-72 md:h-64 w-full flex items-center justify-center p-4">
<div className="relative flex items-center justify-center w-full h-64 p-4 sm:h-72 md:h-64">
<ImageWithFallback
src={study.visual}
alt={`${study.title} - ${study.client} case study`}
className="max-w-full max-h-full object-contain object-center group-hover:scale-105 transition-transform duration-700 rounded-lg"
className="object-contain object-center max-w-full max-h-full transition-transform duration-700 rounded-lg group-hover:scale-105"
style={{
maxWidth: "100%",
height: "auto",
@@ -334,13 +334,13 @@ const IOSCaseStudies = () => {
/>
{/* Subtle overlay for better text contrast */}
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-500" />
<div className="absolute inset-0 transition-opacity duration-500 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-60 group-hover:opacity-80" />
{/* Key Achievement - Overlaid on Visual */}
<div className="absolute bottom-4 left-4 right-4 z-10">
<div className="absolute z-10 bottom-4 left-4 right-4">
<motion.div
whileHover={{ scale: 1.05 }}
className="bg-black/90 backdrop-blur-md rounded-xl p-4 border border-white/10 shadow-lg"
className="p-4 border shadow-lg bg-black/90 backdrop-blur-md rounded-xl border-white/10"
>
<div className="flex items-center gap-3">
<div
@@ -359,11 +359,11 @@ const IOSCaseStudies = () => {
>
<AchievementIcon className="w-5 h-5 text-white" />
</div>
<div className="min-w-0 flex-1">
<div className="flex-1 min-w-0">
<div className="text-2xl font-bold text-white">
{study.keyAchievement.number}
</div>
<div className="text-sm text-gray-300 leading-tight">
<div className="text-sm leading-tight text-gray-300">
{study.keyAchievement.metric}
</div>
</div>
@@ -378,17 +378,17 @@ const IOSCaseStudies = () => {
<div className="flex-1">
{/* Project Title - Consistent Height */}
<div className="mb-4 min-h-[60px] flex items-start">
<h3 className="text-xl font-semibold text-foreground leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
<h3 className="text-xl font-semibold leading-tight transition-colors duration-300 text-foreground group-hover:text-accent line-clamp-2">
{study.title}
</h3>
</div>
{/* Client & Description - Consistent Height */}
<div className="mb-6 min-h-[100px]">
<div className="text-accent font-medium text-sm mb-2">
<div className="mb-2 text-sm font-medium text-accent">
{study.client}
</div>
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-4">
<p className="text-sm leading-relaxed text-muted-foreground line-clamp-4">
{study.description}
</p>
</div>
@@ -400,7 +400,7 @@ const IOSCaseStudies = () => {
<Badge
key={tag}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
className="text-xs text-gray-300 transition-colors border-gray-700 bg-gray-800/50 hover:bg-gray-700/50"
>
{tag}
</Badge>
@@ -416,7 +416,7 @@ const IOSCaseStudies = () => {
whileTap={{ scale: 0.98 }}
>
<Button
className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
className="w-full h-12 py-3 font-semibold text-white transition-all duration-300 shadow-lg bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 rounded-xl hover:shadow-xl group"
onClick={(e) => {
e.stopPropagation();
if (study.title === "RanOutOf") {
@@ -429,7 +429,7 @@ const IOSCaseStudies = () => {
}}
>
<span>View Full Case Study</span>
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
<ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
</Button>
</motion.div>
</div>
@@ -447,12 +447,12 @@ const IOSCaseStudies = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
viewport={{ once: true }}
className="text-center mt-16"
className="mt-16 text-center"
>
<Button
variant="outline"
size="lg"
className="border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground hover:border-accent/50 transition-all duration-300"
className="transition-all duration-300 border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground hover:border-accent/50"
onClick={() => navigate("/case-studies")}
>
<Eye className="w-5 h-5 mr-2" />
@@ -501,18 +501,18 @@ const IOSProcessTimeline = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Our Proven Approach to Building Your iOS App
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
From concept to App Store success, we guide you through every step
of the iOS development journey.
</p>
@@ -541,26 +541,26 @@ const IOSProcessTimeline = () => {
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">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<div className="p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md rounded-2xl hover:border-accent/30 hover:shadow-xl">
<div className="flex items-center justify-center gap-4 mb-4 lg:justify-start">
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-white mb-4">
<h3 className="mb-4 text-2xl font-semibold text-white">
{step.title}
</h3>
<p className="text-gray-300 leading-relaxed">
<p className="leading-relaxed text-gray-300">
{step.description}
</p>
</div>
</div>
{/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
<div className="z-10 hidden w-4 h-4 border-4 border-black rounded-full bg-accent lg:block"></div>
<div className="flex-1 hidden lg:block"></div>
</motion.div>
@@ -616,18 +616,18 @@ const IOSServicesGrid = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
Comprehensive iOS App Solutions
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
From iPhone apps to Apple ecosystem integration, we provide
end-to-end iOS development services.
</p>
@@ -638,7 +638,7 @@ const IOSServicesGrid = () => {
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"
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
>
{services.map((service, index) => {
const IconComponent = service.icon;
@@ -652,15 +652,15 @@ const IOSServicesGrid = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
<div className="flex items-center justify-center w-12 h-12 mb-6 rounded-lg bg-accent/20">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{service.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{service.description}
</p>
</CardContent>
@@ -714,24 +714,24 @@ const IOSTechStack = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Building with the Most Powerful iOS Technologies
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
<p className="text-xl leading-relaxed text-gray-300">
We leverage cutting-edge iOS frameworks and tools to create
exceptional mobile experiences.
</p>
</motion.div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
<div className="grid max-w-4xl grid-cols-2 gap-8 mx-auto md:grid-cols-4">
{technologies.map((tech, index) => (
<motion.div
key={index}
@@ -742,14 +742,14 @@ const IOSTechStack = () => {
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">
<div className="flex items-center justify-center w-20 h-20 mb-4 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 rounded-2xl group-hover:border-accent/30 group-hover:shadow-xl">
<ImageWithFallback
src={tech.logo}
alt={tech.name}
className="w-12 h-12 object-contain"
className="object-contain w-12 h-12"
/>
</div>
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
<span className="text-sm text-gray-300 transition-colors duration-300 group-hover:text-white">
{tech.name}
</span>
</motion.div>
@@ -797,18 +797,18 @@ const IOSKeyBenefits = () => {
return (
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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-16"
className="mb-16 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
Why Choose Native iOS for Your App?
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
iOS development offers unparalleled advantages for businesses
looking to create premium mobile experiences.
</p>
@@ -819,7 +819,7 @@ const IOSKeyBenefits = () => {
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 max-w-6xl mx-auto"
className="grid max-w-6xl gap-8 mx-auto md:grid-cols-2 lg:grid-cols-3"
>
{benefits.slice(0, 3).map((benefit, index) => {
const IconComponent = benefit.icon;
@@ -833,15 +833,15 @@ const IOSKeyBenefits = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
<IconComponent className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{benefit.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{benefit.description}
</p>
</CardContent>
@@ -857,7 +857,7 @@ const IOSKeyBenefits = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
className="grid max-w-4xl gap-8 mx-auto mt-8 md:grid-cols-2"
>
{benefits.slice(3).map((benefit, index) => {
const IconComponent = benefit.icon;
@@ -871,15 +871,15 @@ const IOSKeyBenefits = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
<IconComponent className="w-8 h-8 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
<h3 className="mb-4 text-xl font-semibold text-foreground">
{benefit.title}
</h3>
<p className="text-muted-foreground leading-relaxed">
<p className="leading-relaxed text-muted-foreground">
{benefit.description}
</p>
</CardContent>
@@ -926,18 +926,18 @@ const IOSTechnologies = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
iOS Development Technologies
</h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
We leverage the latest iOS technologies and frameworks to build
exceptional apps.
</p>
@@ -948,7 +948,7 @@ const IOSTechnologies = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto"
className="grid max-w-6xl gap-12 mx-auto lg:grid-cols-2"
>
{technologies.map((tech, index) => {
const IconComponent = tech.icon;
@@ -962,18 +962,18 @@ const IOSTechnologies = () => {
whileHover={{ y: -5 }}
className="group"
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
<Card className="h-full overflow-hidden transition-all duration-300 border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-0">
{/* Image Section */}
<div className="relative h-48 overflow-hidden">
<ImageWithFallback
src={tech.image}
alt={tech.title}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/90 via-transparent to-transparent" />
<div className="absolute bottom-4 left-4">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
<IconComponent className="w-6 h-6 text-accent" />
</div>
</div>
@@ -981,16 +981,16 @@ const IOSTechnologies = () => {
{/* Content Section */}
<div className="p-8">
<h3 className="text-2xl font-semibold text-white mb-4">
<h3 className="mb-4 text-2xl font-semibold text-white">
{tech.title}
</h3>
<p className="text-gray-300 leading-relaxed mb-6">
<p className="mb-6 leading-relaxed text-gray-300">
{tech.description}
</p>
{/* Features List */}
<div className="space-y-2">
<h4 className="text-sm font-medium text-white mb-3">
<h4 className="mb-3 text-sm font-medium text-white">
Key Features:
</h4>
<div className="grid grid-cols-2 gap-2">
@@ -999,7 +999,7 @@ const IOSTechnologies = () => {
key={idx}
className="flex items-center gap-2 text-sm text-gray-300"
>
<CheckCircle className="w-4 h-4 text-accent flex-shrink-0" />
<CheckCircle className="flex-shrink-0 w-4 h-4 text-accent" />
<span>{feature}</span>
</div>
))}
@@ -1021,7 +1021,7 @@ const IOSTechnologies = () => {
export const IOSAppDevelopment = () => {
const navigate = useNavigate();
return (
<div className="dark min-h-screen">
<div className="min-h-screen dark">
{/* <Navigation /> */}
<section className="bg-black">
@@ -1082,7 +1082,7 @@ export const IOSAppDevelopment = () => {
{/* CTA Section */}
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1090,27 +1090,27 @@ export const IOSAppDevelopment = () => {
viewport={{ once: true }}
className="text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
Ready to Build Your Next iOS App?
</h2>
<p className="text-lg text-muted-foreground mb-12 max-w-2xl mx-auto">
<p className="max-w-2xl mx-auto mb-12 text-lg text-muted-foreground">
Partner with us to create exceptional iOS applications that
delight users and drive business success.
</p>
<div className="flex flex-col sm:flex-row gap-6 justify-center">
<div className="flex flex-col justify-center gap-6 sm:flex-row">
<ShimmerButton
className="text-lg px-8 py-4 h-auto"
className="h-auto px-8 py-4 text-lg"
onClick={() => navigate("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Apple className="w-5 h-5 flex-shrink-0" />
<Apple className="flex-shrink-0 w-5 h-5" />
<span>Start Your iOS Project</span>
</div>
</ShimmerButton>
<Button
variant="outline"
size="lg"
className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
className="h-auto px-8 py-4 text-lg border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
>
<Calendar className="w-5 h-5 mr-2" />
Schedule Consultation

4
src/Router.tsx
View File

@@ -128,7 +128,7 @@ import { ThankYou } from "../pages/ThankYou";
// Project Pages
import { RegroupProject } from "../pages/RegroupProject";
import { SeezunProject } from "../pages/SeezunProject";
// import { SeezunProject } from "../pages/SeezunProject";
import { WokaProject } from "../pages/WokaProject";
import { TanamiProject } from "../pages/TanamiProject";
import { TradersCircuitProject } from "../pages/TradersCircuitProject";
@@ -350,7 +350,7 @@ export const AppRouter = () => (
{/* PROJECT PAGES */}
<Route path="/projects/regroup" element={<RegroupProject />} />
<Route path="/projects/seezun" element={<SeezunProject />} />
{/* <Route path="/projects/seezun" element={<SeezunProject />} /> */}
<Route path="/projects/woka" element={<WokaProject />} />
<Route path="/projects/tanami" element={<TanamiProject />} />
<Route path="/projects/traderscircuit" element={<TradersCircuitProject />} />