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

worked on the content update

Browse Source
This commit is contained in:
Parth Ramani
2026-03-19 19:37:16 +05:30
parent e09c0033bb
commit 6451c09ea5
16 changed files with 150 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
pages/AmbleProject.tsx
View File

@@ -4,6 +4,7 @@ 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 ambleImg from "../assets/amble.png"
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";
import { useNavigate } from "react-router-dom";
@@ -13,7 +14,7 @@ export const AmbleProject = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* 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" />
@@ -26,11 +27,11 @@ export const AmbleProject = () => {
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>
@@ -86,7 +87,7 @@ export const AmbleProject = () => {
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -94,7 +95,7 @@ export const AmbleProject = () => {
Build Your Navigation App
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -107,8 +108,8 @@ export const AmbleProject = () => {
<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"
<ImageWithFallback
src={ambleImg}
alt="Amble Navigation App"
className="w-full h-full object-cover rounded-lg"
/>
@@ -138,7 +139,7 @@ export const AmbleProject = () => {
<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">
@@ -179,7 +180,7 @@ export const AmbleProject = () => {
<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>
@@ -227,7 +228,7 @@ export const AmbleProject = () => {
<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>
@@ -312,38 +313,38 @@ export const AmbleProject = () => {
<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",
{
phase: "Discovery & Planning",
duration: "2 weeks",
description: "Feature prioritization, UI/UX wireframing, technical feasibility review"
},
{
phase: "Design & Prototyping",
{
phase: "Design & Prototyping",
duration: "3 weeks",
description: "Mobile UI design for both platforms, map interface prototypes"
},
{
phase: "Core Development",
{
phase: "Core Development",
duration: "6 weeks",
description: "Walking route module, event listing module, user authentication and profiles"
},
{
phase: "Integration & Testing",
{
phase: "Integration & Testing",
duration: "4 weeks",
description: "Google Maps API integration, push notifications setup, offline mode implementation"
},
{
phase: "Launch & Handover",
{
phase: "Launch & Handover",
duration: "1 week",
description: "App store submission, documentation and client training"
}
@@ -374,7 +375,7 @@ export const AmbleProject = () => {
<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">
{[
{
@@ -426,7 +427,7 @@ export const AmbleProject = () => {
<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" },
@@ -486,7 +487,7 @@ export const AmbleProject = () => {
<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">
@@ -551,7 +552,7 @@ export const AmbleProject = () => {
<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">
@@ -602,7 +603,7 @@ export const AmbleProject = () => {
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
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -610,7 +611,7 @@ export const AmbleProject = () => {
Start Your Project
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"