case study changes
This commit is contained in:
priyanshuvish
628
pages/AmbleProject.tsx
Normal file
628
pages/AmbleProject.tsx
Normal file
@@ -0,0 +1,628 @@
|
||||
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 { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
|
||||
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" />
|
||||
<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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
View More Cases
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
634
pages/AmozProject.tsx
Normal file
634
pages/AmozProject.tsx
Normal file
@@ -0,0 +1,634 @@
|
||||
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, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
|
||||
export const AmozProject = () => {
|
||||
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" />
|
||||
<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">
|
||||
<Brain className="w-4 h-4 mr-2" />
|
||||
AI Social Commerce Case Study
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
|
||||
Amoz Platform
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-8 font-manrope">
|
||||
AI-Powered Social Commerce Platform - Merging social networking and e-commerce with AI-driven recommendations and influencer monetization capabilities
|
||||
</p>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{["React Native", "Next.js", "Node.js", "PostgreSQL", "TensorFlow", "AWS"].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">6 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">8 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">
|
||||
<Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
|
||||
<div className="text-lg font-bold text-white font-manrope">iOS/Android/Web</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">
|
||||
<DollarSign className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
|
||||
<div className="text-lg font-bold text-white font-manrope">$1.2M</div>
|
||||
<div className="text-xs text-muted-foreground font-manrope">Q1 Transactions</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>
|
||||
{[
|
||||
"Onboarded 5,000+ merchants in first 2 months post-launch",
|
||||
"AI recommendation engine achieved 28% increase in user engagement",
|
||||
"Processed $1.2M in transactions within first quarter",
|
||||
"Built unified social + shopping platform with AI-driven personalization"
|
||||
].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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
Build Your AI Commerce Platform
|
||||
<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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
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/amoz-platform-mockup.jpg"
|
||||
alt="Amoz AI-Powered Social Commerce Platform"
|
||||
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">
|
||||
Amoz merges social networking and e-commerce into a single platform, enabling influencers, small businesses, and users to connect, showcase products, and transact seamlessly. AI-driven recommendations enhance product discovery, while built-in messaging and content creation tools drive community engagement.
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed font-manrope">
|
||||
The comprehensive platform bridges the gap between content and transactions, integrating influencer marketing, live product showcases, and frictionless purchasing to create the preferred shopping experience for younger demographics seeking social commerce solutions.
|
||||
</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">
|
||||
Social commerce is rapidly becoming the preferred shopping experience for younger demographics, but existing solutions often split content and transactions across multiple apps. Amoz bridges this gap with a unified social + shopping platform, integrating influencer marketing, live product showcases, and frictionless purchasing.
|
||||
</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">
|
||||
Influencers & content creators looking to monetize their audience, small-to-medium online merchants seeking social selling platforms, and young consumers seeking social shopping experiences with integrated content discovery and purchasing capabilities.
|
||||
</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">
|
||||
Create a mobile-first platform combining content and commerce, provide AI-driven personalized product recommendations, enable secure, fast, and user-friendly checkout experience, and offer built-in tools for influencers to monetize their audience effectively.
|
||||
</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">
|
||||
{[
|
||||
"AI-Powered Product Recommendations based on browsing, social interactions, and purchase history",
|
||||
"Influencer Storefronts allowing creators to sell directly via profiles",
|
||||
"Live Product Showcases with integrated purchase options",
|
||||
"In-App Messaging for buyer-seller and community engagement",
|
||||
"Secure Payments with Stripe and multiple local payment gateways",
|
||||
"Order Tracking with push notifications and delivery updates"
|
||||
].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">
|
||||
{[
|
||||
"Scalable microservices backend",
|
||||
"Real-time chat and live streaming capability",
|
||||
"AI/ML integration for recommendation algorithms",
|
||||
"Payment gateway compliance with PCI DSS standards",
|
||||
"AWS-based cloud infrastructure for hosting and media storage"
|
||||
].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">
|
||||
{[
|
||||
"Balancing performance with heavy image/video content",
|
||||
"Building a real-time recommendation system with low latency",
|
||||
"Implementing seamless live shopping experiences without lag"
|
||||
].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 between AI, frontend, and payment teams",
|
||||
"Managing content moderation for a social platform",
|
||||
"Handling rapid feature iterations while maintaining stability"
|
||||
].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, Next.js" },
|
||||
{ label: "Backend", value: "Node.js, Express.js" },
|
||||
{ label: "Database", value: "PostgreSQL, Redis" },
|
||||
{ label: "AI/ML", value: "TensorFlow for recommendation engine" },
|
||||
{ label: "Payments", value: "Stripe Payments" },
|
||||
{ label: "Infrastructure", value: "AWS S3, Firebase Cloud Messaging" }
|
||||
].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">
|
||||
{[
|
||||
"Hybrid cloud deployment leveraging AWS EC2, S3, and CloudFront for media delivery",
|
||||
"AI microservice for recommendations and personalization",
|
||||
"Event-driven architecture using Redis Pub/Sub for real-time updates",
|
||||
"Multi-tier security with encryption at rest and in transit",
|
||||
"Optimized media compression pipeline for faster load times"
|
||||
].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> (2-week sprints) with feature prioritization with merchant and influencer input, weekly demos for stakeholders, continuous integration with automated deployments to staging
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
phase: "Discovery & Planning",
|
||||
duration: "3 weeks",
|
||||
description: "Market analysis of social commerce trends, AI recommendation system design, payment integration planning"
|
||||
},
|
||||
{
|
||||
phase: "Design & Prototyping",
|
||||
duration: "5 weeks",
|
||||
description: "Wireframes for influencer storefronts & live shopping pages, AI model training on sample product datasets"
|
||||
},
|
||||
{
|
||||
phase: "Core Development",
|
||||
duration: "10 weeks",
|
||||
description: "Social feed & product catalog integration, influencer tools & storefronts, recommendation engine integration"
|
||||
},
|
||||
{
|
||||
phase: "Live Shopping & Messaging",
|
||||
duration: "5 weeks",
|
||||
description: "Real-time video streaming module, in-app chat and engagement features"
|
||||
},
|
||||
{
|
||||
phase: "Testing & Optimization",
|
||||
duration: "3 weeks",
|
||||
description: "Load & stress testing for peak events, AI accuracy tuning"
|
||||
},
|
||||
{
|
||||
phase: "Launch & Scaling",
|
||||
duration: "2 weeks",
|
||||
description: "Beta rollout to select merchants & influencers, marketing support and onboarding sessions"
|
||||
}
|
||||
].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: TrendingUp,
|
||||
title: "Social Feed",
|
||||
description: "Curated content from influencers & merchants"
|
||||
},
|
||||
{
|
||||
icon: Brain,
|
||||
title: "Personalized Recommendations",
|
||||
description: "AI-driven product suggestions"
|
||||
},
|
||||
{
|
||||
icon: Play,
|
||||
title: "Live Shopping",
|
||||
description: "Real-time events with integrated checkout"
|
||||
},
|
||||
{
|
||||
icon: MessageCircle,
|
||||
title: "Direct Messaging",
|
||||
description: "Buyer-seller communication within the app"
|
||||
},
|
||||
{
|
||||
icon: CreditCard,
|
||||
title: "Multi-Channel Payments",
|
||||
description: "Stripe, local wallets, and COD options"
|
||||
},
|
||||
{
|
||||
icon: ShoppingBag,
|
||||
title: "Influencer Storefronts",
|
||||
description: "Creator-driven product showcases and sales"
|
||||
}
|
||||
].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-4 gap-6 mb-12">
|
||||
{[
|
||||
{ label: "Merchant Onboarding", value: "5,000+", icon: Users, desc: "first 2 months" },
|
||||
{ label: "Engagement Increase", value: "28%", icon: TrendingUp, desc: "AI recommendations" },
|
||||
{ label: "Q1 Transactions", value: "$1.2M", icon: DollarSign, desc: "processed" },
|
||||
{ label: "AI Response Time", value: "180ms", icon: Zap, desc: "average" }
|
||||
].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">
|
||||
{[
|
||||
"28% higher engagement from personalized recommendations",
|
||||
"Increased merchant sales through influencer storefronts",
|
||||
"Faster product discovery and higher repeat purchase rates"
|
||||
].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 AI recommendation response time: 180ms",
|
||||
"Live stream latency: < 2 seconds",
|
||||
"99.9% uptime in first 90 days"
|
||||
].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">
|
||||
{[
|
||||
"AI-first design approach improved engagement from day one",
|
||||
"Early influencer partnerships boosted platform credibility"
|
||||
].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">
|
||||
{[
|
||||
"Live shopping events require extensive pre-launch testing",
|
||||
"Merchant onboarding must include content quality training"
|
||||
].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 understood the vision for Amoz perfectly — merging social and commerce in a seamless experience. The AI recommendations have been a game changer for engagement and sales."
|
||||
</blockquote>
|
||||
<div className="text-muted-foreground font-manrope">
|
||||
<div className="font-semibold text-white">Founders, Amoz</div>
|
||||
<div>Social Commerce Platform 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">
|
||||
{[
|
||||
"AI-driven influencer matching for merchants",
|
||||
"Multi-language support for broader market reach"
|
||||
].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">
|
||||
{[
|
||||
"Augmented reality (AR) product previews",
|
||||
"Cross-border merchant onboarding and international payment integration"
|
||||
].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 AI Commerce Platform?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8 font-manrope">
|
||||
Create innovative social commerce solutions that merge AI-powered recommendations with seamless shopping experiences for the next generation of consumers.
|
||||
</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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
View More Cases
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,81 +1,70 @@
|
||||
import React, { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import {
|
||||
Activity,
|
||||
ArrowRight,
|
||||
ArrowUpRight,
|
||||
Award,
|
||||
Building2,
|
||||
FlaskConical,
|
||||
Globe,
|
||||
Heart,
|
||||
Package,
|
||||
PartyPopper,
|
||||
Search,
|
||||
ShoppingCart,
|
||||
Star,
|
||||
Tractor,
|
||||
TrendingUp,
|
||||
Trophy,
|
||||
Tv,
|
||||
Users,
|
||||
Utensils
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { navigateTo } from "../App";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { Input } from "../components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
|
||||
import {
|
||||
Search, Filter, ArrowRight, ExternalLink, Clock, Users, TrendingUp,
|
||||
Star, Award, Building2, Smartphone, Heart, ShoppingCart, GraduationCap,
|
||||
FileText, ArrowUpRight
|
||||
} from "lucide-react";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
import { navigateTo } from "../App";
|
||||
import ranoutofLocalImage from '../src/images/ranoutof.webp';
|
||||
import regroupLocalImage from '../src/images/regroup.webp';
|
||||
import seezunLocalImage from '../src/images/seezun.webp';
|
||||
import tanamiLocalImage from '../src/images/tanami.webp';
|
||||
import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
|
||||
import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
|
||||
import goodTimesLocalImage from '../src/images/goodtimes.webp';
|
||||
import prospertyLocalImage from '../src/images/prosperty.webp';
|
||||
import { Helmet } from "react-helmet-async";
|
||||
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 tcCase from "../src/images/tc-case.webp";
|
||||
import wokaCase from "../src/images/woka-case.webp";
|
||||
import gtCase from "../src/images/gt-case.webp";
|
||||
import RrCase from "../src/images/resturant-reward-case.webp";
|
||||
import dkCase from "../src/images/dkCase.webp";
|
||||
import vib360Case from "../src/images/vib360Case.webp";
|
||||
import niftyCase from "../src/images/niftyCase.webp";
|
||||
import prospertyCase from "../src/images/prospertyCase.webp";
|
||||
import simplitendCase from "../src/images/simplitendCase.webp";
|
||||
import amozCase from "../src/images/amozCase.webp";
|
||||
import farmCase from "../src/images/farmCase.webp";
|
||||
import leanCase from "../src/images/leanCase.webp";
|
||||
|
||||
|
||||
// High-quality project images
|
||||
const ranOutOfImage = ranoutofLocalImage;
|
||||
const seezunImage = seezunLocalImage;
|
||||
const wokaImage = wokasideawardLocalImage;
|
||||
const regroupImage = regroupLocalImage;
|
||||
const tanamiImage = tanamiLocalImage;
|
||||
const tradersCircuitImage = traderCircuitLocalImage;
|
||||
const goodTimesImage = goodTimesLocalImage;
|
||||
const prospertyImage = prospertyLocalImage;
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
id: 1,
|
||||
title: "RanOutOf",
|
||||
subtitle: "Household Management Revolution",
|
||||
description: "Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
|
||||
image: ranOutOfImage,
|
||||
image: ranoutofCase,
|
||||
category: "Lifestyle",
|
||||
industry: "Consumer",
|
||||
client: "RanOutOf Technologies",
|
||||
duration: "6 months",
|
||||
teamSize: "8 developers",
|
||||
technologies: ["React Native", "Node.js", "MongoDB", "AI/ML", "Push Notifications"],
|
||||
results: [
|
||||
{ metric: "Food Waste Reduction", value: "-45%" },
|
||||
{ metric: "Shopping Efficiency", value: "+60%" },
|
||||
{ metric: "User Satisfaction", value: "4.7/5" }
|
||||
],
|
||||
awards: ["Best Lifestyle App 2023"],
|
||||
featured: true,
|
||||
link: "/projects/ranoutof",
|
||||
icon: Heart
|
||||
icon: Package
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seezun",
|
||||
subtitle: "E-commerce Platform Innovation",
|
||||
description: "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
|
||||
image: seezunImage,
|
||||
image: seezunCase,
|
||||
category: "E-commerce",
|
||||
industry: "Retail",
|
||||
client: "Seezun Retail Corp",
|
||||
duration: "8 months",
|
||||
teamSize: "12 developers",
|
||||
technologies: ["React", "Python", "PostgreSQL", "Redis", "Stripe", "AWS"],
|
||||
results: [
|
||||
{ metric: "Conversion Rate", value: "+185%" },
|
||||
{ metric: "Page Load Speed", value: "1.8s" },
|
||||
{ metric: "Revenue Growth", value: "+240%" }
|
||||
],
|
||||
awards: ["E-commerce Excellence Award", "Innovation in Retail"],
|
||||
featured: true,
|
||||
link: "/projects/seezun",
|
||||
icon: ShoppingCart
|
||||
@@ -83,139 +72,137 @@ const caseStudies = [
|
||||
{
|
||||
id: 3,
|
||||
title: "Woka",
|
||||
subtitle: "Fitness & Wellness Platform",
|
||||
description: "Comprehensive fitness app with personalized workout plans, nutrition tracking, and community features that won multiple industry awards.",
|
||||
image: wokaImage,
|
||||
image: wokaCase,
|
||||
category: "Health & Fitness",
|
||||
industry: "Healthcare",
|
||||
client: "Woka Wellness Inc",
|
||||
duration: "10 months",
|
||||
teamSize: "15 developers",
|
||||
technologies: ["Flutter", "Firebase", "TensorFlow", "HealthKit", "Google Fit"],
|
||||
results: [
|
||||
{ metric: "User Retention", value: "+320%" },
|
||||
{ metric: "Workout Completions", value: "2M+" },
|
||||
{ metric: "App Store Rating", value: "4.9/5" }
|
||||
],
|
||||
awards: ["App of the Year 2023", "Health Innovation Award"],
|
||||
featured: true,
|
||||
link: "/projects/woka",
|
||||
icon: Heart
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Regroup",
|
||||
subtitle: "Social Networking Platform",
|
||||
description: "Revolutionary social platform connecting communities worldwide with advanced messaging, group management, and content sharing capabilities.",
|
||||
image: regroupImage,
|
||||
category: "Social",
|
||||
industry: "Technology",
|
||||
client: "Regroup Technologies",
|
||||
duration: "12 months",
|
||||
teamSize: "18 developers",
|
||||
technologies: ["React Native", "Node.js", "MongoDB", "WebRTC", "Socket.io"],
|
||||
results: [
|
||||
{ metric: "User Engagement", value: "+280%" },
|
||||
{ metric: "Active Communities", value: "75K+" },
|
||||
{ metric: "Daily Messages", value: "5M+" }
|
||||
],
|
||||
awards: ["Best Social App 2023"],
|
||||
featured: true,
|
||||
link: "/projects/regroup",
|
||||
icon: Users
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Tanami",
|
||||
subtitle: "Agricultural Technology Solution",
|
||||
description: "Smart farming platform that combines IoT sensors, weather data, and machine learning to optimize crop yields and reduce resource usage.",
|
||||
image: tanamiImage,
|
||||
category: "AgriTech",
|
||||
industry: "Agriculture",
|
||||
client: "Tanami Farms Ltd",
|
||||
duration: "9 months",
|
||||
teamSize: "10 developers",
|
||||
technologies: ["React", "Python", "IoT", "TensorFlow", "AWS IoT"],
|
||||
results: [
|
||||
{ metric: "Crop Yield Increase", value: "+35%" },
|
||||
{ metric: "Water Usage Reduction", value: "-40%" },
|
||||
{ metric: "Cost Savings", value: "$2.5M" }
|
||||
],
|
||||
awards: ["AgriTech Innovation Award"],
|
||||
featured: false,
|
||||
link: "/projects/tanami",
|
||||
icon: Building2
|
||||
icon: Tv
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Traders Circuit",
|
||||
subtitle: "Financial Trading Platform",
|
||||
description: "Advanced trading platform with real-time market data, algorithmic trading capabilities, and comprehensive portfolio management tools.",
|
||||
image: tradersCircuitImage,
|
||||
image: tcCase,
|
||||
category: "FinTech",
|
||||
industry: "Finance",
|
||||
client: "Traders Circuit LLC",
|
||||
duration: "14 months",
|
||||
teamSize: "20 developers",
|
||||
technologies: ["React", "Node.js", "WebSocket", "Redis", "PostgreSQL"],
|
||||
results: [
|
||||
{ metric: "Trading Volume", value: "$500M+" },
|
||||
{ metric: "Platform Uptime", value: "99.9%" },
|
||||
{ metric: "User Growth", value: "+150%" }
|
||||
],
|
||||
awards: ["FinTech Excellence Award"],
|
||||
featured: false,
|
||||
featured: true,
|
||||
link: "/projects/traderscircuit",
|
||||
icon: TrendingUp
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Good Times",
|
||||
subtitle: "Event Management Platform",
|
||||
description: "Comprehensive event management solution for organizing, promoting, and managing events of all sizes with integrated ticketing and analytics.",
|
||||
image: goodTimesImage,
|
||||
image: gtCase,
|
||||
category: "Events",
|
||||
industry: "Entertainment",
|
||||
client: "Good Times Events",
|
||||
duration: "7 months",
|
||||
teamSize: "9 developers",
|
||||
technologies: ["Vue.js", "Laravel", "MySQL", "Stripe", "SendGrid"],
|
||||
results: [
|
||||
{ metric: "Events Managed", value: "10K+" },
|
||||
{ metric: "Ticket Sales", value: "+200%" },
|
||||
{ metric: "Customer Satisfaction", value: "4.8/5" }
|
||||
],
|
||||
awards: ["Event Tech Innovation"],
|
||||
featured: false,
|
||||
featured: true,
|
||||
link: "/projects/goodtimes",
|
||||
icon: Star
|
||||
icon: PartyPopper
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Resturant Reward App",
|
||||
image: RrCase,
|
||||
category: "Loyalty & Rewards",
|
||||
industry: "Hospitality",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
icon: Utensils
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "Amble",
|
||||
image: ambleCase,
|
||||
category: "Social",
|
||||
industry: "Heritage",
|
||||
featured: false,
|
||||
link: "/projects/amble",
|
||||
icon: Users
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "Amoz",
|
||||
image: amozCase,
|
||||
category: "Lifestyle",
|
||||
industry: "Consumer",
|
||||
featured: false,
|
||||
link: "/projects/amoz",
|
||||
icon: Heart
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "Dorf Ketal",
|
||||
image: dkCase,
|
||||
category: "Lifestyle",
|
||||
industry: "Chemicals",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
icon: FlaskConical
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: "VIB360",
|
||||
image: vib360Case,
|
||||
category: "Lifestyle",
|
||||
industry: "Consumer",
|
||||
featured: false,
|
||||
link: "/projects/vib360",
|
||||
icon: Activity
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: "Nifty 11",
|
||||
image: niftyCase,
|
||||
category: "Lifestyle",
|
||||
industry: "Consumer",
|
||||
featured: false,
|
||||
link: "/comming-soon",
|
||||
icon: Trophy
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: "Prosperty",
|
||||
subtitle: "Real Estate Investment Platform",
|
||||
description: "Digital platform for real estate investment with property analysis, portfolio management, and automated investment recommendations.",
|
||||
image: prospertyImage,
|
||||
category: "PropTech",
|
||||
image: prospertyCase,
|
||||
category: "Lifestyle",
|
||||
industry: "Real Estate",
|
||||
client: "Prosperty Investments",
|
||||
duration: "11 months",
|
||||
teamSize: "13 developers",
|
||||
technologies: ["React", "Python", "PostgreSQL", "ML", "Blockchain"],
|
||||
results: [
|
||||
{ metric: "Investment Volume", value: "$100M+" },
|
||||
{ metric: "Portfolio Performance", value: "+25%" },
|
||||
{ metric: "User Base Growth", value: "+300%" }
|
||||
],
|
||||
awards: ["PropTech Innovation Award"],
|
||||
featured: false,
|
||||
link: "/projects/prosperty",
|
||||
icon: Building2
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: "Simpletend",
|
||||
image: simplitendCase,
|
||||
category: "Health & Fitness",
|
||||
industry: "Healthcare",
|
||||
featured: false,
|
||||
link: "/projects/simpletend",
|
||||
icon: Activity
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: "Farm Feeder",
|
||||
image: farmCase,
|
||||
category: "AgriTech",
|
||||
industry: "Agriculture",
|
||||
featured: false,
|
||||
link: "/projects/farmfeeder",
|
||||
icon: Tractor
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: "Lean In World",
|
||||
image: leanCase,
|
||||
category: "AgriTech",
|
||||
industry: "Agriculture",
|
||||
featured: false,
|
||||
link: "/projects/leaninworld",
|
||||
icon: Globe
|
||||
},
|
||||
];
|
||||
|
||||
const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate"];
|
||||
const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech"];
|
||||
const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate","Heritage","Chemicals","Hospitality"];
|
||||
const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech","Loyalty & Rewards"];
|
||||
|
||||
export const CaseStudies = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
@@ -224,13 +211,21 @@ export const CaseStudies = () => {
|
||||
const [showFeaturedOnly, setShowFeaturedOnly] = useState(false);
|
||||
|
||||
// Filter case studies based on search and filters
|
||||
const filteredCaseStudies = caseStudies.filter(study => {
|
||||
const matchesSearch = study.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
study.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
study.technologies.some(tech => tech.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
const filteredCaseStudies = caseStudies.filter((study) => {
|
||||
const search = searchTerm.toLowerCase();
|
||||
|
||||
// Now we only check against `title`, `category`, and `industry`
|
||||
const matchesSearch =
|
||||
study.title.toLowerCase().includes(search) ||
|
||||
study.category.toLowerCase().includes(search) ||
|
||||
study.industry.toLowerCase().includes(search);
|
||||
|
||||
const matchesIndustry =
|
||||
selectedIndustry === "All Industries" || study.industry === selectedIndustry;
|
||||
|
||||
const matchesCategory =
|
||||
selectedCategory === "All Categories" || study.category === selectedCategory;
|
||||
|
||||
const matchesIndustry = selectedIndustry === "All Industries" || study.industry === selectedIndustry;
|
||||
const matchesCategory = selectedCategory === "All Categories" || study.category === selectedCategory;
|
||||
const matchesFeatured = !showFeaturedOnly || study.featured;
|
||||
|
||||
return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured;
|
||||
@@ -365,7 +360,7 @@ export const CaseStudies = () => {
|
||||
<Button
|
||||
variant={showFeaturedOnly ? "default" : "outline"}
|
||||
onClick={() => setShowFeaturedOnly(!showFeaturedOnly)}
|
||||
className="justify-center"
|
||||
className="justify-center h-9"
|
||||
>
|
||||
<Award className="w-4 h-4 mr-2" />
|
||||
Featured Only
|
||||
@@ -400,19 +395,24 @@ export const CaseStudies = () => {
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(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">
|
||||
<CardContent className="p-0 flex flex-col h-full">
|
||||
<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"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(study.link);
|
||||
}}
|
||||
>
|
||||
<CardContent className="CardContentOverride p-0 pb-0 h-full">
|
||||
{/* Image Header */}
|
||||
<div className="relative overflow-hidden">
|
||||
<ImageWithFallback
|
||||
src={study.image}
|
||||
alt={study.title}
|
||||
className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
className="w-full h-full object-cover 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-4 left-4">
|
||||
<div className="absolute top-2 left-4">
|
||||
<Badge className="bg-accent/90 text-white border-0">
|
||||
{study.category}
|
||||
</Badge>
|
||||
@@ -420,7 +420,7 @@ export const CaseStudies = () => {
|
||||
|
||||
{/* Featured Badge */}
|
||||
{study.featured && (
|
||||
<div className="absolute top-4 right-4">
|
||||
<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">
|
||||
<Star className="w-3 h-3 fill-current" />
|
||||
Featured
|
||||
@@ -435,86 +435,6 @@ export const CaseStudies = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 flex-1 flex flex-col">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-xl font-bold text-foreground mb-2 group-hover:text-accent transition-colors">
|
||||
{study.title}
|
||||
</h3>
|
||||
<p className="text-accent font-medium text-sm mb-2">
|
||||
{study.subtitle}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||||
{study.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Results */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-4 p-3 bg-accent/5 rounded-lg border border-accent/10">
|
||||
{study.results.slice(0, 2).map((result, idx) => (
|
||||
<div key={idx} className="text-center">
|
||||
<div className="text-sm font-bold text-accent">
|
||||
{result.value}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{result.metric}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Technologies */}
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{study.technologies.slice(0, 3).map((tech) => (
|
||||
<Badge key={tech} variant="secondary" className="text-xs bg-muted/30">
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
{study.technologies.length > 3 && (
|
||||
<Badge variant="secondary" className="text-xs bg-muted/30">
|
||||
+{study.technologies.length - 3}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Info */}
|
||||
<div className="grid grid-cols-2 gap-2 mb-4 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
{study.duration}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-3 h-3" />
|
||||
{study.teamSize}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Awards */}
|
||||
{study.awards.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-1 text-xs text-amber-600">
|
||||
<Award className="w-3 h-3" />
|
||||
<span className="truncate">{study.awards[0]}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 mt-auto"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(study.link);
|
||||
}}
|
||||
>
|
||||
<span className="text-sm">View Portfolio</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
353
pages/CaseStudyComingSoon.tsx
Normal file
353
pages/CaseStudyComingSoon.tsx
Normal file
@@ -0,0 +1,353 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
ArrowRight,
|
||||
Clock,
|
||||
FileText,
|
||||
Lightbulb,
|
||||
Users,
|
||||
Code2,
|
||||
Smartphone,
|
||||
Building2,
|
||||
Heart,
|
||||
ShoppingCart,
|
||||
GraduationCap,
|
||||
Briefcase,
|
||||
Cpu,
|
||||
Utensils,
|
||||
MapPin,
|
||||
Scale,
|
||||
Leaf,
|
||||
Music,
|
||||
MessageCircle,
|
||||
Truck,
|
||||
Star as StarIcon,
|
||||
Church,
|
||||
Shield,
|
||||
Database,
|
||||
Zap
|
||||
} from 'lucide-react';
|
||||
import { navigateTo } from '../App';
|
||||
import { Navigation } from '@/components/Navigation';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Footer } from '@/components/Footer';
|
||||
|
||||
interface CaseStudyComingSoonProps {
|
||||
projectTitle?: string;
|
||||
industry?: string;
|
||||
subtitle?: string;
|
||||
expectedLaunch?: string;
|
||||
description?: string;
|
||||
services?: string[];
|
||||
technologies?: string[];
|
||||
}
|
||||
|
||||
export const CaseStudyComingSoon: React.FC<CaseStudyComingSoonProps> = ({
|
||||
projectTitle,
|
||||
industry = "Technology",
|
||||
subtitle,
|
||||
expectedLaunch = "Q2 2024",
|
||||
description,
|
||||
services = [],
|
||||
technologies = []
|
||||
}) => {
|
||||
const getIndustryIcon = (industry: string) => {
|
||||
const icons = {
|
||||
"Technology": Smartphone,
|
||||
"E-commerce": ShoppingCart,
|
||||
"Education": GraduationCap,
|
||||
"FinTech": Building2,
|
||||
"Entertainment": Music,
|
||||
"Real Estate": Building2,
|
||||
"IoT": Cpu,
|
||||
"Healthcare": Heart,
|
||||
"Social Media": MessageCircle,
|
||||
"Government": Shield,
|
||||
"Automotive": Building2,
|
||||
"Food & Beverage": Utensils,
|
||||
"Agriculture": Leaf,
|
||||
"Enterprise Software": Database,
|
||||
"Travel": MapPin,
|
||||
"Legal": Scale,
|
||||
"Logistics": Truck,
|
||||
"Wellness": StarIcon,
|
||||
"Religious": Church,
|
||||
"HR Tech": Briefcase
|
||||
};
|
||||
return icons[industry as keyof typeof icons] || Building2;
|
||||
};
|
||||
|
||||
const IconComponent = getIndustryIcon(industry);
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute inset-0 bg-[linear-gradient(45deg,transparent_25%,rgba(229,25,94,0.1)_50%,transparent_75%)] bg-[length:60px_60px]" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-6 lg:px-8 relative">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
{/* Coming Soon Badge */}
|
||||
<div className="flex items-center justify-center gap-2 mb-6">
|
||||
<Clock className="w-5 h-5 text-[#E5195E]" />
|
||||
<Badge variant="outline" className="border-[#E5195E]/20 text-[#E5195E] font-manrope">
|
||||
Case Study Coming Soon
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Project Title */}
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent font-manrope">
|
||||
{projectTitle}
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
{subtitle && (
|
||||
<p className="text-xl md:text-2xl text-white/80 mb-8 font-manrope">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Industry Badge */}
|
||||
<div className="flex items-center justify-center gap-2 mb-8">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-white/5 border-white/20 text-white font-manrope px-4 py-2"
|
||||
>
|
||||
<IconComponent className="w-4 h-4 mr-2" />
|
||||
{industry}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{description ? (
|
||||
<p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
|
||||
{description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-lg text-muted-foreground mb-8 max-w-3xl mx-auto font-manrope">
|
||||
We're currently working on documenting this exciting project case study.
|
||||
Our team is gathering comprehensive insights, results, and learnings to share with you soon.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Expected Launch */}
|
||||
<div className="flex items-center justify-center gap-6 text-sm text-muted-foreground font-manrope mb-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-[#E5195E]" />
|
||||
<span>Expected: {expectedLaunch}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What to Expect Section */}
|
||||
<section className="py-16 bg-card/30 border-y border-white/10">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto text-center mb-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white font-manrope">
|
||||
What to Expect
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground font-manrope">
|
||||
This case study will provide detailed insights into our development process, challenges overcome, and results achieved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
{/* Development Process */}
|
||||
<Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
|
||||
<CardContent className="p-6 text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
|
||||
<Code2 className="w-8 h-8 text-[#E5195E]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3 font-manrope">
|
||||
Development Journey
|
||||
</h3>
|
||||
<p className="text-muted-foreground font-manrope">
|
||||
Detailed breakdown of our technical approach, architecture decisions, and development methodology.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Challenges & Solutions */}
|
||||
<Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
|
||||
<CardContent className="p-6 text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
|
||||
<Lightbulb className="w-8 h-8 text-[#E5195E]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3 font-manrope">
|
||||
Challenges & Solutions
|
||||
</h3>
|
||||
<p className="text-muted-foreground font-manrope">
|
||||
Key obstacles encountered during development and innovative solutions implemented by our team.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results & Impact */}
|
||||
<Card className="bg-card/50 backdrop-blur-sm border-white/10 hover:border-white/20 transition-colors duration-300">
|
||||
<CardContent className="p-6 text-center">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[#E5195E]/10 flex items-center justify-center">
|
||||
<Users className="w-8 h-8 text-[#E5195E]" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-white mb-3 font-manrope">
|
||||
Results & Impact
|
||||
</h3>
|
||||
<p className="text-muted-foreground font-manrope">
|
||||
Measurable outcomes, user feedback, and business impact achieved through our solution.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Project Preview Section */}
|
||||
{(services.length > 0 || technologies.length > 0) && (
|
||||
<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 md:text-4xl font-bold mb-12 text-center text-white font-manrope">
|
||||
Project Overview
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Services */}
|
||||
{services.length > 0 && (
|
||||
<Card className="bg-card/50 backdrop-blur-sm border-white/10">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-xl font-bold text-white mb-4 font-manrope">
|
||||
Services Provided
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{services.map((service, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="bg-white/5 border-white/20 text-white font-manrope"
|
||||
>
|
||||
{service}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Technologies */}
|
||||
{technologies.length > 0 && (
|
||||
<Card className="bg-card/50 backdrop-blur-sm border-white/10">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-xl font-bold text-white mb-4 font-manrope">
|
||||
Technologies Used
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{technologies.map((tech, index) => (
|
||||
<Badge
|
||||
key={index}
|
||||
variant="outline"
|
||||
className="bg-[#E5195E]/10 border-[#E5195E]/30 text-[#E5195E] font-manrope"
|
||||
>
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Progress Indicator */}
|
||||
<section className="py-16 bg-card/30 border-y border-white/10">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<h2 className="text-2xl font-bold mb-8 text-white font-manrope">
|
||||
Documentation Progress
|
||||
</h2>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-8">
|
||||
<div className="flex justify-between text-sm text-muted-foreground mb-2 font-manrope">
|
||||
<span>Research & Analysis</span>
|
||||
<span>75%</span>
|
||||
</div>
|
||||
<div className="w-full bg-white/10 rounded-full h-2">
|
||||
<div className="bg-[#E5195E] h-2 rounded-full w-3/4 transition-all duration-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground mb-8 font-manrope">
|
||||
Our team is currently gathering detailed project insights, conducting stakeholder interviews,
|
||||
and preparing comprehensive documentation to showcase this project's journey and impact.
|
||||
</p>
|
||||
|
||||
{/* Subscribe for Updates */}
|
||||
<Card className="bg-card/50 backdrop-blur-sm border-white/10 p-6">
|
||||
<h3 className="text-lg font-bold text-white mb-4 font-manrope">
|
||||
Get Notified When Published
|
||||
</h3>
|
||||
<p className="text-sm text-muted-foreground mb-4 font-manrope">
|
||||
Join our mailing list to be the first to know when this case study goes live.
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => navigateTo('/contact-us')}
|
||||
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white border-none font-manrope"
|
||||
>
|
||||
Notify Me
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Explore Other Case Studies */}
|
||||
<section className="py-16 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-white font-manrope">
|
||||
Explore Our Published Case Studies
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8 font-manrope">
|
||||
While you wait for this case study, discover other successful projects we've completed for our clients.
|
||||
</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 border-none font-manrope"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
View All Case Studies
|
||||
<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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
Start Your Project
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default CaseStudyComingSoon;
|
||||
632
pages/SimpliTendProject.tsx
Normal file
632
pages/SimpliTendProject.tsx
Normal file
@@ -0,0 +1,632 @@
|
||||
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, Shield, Check, Star, TrendingUp, Heart, Bell, MapPin, User, Clock, Target, Zap, Database, Globe, Lock, Activity, AlertCircle } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
// import simplitendImage from "figma:asset/b921f42de70695ee319496c3c3eee9a961c5297b.png";
|
||||
|
||||
const simplitendImage = "https://via.placeholder.com/600x600.png?text=SimpliTend+App+Image";
|
||||
|
||||
export const SimpliTendProject = () => {
|
||||
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" />
|
||||
<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">
|
||||
<Heart className="w-4 h-4 mr-2" />
|
||||
Healthcare Technology Case Study
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
|
||||
SimpliTend App
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-8 font-manrope">
|
||||
Independence Plus Peace of Mind: Caregiver–Patient Connected Mobile Platform for Enhanced Safety and Communication
|
||||
</p>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{["React Native", "Node.js", "MongoDB", "AWS Cloud"].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">10 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">9 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">
|
||||
<Heart className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
|
||||
<div className="text-lg font-bold text-white font-manrope">Healthcare</div>
|
||||
<div className="text-xs text-muted-foreground font-manrope">Industry</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>
|
||||
{[
|
||||
"3-tier SKU system for different demographics (Junior, Adult, Senior)",
|
||||
"Persistent, tamper-proof patient app experience",
|
||||
"Fully secure caregiver–patient synchronization",
|
||||
"Comprehensive geofence and alert system"
|
||||
].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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
Build Your Healthcare 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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
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">
|
||||
<img
|
||||
src={simplitendImage}
|
||||
alt="SimpliTend 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">
|
||||
The <strong>SimpliTend App</strong> bridges the gap between caregivers and individuals needing assistance by delivering a simplified, secure mobile environment for patients and a connected, monitoring tool for caregivers. Designed for safety and ease-of-use, it addresses challenges such as spam blocking, navigation assistance, medication reminders, and emergency contact alerts.
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed font-manrope">
|
||||
With a dual-application system — one for patients and one for caregivers — SimpliTend ensures safety, independence, and real-time communication for older adults, individuals with early-stage dementia, and their support networks.
|
||||
</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">
|
||||
Millions of older adults and individuals with cognitive impairments face barriers to using smartphones safely, while caregivers struggle to stay updated on their wellbeing. SimpliTend addresses these challenges with a dual-application system ensuring safety, independence, and real-time communication.
|
||||
</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">
|
||||
Older adults with early signs of dementia, adults with autism, caregivers (family members, professionals, volunteers), and secondary markets including working parents wanting child safety and families of independent but aging parents.
|
||||
</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">
|
||||
Provide simplified UI/UX for patients to minimize errors and confusion, enable caregivers to monitor activities and receive real-time alerts, offer tiered subscription plans for different use cases, and ensure secure data handling with role-based access.
|
||||
</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">Patient App Features</h3>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
"Simplified home screen (Call, Text, Voicemail, Photos, Direction to Home, Help, Apps)",
|
||||
"Spam blocking for calls, SMS, and browser links",
|
||||
"Medication and appointment reminders",
|
||||
"Geofencing with travel-based temporary zones",
|
||||
"Emergency contact (ICE) calling"
|
||||
].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">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Caregiver App Features</h3>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
"Real-time notifications for key events (medication, geofence breach, emergency calls)",
|
||||
"Status view for location, device health, unread messages",
|
||||
"Multi-patient support",
|
||||
"Secure login and data sync"
|
||||
].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">{feature}</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">
|
||||
{[
|
||||
"Designing a persistent app that cannot be unintentionally closed or uninstalled by patients",
|
||||
"Synchronizing multi-patient data securely across devices",
|
||||
"Maintaining usability for low-vision and low-tech users"
|
||||
].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 feedback from diverse caregiver groups",
|
||||
"Adapting feature sets for different SKU models (Junior, Adult, Senior)",
|
||||
"Extensive testing across multiple Android and iOS devices for accessibility"
|
||||
].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" },
|
||||
{ label: "Database", value: "MongoDB (secure cloud + local storage)" },
|
||||
{ label: "Hosting", value: "AWS" },
|
||||
{ label: "Authentication", value: "JWT with caregiver–patient pairing PIN" }
|
||||
].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">{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">
|
||||
{[
|
||||
"Dual-app design (separate patient & caregiver apps) for tailored functionality",
|
||||
"Event-driven alerting system with geofence triggers",
|
||||
"Local-first configuration to prevent operational downtime",
|
||||
"Strong accessibility compliance (large fonts, high contrast, labeled icons)"
|
||||
].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> with 2-week sprints, early user testing with target caregiver–patient pairs, iterative refinement based on live scenario trials
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
phase: "Discovery & Planning",
|
||||
duration: "3 weeks",
|
||||
description: "Market research, caregiver interviews, feature prioritization"
|
||||
},
|
||||
{
|
||||
phase: "Design & Prototyping",
|
||||
duration: "4 weeks",
|
||||
description: "Accessibility-first UI, caregiver dashboard mockups"
|
||||
},
|
||||
{
|
||||
phase: "Core Development",
|
||||
duration: "8 weeks",
|
||||
description: "Patient simplified UI, caregiver alert system, pairing workflow"
|
||||
},
|
||||
{
|
||||
phase: "Feature Expansion",
|
||||
duration: "6 weeks",
|
||||
description: "Geofence, medication reminders, ICE integration"
|
||||
},
|
||||
{
|
||||
phase: "Testing & Optimization",
|
||||
duration: "4 weeks",
|
||||
description: "Accessibility compliance, multi-device validation"
|
||||
},
|
||||
{
|
||||
phase: "Deployment & Training",
|
||||
duration: "3 weeks",
|
||||
description: "App store launch, caregiver onboarding"
|
||||
}
|
||||
].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: User,
|
||||
title: "Tiered SKUs",
|
||||
description: "SimpliTend Junior for child safety tracking, Adult for mild support needs, and Senior for full support suite with ICE and advanced restrictions."
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
title: "Alerts & Notifications",
|
||||
description: "Geofence exit/entry, medication reminders & refills, low battery warnings, and emergency contact activations."
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Caregiver Access",
|
||||
description: "Multi-patient dashboard, role-based permissions, and PIN verification pairing for enhanced security."
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Geofencing System",
|
||||
description: "Dynamic temporary address handling with smart zone management for enhanced safety monitoring."
|
||||
},
|
||||
{
|
||||
icon: Lock,
|
||||
title: "Persistent App Operation",
|
||||
description: "Tamper-proof patient app with OS-level resilience measures to prevent accidental closure or uninstallation."
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
title: "Health Monitoring",
|
||||
description: "Medication tracking, appointment reminders, and comprehensive health status monitoring for caregivers."
|
||||
}
|
||||
].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-4 gap-6 mb-12">
|
||||
{[
|
||||
{ label: "SKU Versions", value: "3", icon: User },
|
||||
{ label: "App Operation", value: "100%", icon: Shield },
|
||||
{ label: "Spam Reduction", value: "80%", icon: Lock },
|
||||
{ label: "Caregiver Awareness", value: "Real-time", icon: Bell }
|
||||
].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>
|
||||
</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">Technical Achievements</h3>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Built a geofence system with dynamic temporary address handling",
|
||||
"Designed an uncloseable patient app with OS-level resilience measures",
|
||||
"Implemented secure caregiver–patient linking with unique PINs per pairing"
|
||||
].map((achievement, 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">{achievement}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-white mb-4 font-manrope">Business Value</h3>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"3 SKU versions launched for different audiences",
|
||||
"100% persistent app operation in testing environments",
|
||||
"80% reduction in spam/scam contact for patient devices",
|
||||
"Real-time caregiver awareness of patient safety and activities"
|
||||
].map((value, 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">{value}</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">
|
||||
{[
|
||||
"Accessibility-first design improved adoption by low-tech users",
|
||||
"Separate patient and caregiver apps simplified user experiences"
|
||||
].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">
|
||||
{[
|
||||
"SKU flexibility enables broader market reach",
|
||||
"Real-world caregiver trials are essential for feature prioritization"
|
||||
].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">
|
||||
"SimpliTend gives my mother the independence she wants while ensuring I know she's safe. The interface is so simple that she uses it without frustration, and I get notified immediately if something is wrong."
|
||||
</blockquote>
|
||||
<div className="text-muted-foreground font-manrope">
|
||||
<div className="font-semibold text-white">Family Caregiver</div>
|
||||
<div>Beta User</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">Phase 2 (6 Months)</h3>
|
||||
<ul className="space-y-2">
|
||||
{[
|
||||
"Premium caregiver features (history reports, analytics)",
|
||||
"Integration with wearable health devices"
|
||||
].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">Phase 3 (12 Months)</h3>
|
||||
<ul className="space-y-2">
|
||||
{[
|
||||
"AI-driven predictive alerts",
|
||||
"Voice assistant integration"
|
||||
].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 Healthcare Solution?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8 font-manrope">
|
||||
Create innovative healthcare applications that bridge the gap between patients and caregivers with secure, accessible technology.
|
||||
</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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
View More Cases
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
637
pages/VIB360Project.tsx
Normal file
637
pages/VIB360Project.tsx
Normal file
@@ -0,0 +1,637 @@
|
||||
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, Monitor, Check, Star, TrendingUp, Factory, Shield, Zap, Settings, Target, AlertCircle, Clock, Database, Wifi, BarChart3, Bell, Activity, Wrench, Brain } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
// import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png";
|
||||
|
||||
const vib360Image = "https://via.placeholder.com/600x600.png?text=VIB360+Platform+Image";
|
||||
|
||||
export const VIB360Project = () => {
|
||||
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" />
|
||||
<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">
|
||||
<Activity className="w-4 h-4 mr-2" />
|
||||
Industrial IoT Case Study
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
|
||||
VIB360 Platform
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-8 font-manrope">
|
||||
Industrial IoT Vibration Monitoring & Predictive Maintenance Platform - AI-enabled solution for real-time monitoring and operational efficiency
|
||||
</p>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{["React.js", "React Native", "Node.js", "PostgreSQL", "InfluxDB", "TensorFlow", "AWS IoT"].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">8 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">9 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">
|
||||
<Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
|
||||
<div className="text-lg font-bold text-white font-manrope">Web/Android/iOS</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">
|
||||
<TrendingUp className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
|
||||
<div className="text-lg font-bold text-white font-manrope">92%</div>
|
||||
<div className="text-xs text-muted-foreground font-manrope">AI Accuracy</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>
|
||||
{[
|
||||
"Deployed across 15 industrial sites in first phase",
|
||||
"Achieved 92% accuracy in predicting bearing and motor faults",
|
||||
"Reduced unplanned downtime by 27% in pilot plants",
|
||||
"Built comprehensive AI-enabled predictive maintenance platform"
|
||||
].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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
Build Your IoT Platform
|
||||
<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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
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">
|
||||
<img
|
||||
src={vib360Image}
|
||||
alt="VIB360 Industrial IoT Vibration Monitoring Platform"
|
||||
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">
|
||||
VIB360 enables industrial operators to monitor vibration levels in real time, detect early signs of mechanical failure, and schedule maintenance proactively. The platform integrates IoT sensor hardware with cloud-based analytics, delivering actionable insights directly to technicians and management.
|
||||
</p>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed font-manrope">
|
||||
The comprehensive solution addresses unplanned equipment failures that can lead to massive operational losses by continuously monitoring vibration signatures, identifying anomalies, and predicting failures before they happen across manufacturing, mining, and energy industries.
|
||||
</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">
|
||||
Unplanned equipment failures can lead to massive operational losses in industries such as manufacturing, mining, and energy. Traditional maintenance schedules are often inefficient, either wasting resources on unnecessary checks or missing early fault signs. VIB360 addresses this by continuously monitoring vibration signatures, identifying anomalies, and predicting failures before they happen.
|
||||
</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">
|
||||
Plant maintenance managers responsible for equipment upkeep, reliability engineers focused on preventing failures, and industrial operations supervisors overseeing production efficiency and equipment performance monitoring.
|
||||
</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">
|
||||
Enable real-time vibration monitoring with minimal installation overhead, provide predictive analytics to reduce downtime and maintenance costs, deliver a scalable platform that can integrate with existing SCADA and ERP systems, and ensure secure remote access to sensor data for distributed teams.
|
||||
</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">
|
||||
{[
|
||||
"Real-Time Vibration Monitoring with threshold-based alerts",
|
||||
"Predictive Maintenance Dashboard with AI-driven failure forecasts",
|
||||
"Multi-Sensor Support for motors, pumps, compressors, and turbines",
|
||||
"Mobile App for Field Technicians with push notifications and offline data sync",
|
||||
"Customizable Alert Rules and maintenance scheduling",
|
||||
"Integration API for SCADA/ERP connectivity"
|
||||
].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">
|
||||
{[
|
||||
"BLE & Wi-Fi connectivity for IoT devices",
|
||||
"Time-series database for high-frequency sensor data storage",
|
||||
"AI anomaly detection engine trained on vibration datasets",
|
||||
"Secure cloud communication (TLS 1.3 encryption)",
|
||||
"Mobile offline mode for sites with poor connectivity"
|
||||
].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">
|
||||
{[
|
||||
"Handling high-volume vibration data without latency",
|
||||
"Training AI models on limited historical fault data",
|
||||
"Ensuring sensor accuracy in harsh industrial conditions"
|
||||
].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 sensor hardware deployment with software rollouts",
|
||||
"Managing change adoption in traditional maintenance workflows",
|
||||
"Aligning development timelines with client's phased deployment strategy"
|
||||
].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: "Hardware Integration", value: "IoT vibration sensors (BLE & Wi-Fi enabled)" },
|
||||
{ label: "Frontend", value: "React.js, React Native" },
|
||||
{ label: "Backend", value: "Node.js, Express.js" },
|
||||
{ label: "Database", value: "PostgreSQL, InfluxDB (time-series data)" },
|
||||
{ label: "AI/ML", value: "TensorFlow for anomaly detection & predictive analytics" },
|
||||
{ label: "Cloud Services", value: "AWS IoT Core, AWS Lambda, S3, CloudWatch" }
|
||||
].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">
|
||||
{[
|
||||
"AWS IoT Core for device-to-cloud communication",
|
||||
"InfluxDB for storing high-frequency time-series vibration data",
|
||||
"AI microservice for anomaly detection and fault prediction",
|
||||
"React.js web dashboard with real-time visualizations",
|
||||
"React Native mobile app for technician workflows",
|
||||
"Event-driven architecture with AWS Lambda for alert processing"
|
||||
].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> (2-week sprints) with sprint reviews with hardware + software teams, field testing after each major release, iterative model retraining with new sensor data
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
phase: "Discovery & Planning",
|
||||
duration: "3 weeks",
|
||||
description: "Hardware-software integration feasibility, AI model baseline setup"
|
||||
},
|
||||
{
|
||||
phase: "Design & Prototyping",
|
||||
duration: "5 weeks",
|
||||
description: "Sensor data visualization mockups, mobile UI/UX for technician workflows"
|
||||
},
|
||||
{
|
||||
phase: "Core Platform Development",
|
||||
duration: "12 weeks",
|
||||
description: "Sensor connectivity modules, time-series data ingestion pipeline, web dashboard core features"
|
||||
},
|
||||
{
|
||||
phase: "AI & Analytics Module",
|
||||
duration: "6 weeks",
|
||||
description: "Model training & tuning, predictive maintenance alerts"
|
||||
},
|
||||
{
|
||||
phase: "Integration & Testing",
|
||||
duration: "5 weeks",
|
||||
description: "SCADA/ERP integration APIs, field testing in pilot plants"
|
||||
},
|
||||
{
|
||||
phase: "Deployment & Training",
|
||||
duration: "3 weeks",
|
||||
description: "Rollout to initial sites, staff training & documentation"
|
||||
}
|
||||
].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: BarChart3,
|
||||
title: "Live Vibration Graphs",
|
||||
description: "Real-time sensor readings displayed in dashboards"
|
||||
},
|
||||
{
|
||||
icon: Brain,
|
||||
title: "Fault Prediction",
|
||||
description: "Early detection of mechanical issues with confidence scores"
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Maintenance Scheduling",
|
||||
description: "Automated work orders based on AI insights"
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
title: "Multi-Device Alerts",
|
||||
description: "Email, SMS, and push notifications"
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Data Export",
|
||||
description: "CSV, PDF, and API access for further analysis"
|
||||
},
|
||||
{
|
||||
icon: Wifi,
|
||||
title: "IoT Connectivity",
|
||||
description: "BLE & Wi-Fi enabled vibration sensor integration"
|
||||
}
|
||||
].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-4 gap-6 mb-12">
|
||||
{[
|
||||
{ label: "Site Deployments", value: "15", icon: Factory, desc: "industrial sites" },
|
||||
{ label: "AI Accuracy", value: "92%", icon: Brain, desc: "fault prediction" },
|
||||
{ label: "Downtime Reduction", value: "27%", icon: TrendingUp, desc: "first 3 months" },
|
||||
{ label: "Data Latency", value: "<2s", icon: Zap, desc: "sensor to dashboard" }
|
||||
].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">
|
||||
{[
|
||||
"27% downtime reduction in first 3 months",
|
||||
"15% cost savings in maintenance budgets",
|
||||
"Increased maintenance team efficiency with targeted inspections"
|
||||
].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">
|
||||
{[
|
||||
"Data ingestion latency: < 2 seconds from sensor to dashboard",
|
||||
"AI fault prediction accuracy: 92%",
|
||||
"99.9% platform uptime since 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">
|
||||
{[
|
||||
"Parallel hardware and software development accelerated delivery",
|
||||
"Continuous AI retraining improved prediction accuracy over time"
|
||||
].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">
|
||||
{[
|
||||
"On-site calibration is critical to sensor performance",
|
||||
"Edge processing could further reduce cloud costs in future phases"
|
||||
].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">
|
||||
"With VIB360, we've transformed our maintenance strategy from reactive to proactive. The accuracy of fault predictions and the ease of use for our technicians have been game changers."
|
||||
</blockquote>
|
||||
<div className="text-muted-foreground font-manrope">
|
||||
<div className="font-semibold text-white">Maintenance Director</div>
|
||||
<div>Industrial Manufacturing 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">
|
||||
{[
|
||||
"Edge AI integration for on-device anomaly detection",
|
||||
"Expanded sensor compatibility (temperature, pressure)"
|
||||
].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">
|
||||
{[
|
||||
"Multi-site centralized monitoring for enterprise clients",
|
||||
"Predictive spare parts inventory management"
|
||||
].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 Industrial IoT Solution?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8 font-manrope">
|
||||
Create advanced predictive maintenance platforms with AI-enabled vibration monitoring and real-time analytics for industrial excellence.
|
||||
</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"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
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"
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
>
|
||||
View More Cases
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user