2025-09-01 18:16:11 +05:30
import React from "react" ;
import { Navigation } from "../components/Navigation" ;
import { Footer } from "../components/Footer" ;
import { Button } from "../components/ui/button" ;
import { Badge } from "../components/ui/badge" ;
import { Card , CardContent } from "../components/ui/card" ;
import { ArrowRight , Calendar , Users , Smartphone , Globe , Check , Star , TrendingUp , MapPin , Shield , Navigation as NavigationIcon , Zap , Heart , Target , AlertCircle , Clock , UserCheck } from "lucide-react" ;
import { ImageWithFallback } from "../components/figma/ImageWithFallback" ;
2025-09-23 20:13:31 +05:30
import { useNavigate } from "react-router-dom" ;
2025-09-01 18:16:11 +05:30
export const AmbleProject = ( ) = > {
2025-09-23 20:13:31 +05:30
const navigate = useNavigate ( ) ;
2025-09-01 18:16:11 +05:30
return (
< div className = "dark min-h-screen bg-background" >
2025-09-23 20:13:31 +05:30
{ /* <Navigation /> */ }
2025-09-01 18:16:11 +05:30
{ /* Hero Section */ }
< section className = "pt-24 pb-16 bg-background relative overflow-hidden" >
< div className = "absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" / >
< div className = "container mx-auto px-6 lg:px-8 relative" >
< div className = "grid lg:grid-cols-2 gap-12 items-center" >
< div >
< div className = "flex items-center gap-2 mb-6" >
< Badge className = "bg-[#E5195E]/10 text-[#E5195E] border border-[#E5195E]/20 font-manrope" >
< MapPin className = "w-4 h-4 mr-2" / >
Navigation App Case Study
< / Badge >
< / div >
< h1 className = "text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope" >
Amble App
< / h1 >
< p className = "text-xl text-muted-foreground mb-8 font-manrope" >
Accessible Navigation & Community Engagement App - Making urban exploration easier and more inclusive for everyone
< / p >
{ /* Tech Stack */ }
< div className = "flex flex-wrap gap-2 mb-8" >
{ [ "React Native" , "Node.js" , "MongoDB" , "Google Maps API" , "Firebase Auth" ] . map ( ( tech ) = > (
< Badge key = { tech } variant = "outline" className = "border-white/20 text-white font-manrope" >
{ tech }
< / Badge >
) ) }
< / div >
{ /* Key Metrics */ }
< div className = "grid grid-cols-2 md:grid-cols-4 gap-4 mb-8" >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< Calendar className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > 4 months < / div >
< div className = "text-xs text-muted-foreground font-manrope" > Duration < / div >
< / div >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< Users className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > 6 experts < / div >
< div className = "text-xs text-muted-foreground font-manrope" > Team Size < / div >
< / div >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< Smartphone className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > iOS / Android < / div >
< div className = "text-xs text-muted-foreground font-manrope" > Platforms < / div >
< / div >
< div className = "text-center p-3 bg-card/30 rounded-lg border border-white/10" >
< Star className = "w-5 h-5 text-[#E5195E] mx-auto mb-2" / >
< div className = "text-lg font-bold text-white font-manrope" > 4.6 ★ < / div >
< div className = "text-xs text-muted-foreground font-manrope" > App Rating < / div >
< / div >
< / div >
{ /* Key Achievements */ }
< div className = "space-y-3 mb-8" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Key Achievements : < / h3 >
{ [
"Successfully launched the MVP on both iOS & Android within planned timeline" ,
"Integrated location-based recommendations and event listings" ,
"Achieved 4.6★ rating on initial release in app stores" ,
"Built comprehensive accessibility features for inclusive navigation"
] . map ( ( achievement , index ) = > (
< div key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { achievement } < / span >
< / div >
) ) }
< / div >
{ /* CTA Buttons */ }
< div className = "flex flex-col sm:flex-row gap-4" >
< Button
size = "lg"
className = "bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/start-a-project' ) }
2025-09-01 18:16:11 +05:30
>
Build Your Navigation App
< ArrowRight className = "w-5 h-5 ml-2" / >
< / Button >
< Button
size = "lg"
variant = "outline"
className = "border-white/20 text-white hover:bg-white/10 font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/case-studies' ) }
2025-09-01 18:16:11 +05:30
>
View More Cases
< / Button >
< / div >
< / div >
< div className = "relative" >
< div className = "aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10" >
< ImageWithFallback
src = "/images/amble-app-mockup.jpg"
alt = "Amble Navigation App"
className = "w-full h-full object-cover rounded-lg"
/ >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Executive Summary */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-6 font-manrope" > Executive Summary < / h2 >
< p className = "text-lg text-muted-foreground leading-relaxed font-manrope mb-6" >
Amble is designed to make urban exploration easier and more inclusive . The platform offers curated walking routes , community event listings , and accessibility information for public places , enabling residents and tourists to discover and navigate cities effortlessly .
< / p >
< p className = "text-lg text-muted-foreground leading-relaxed font-manrope" >
The comprehensive mobile application bridges the gap between navigation tools that lack accessibility information and provides a community - driven platform for discovering local experiences within a single , user - friendly interface .
< / p >
< / div >
< / div >
< / section >
{ /* Project Overview */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Project Overview < / h2 >
< div className = "grid md:grid-cols-3 gap-8" >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< Target className = "w-8 h-8 text-[#E5195E] mb-4" / >
< h3 className = "text-xl font-semibold text-white mb-3 font-manrope" > Background & Context < / h3 >
< p className = "text-muted-foreground font-manrope" >
Many city navigation tools lack accessibility information or curated local experiences . Amble fills this gap by offering inclusive route planning , community - driven recommendations , and event discovery features within a single mobile app .
< / p >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< Users className = "w-8 h-8 text-[#E5195E] mb-4" / >
< h3 className = "text-xl font-semibold text-white mb-3 font-manrope" > Target Audience < / h3 >
< p className = "text-muted-foreground font-manrope" >
City residents looking for events and walks , tourists exploring new cities , and people with mobility needs requiring accessibility data for inclusive urban navigation and community engagement .
< / p >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< TrendingUp className = "w-8 h-8 text-[#E5195E] mb-4" / >
< h3 className = "text-xl font-semibold text-white mb-3 font-manrope" > Business Objectives < / h3 >
< p className = "text-muted-foreground font-manrope" >
Build an MVP with core walking route and event discovery features , include accessibility tags for public places and routes , enable social sharing of routes and events , and launch in select pilot cities with potential for rapid scaling .
< / p >
< / CardContent >
< / Card >
< / div >
< / div >
< / div >
< / section >
{ /* Project Scope */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Project Scope < / h2 >
< div className = "grid md:grid-cols-2 gap-12" >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Core Features < / h3 >
< div className = "space-y-4" >
{ [
"Curated Walking Routes with distance, duration, and difficulty filters" ,
"Accessibility Information for public spaces and landmarks" ,
"Local Event Listings with date, location, and category filters" ,
"User Profiles for saving favorites and personalizing recommendations" ,
"Push Notifications for upcoming events or nearby attractions" ,
"Offline Mode for preloaded routes and maps"
] . map ( ( feature , index ) = > (
< div key = { index } className = "flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope text-sm" > { feature } < / span >
< / div >
) ) }
< / div >
< / div >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Technical Requirements < / h3 >
< div className = "space-y-4" >
{ [
"GPS-based real-time location tracking" ,
"Map rendering using Google Maps API" ,
"Cross-platform mobile support via React Native" ,
"Secure user authentication via Firebase" ,
"Cloud-based database with offline sync capabilities"
] . map ( ( requirement , index ) = > (
< div key = { index } className = "flex items-start gap-3 p-3 bg-background/50 rounded-lg border border-white/10" >
< Shield className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope text-sm" > { requirement } < / span >
< / div >
) ) }
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Challenges & Solution Architecture */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Challenges & Solution Architecture < / h2 >
< div className = "grid md:grid-cols-2 gap-12 mb-16" >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Technical Challenges < / h3 >
< div className = "space-y-4" >
{ [
"Ensuring accurate GPS tracking in dense urban areas" ,
"Managing offline data sync for routes and events" ,
"Designing for accessibility compliance (WCAG standards)"
] . map ( ( challenge , index ) = > (
< div key = { index } className = "flex items-start gap-3" >
< AlertCircle className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope" > { challenge } < / span >
< / div >
) ) }
< / div >
< / div >
< div >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Project Management Challenges < / h3 >
< div className = "space-y-4" >
{ [
"Coordinating with local authorities for accessibility data" ,
"Gathering high-quality route content for launch cities" ,
"Delivering MVP within 4-month development window"
] . map ( ( challenge , index ) = > (
< div key = { index } className = "flex items-start gap-3" >
< AlertCircle className = "w-5 h-5 text-[#E5195E] flex-shrink-0 mt-0.5" / >
< span className = "text-muted-foreground font-manrope" > { challenge } < / span >
< / div >
) ) }
< / div >
< / div >
< / div >
< div className = "bg-card/50 p-8 rounded-xl border border-white/10" >
< h3 className = "text-xl font-semibold text-white mb-6 font-manrope" > Technical Architecture < / h3 >
< div className = "grid md:grid-cols-2 gap-8" >
< div >
< h4 className = "text-lg font-semibold text-white mb-4 font-manrope" > Technology Stack < / h4 >
< div className = "space-y-3" >
{ [
{ label : "Frontend" , value : "React Native" } ,
{ label : "Backend" , value : "Node.js, Express.js" } ,
{ label : "Database" , value : "MongoDB" } ,
{ label : "Maps & Location" , value : "Google Maps API" } ,
{ label : "Authentication" , value : "Firebase Authentication" } ,
{ label : "Notifications" , value : "Push Notifications" }
] . map ( ( item , index ) = > (
< div key = { index } className = "flex justify-between items-center p-3 bg-background/50 rounded-lg border border-white/10" >
< span className = "text-muted-foreground font-manrope" > { item . label } : < / span >
< span className = "text-white font-medium font-manrope text-sm" > { item . value } < / span >
< / div >
) ) }
< / div >
< / div >
< div >
< h4 className = "text-lg font-semibold text-white mb-4 font-manrope" > Architecture Highlights < / h4 >
< div className = "space-y-3" >
{ [
"React Native mobile app with modular feature components" ,
"Node.js backend with REST API for events, routes, and accessibility data" ,
"MongoDB database with geospatial indexing for location queries" ,
"Firebase Auth for secure, scalable authentication" ,
"Push notification service for engagement campaigns"
] . map ( ( highlight , index ) = > (
< div key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground text-sm font-manrope" > { highlight } < / span >
< / div >
) ) }
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Development Process */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Development Process & Methodology < / h2 >
< div className = "mb-12" >
< div className = "text-center mb-8" >
< p className = "text-lg text-muted-foreground font-manrope" >
< strong > Agile < / strong > ( weekly sprints ) with weekly sprint planning , mid - sprint QA cycles for early bug detection , and client demos at the end of each sprint
< / p >
< / div >
< div className = "grid md:grid-cols-2 lg:grid-cols-3 gap-6" >
{ [
{
phase : "Discovery & Planning" ,
duration : "2 weeks" ,
description : "Feature prioritization, UI/UX wireframing, technical feasibility review"
} ,
{
phase : "Design & Prototyping" ,
duration : "3 weeks" ,
description : "Mobile UI design for both platforms, map interface prototypes"
} ,
{
phase : "Core Development" ,
duration : "6 weeks" ,
description : "Walking route module, event listing module, user authentication and profiles"
} ,
{
phase : "Integration & Testing" ,
duration : "4 weeks" ,
description : "Google Maps API integration, push notifications setup, offline mode implementation"
} ,
{
phase : "Launch & Handover" ,
duration : "1 week" ,
description : "App store submission, documentation and client training"
}
] . map ( ( item , index ) = > (
< Card key = { index } className = "bg-background/50 border-white/10" >
< CardContent className = "p-6" >
< div className = "flex items-center justify-between mb-3" >
< div className = "w-8 h-8 bg-[#E5195E] rounded-full flex items-center justify-center text-white font-bold text-sm font-manrope" >
{ index + 1 }
< / div >
< Badge variant = "outline" className = "border-[#E5195E]/30 text-[#E5195E] font-manrope" >
{ item . duration }
< / Badge >
< / div >
< h3 className = "text-lg font-semibold text-white mb-2 font-manrope" > { item . phase } < / h3 >
< p className = "text-sm text-muted-foreground font-manrope" > { item . description } < / p >
< / CardContent >
< / Card >
) ) }
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Key Features */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Key Features & Functionality < / h2 >
< div className = "grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12" >
{ [
{
icon : NavigationIcon ,
title : "Curated Routes" ,
description : "Localized walking routes with difficulty levels"
} ,
{
icon : Calendar ,
title : "Events Module" ,
description : "Browse, filter, and save local events"
} ,
{
icon : Heart ,
title : "Accessibility Data" ,
description : "Information on ramps, elevators, and accessible restrooms"
} ,
{
icon : Globe ,
title : "Offline Maps" ,
description : "Preload maps and routes for low-connectivity situations"
} ,
{
icon : UserCheck ,
title : "Personalization" ,
description : "Save favorites and receive tailored recommendations"
} ,
{
icon : Zap ,
title : "Push Notifications" ,
description : "Stay updated on nearby events and attractions"
}
] . map ( ( feature , index ) = > (
< Card key = { index } className = "bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300" >
< CardContent className = "p-6 text-center" >
< feature.icon className = "w-8 h-8 text-[#E5195E] mx-auto mb-4" / >
< h3 className = "text-lg font-semibold text-white mb-3 font-manrope" > { feature . title } < / h3 >
< p className = "text-muted-foreground text-sm font-manrope" > { feature . description } < / p >
< / CardContent >
< / Card >
) ) }
< / div >
< / div >
< / div >
< / section >
{ /* Results & Impact */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-6xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Results & Impact < / h2 >
< div className = "grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12" >
{ [
{ label : "GPS Accuracy" , value : "±6m" , icon : MapPin , desc : "average accuracy" } ,
{ label : "API Response" , value : "150ms" , icon : Zap , desc : "average response time" } ,
{ label : "Platform Uptime" , value : "99.9%" , icon : Shield , desc : "first 3 months" }
] . map ( ( metric , index ) = > (
< Card key = { index } className = "bg-background/50 border-white/10 text-center" >
< CardContent className = "p-6" >
< metric.icon className = "w-8 h-8 text-[#E5195E] mx-auto mb-3" / >
< div className = "text-2xl font-bold text-white mb-1 font-manrope" > { metric . value } < / div >
< div className = "text-muted-foreground text-sm font-manrope" > { metric . label } < / div >
< div className = "text-xs text-muted-foreground font-manrope" > { metric . desc } < / div >
< / CardContent >
< / Card >
) ) }
< / div >
< div className = "grid md:grid-cols-2 gap-8" >
< div >
< h3 className = "text-xl font-semibold text-white mb-4 font-manrope" > Business Impact < / h3 >
< ul className = "space-y-3" >
{ [
"Positive reception in pilot cities" ,
"Enhanced visibility for local events and businesses" ,
"Increased engagement via push notifications"
] . map ( ( impact , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { impact } < / span >
< / li >
) ) }
< / ul >
< / div >
< div >
< h3 className = "text-xl font-semibold text-white mb-4 font-manrope" > Technical Performance < / h3 >
< ul className = "space-y-3" >
{ [
"Average GPS accuracy: ±6 meters" ,
"API response time: 150ms average" ,
"99.9% uptime in first 3 months post-launch"
] . map ( ( performance , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Check className = "w-5 h-5 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { performance } < / span >
< / li >
) ) }
< / ul >
< / div >
< / div >
< / div >
< / div >
< / section >
{ /* Lessons Learned */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-12 text-center font-manrope" > Lessons Learned & Best Practices < / h2 >
< div className = "grid md:grid-cols-2 gap-8" >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > What Worked Well < / h3 >
< ul className = "space-y-2" >
{ [
"Early UI/UX prototyping improved development speed" ,
"Using Firebase for authentication reduced backend complexity"
] . map ( ( item , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Check className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { item } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Key Learnings < / h3 >
< ul className = "space-y-2" >
{ [
"Offline mode was more critical for adoption than anticipated" ,
"Partnering with local organizations improved accessibility data accuracy"
] . map ( ( item , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< TrendingUp className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { item } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< / div >
< / div >
< / div >
< / section >
{ /* Client Testimonial */ }
< section className = "py-16 bg-card/30" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto text-center" >
< div className = "flex justify-center mb-6" >
{ [ . . . Array ( 5 ) ] . map ( ( _ , i ) = > (
< Star key = { i } className = "w-6 h-6 text-[#E5195E] fill-current" / >
) ) }
< / div >
< blockquote className = "text-xl md:text-2xl text-white mb-6 font-manrope italic" >
"WDI delivered exactly what we envisioned for Amble — an intuitive, inclusive navigation app. Their team understood our mission and translated it into a smooth, polished product that our users love."
< / blockquote >
< div className = "text-muted-foreground font-manrope" >
< div className = "font-semibold text-white" > Founder , Amble < / div >
< div > Navigation App Client < / div >
< / div >
< / div >
< / div >
< / section >
{ /* Future Roadmap */ }
< section className = "py-16 bg-background" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto" >
< h2 className = "text-3xl font-bold text-white mb-8 text-center font-manrope" > Future Roadmap < / h2 >
< div className = "grid md:grid-cols-2 gap-8" >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Next 6 Months < / h3 >
< ul className = "space-y-2" >
{ [
"Expand to 10 more cities" ,
"Add voice navigation for visually impaired users"
] . map ( ( feature , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Clock className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { feature } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< Card className = "bg-card/50 border-white/10" >
< CardContent className = "p-6" >
< h3 className = "text-lg font-semibold text-white mb-4 font-manrope" > Next 12 Months < / h3 >
< ul className = "space-y-2" >
{ [
"Gamification features for walking challenges" ,
"Integration with public transit APIs"
] . map ( ( vision , index ) = > (
< li key = { index } className = "flex items-center gap-3" >
< Target className = "w-4 h-4 text-[#E5195E] flex-shrink-0" / >
< span className = "text-muted-foreground font-manrope" > { vision } < / span >
< / li >
) ) }
< / ul >
< / CardContent >
< / Card >
< / div >
< / div >
< / div >
< / section >
{ /* CTA Section */ }
< section className = "py-16 bg-gradient-to-r from-[#E5195E]/10 via-background to-[#E5195E]/10" >
< div className = "container mx-auto px-6 lg:px-8" >
< div className = "max-w-4xl mx-auto text-center" >
< h2 className = "text-3xl md:text-4xl font-bold text-white mb-6 font-manrope" >
Ready to Build Your Navigation App ?
< / h2 >
< p className = "text-lg text-muted-foreground mb-8 font-manrope" >
Create accessible , inclusive mobile applications that empower users to explore and navigate their world with confidence .
< / p >
< div className = "flex flex-col sm:flex-row gap-4 justify-center" >
< Button
size = "lg"
className = "bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/start-a-project' ) }
2025-09-01 18:16:11 +05:30
>
Start Your Project
< ArrowRight className = "w-5 h-5 ml-2" / >
< / Button >
< Button
size = "lg"
variant = "outline"
className = "border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"
2025-09-23 20:13:31 +05:30
onClick = { ( ) = > navigate ( '/case-studies' ) }
2025-09-01 18:16:11 +05:30
>
View More Cases
< / Button >
< / div >
< / div >
< / div >
< / section >
2025-09-23 20:13:31 +05:30
{ /* <Footer /> */ }
2025-09-01 18:16:11 +05:30
< / div >
) ;
} ;
