1089 lines
48 KiB
TypeScript
1089 lines
48 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { motion } from "framer-motion";
|
||
import {
|
||
Activity,
|
||
ArrowLeft,
|
||
ArrowRight,
|
||
Bell,
|
||
Brain,
|
||
Calendar,
|
||
CheckCircle,
|
||
Cloud,
|
||
Code,
|
||
Database,
|
||
ExternalLink,
|
||
Globe,
|
||
Home,
|
||
Layers,
|
||
List,
|
||
Mic,
|
||
Monitor,
|
||
Palette,
|
||
RefreshCw,
|
||
Scan,
|
||
Server,
|
||
Share2,
|
||
ShoppingCart,
|
||
Smartphone,
|
||
Star,
|
||
Target,
|
||
Users,
|
||
Wrench,
|
||
Zap
|
||
} from "lucide-react";
|
||
import { navigateTo } from "../App";
|
||
import { Footer } from "../components/Footer";
|
||
import { GridPattern } from "../components/GridPattern";
|
||
import { Navigation } from "../components/Navigation";
|
||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||
import { Button } from "../components/ui/button";
|
||
import ranoutofLogo from "../src/images/ranoutof-logo.webp";
|
||
|
||
// Technology to icon mapping
|
||
const getTechIcon = (tech: string) => {
|
||
const techIconMap: { [key: string]: React.ReactNode } = {
|
||
"React Native": <Smartphone className="w-4 h-4" />,
|
||
"Laravel": <Server className="w-4 h-4" />,
|
||
"Node.js": <Server className="w-4 h-4" />,
|
||
"MySQL": <Database className="w-4 h-4" />,
|
||
"Firebase": <Cloud className="w-4 h-4" />,
|
||
"PHP": <Code className="w-4 h-4" />,
|
||
"JavaScript": <Code className="w-4 h-4" />,
|
||
"TypeScript": <Code className="w-4 h-4" />,
|
||
"REST API": <Activity className="w-4 h-4" />,
|
||
"WebSocket": <Activity className="w-4 h-4" />,
|
||
"Redux": <Layers className="w-4 h-4" />,
|
||
"PWA": <Monitor className="w-4 h-4" />
|
||
};
|
||
|
||
return techIconMap[tech] || <Wrench className="w-4 h-4" />;
|
||
};
|
||
|
||
const projectDetails = {
|
||
title: "RanOutOf – Simplify Grocery Planning with AI-Powered Lists",
|
||
subtitle: "A voice-enabled, reminder-rich, and collaborative grocery management app designed to simplify household planning and eliminate stockouts",
|
||
technologies: ["React Native", "Laravel", "Node.js", "MySQL", "Firebase"],
|
||
industries: ["Consumer Tech", "Retail Technology", "Productivity"],
|
||
duration: "15 weeks, October 2024 – January 2025",
|
||
teamSize: "4 developers, 2 designers, 1 QA, 1 PM",
|
||
platforms: ["Android", "iOS", "Admin Web Portal"]
|
||
};
|
||
|
||
const keyAchievements = [
|
||
{ label: "Product Categories", value: "200+", description: "Comprehensive grocery taxonomy" },
|
||
{ label: "List Sharing", value: "100%", description: "Real-time collaborative features" },
|
||
{ label: "Smart Alerts", value: "24/7", description: "Inventory expiry reminders" }
|
||
];
|
||
|
||
const businessObjectives = [
|
||
"Build a grocery app with voice, barcode, and manual list entry",
|
||
"Provide household inventory and restocking reminders",
|
||
"Enable collaboration among users for shared lists",
|
||
"Design a modern, intuitive UI with reminders and category tagging"
|
||
];
|
||
|
||
const coreFeatures = [
|
||
{
|
||
title: "Smart List Builder",
|
||
description: "Add items via typing, voice commands, or barcode scanning with auto-suggestions",
|
||
icon: <List className="w-6 h-6" />
|
||
},
|
||
{
|
||
title: "Inventory Tracking",
|
||
description: "Track home inventory, expiry dates, and get automated restocking alerts",
|
||
icon: <Home className="w-6 h-6" />
|
||
},
|
||
{
|
||
title: "Real-time Collaboration",
|
||
description: "Share lists with family members and sync updates instantly across devices",
|
||
icon: <Share2 className="w-6 h-6" />
|
||
},
|
||
{
|
||
title: "Voice Integration",
|
||
description: "Add items hands-free with voice commands and smart speech recognition",
|
||
icon: <Mic className="w-6 h-6" />
|
||
},
|
||
{
|
||
title: "Barcode Scanner",
|
||
description: "Scan product barcodes for instant item recognition and inventory management",
|
||
icon: <Scan className="w-6 h-6" />
|
||
},
|
||
{
|
||
title: "Smart Notifications",
|
||
description: "Intelligent reminders for expiring items and customizable notification settings",
|
||
icon: <Bell className="w-6 h-6" />
|
||
}
|
||
];
|
||
|
||
const technicalChallenges = [
|
||
{
|
||
title: "Multi-Input Integration",
|
||
description: "Creating seamless integration between voice, barcode, and manual input methods",
|
||
icon: <Activity className="w-5 h-5" />
|
||
},
|
||
{
|
||
title: "Real-time Synchronization",
|
||
description: "Ensuring instant list sharing and updates across multiple family members",
|
||
icon: <RefreshCw className="w-5 h-5" />
|
||
},
|
||
{
|
||
title: "Inventory Intelligence",
|
||
description: "Building smart expiration tracking and predictive restocking algorithms",
|
||
icon: <Brain className="w-5 h-5" />
|
||
},
|
||
{
|
||
title: "Cross-platform Consistency",
|
||
description: "Maintaining identical user experience across iOS, Android, and web admin",
|
||
icon: <Monitor className="w-5 h-5" />
|
||
}
|
||
];
|
||
|
||
const developmentPhases = [
|
||
{
|
||
phase: "Research & Planning",
|
||
duration: "4 weeks",
|
||
description: "User research, market analysis, feature prioritization, and technical architecture",
|
||
icon: <Target className="w-5 h-5" />
|
||
},
|
||
{
|
||
phase: "UI/UX Design",
|
||
duration: "2 weeks",
|
||
description: "User interface design, prototyping, and user experience optimization",
|
||
icon: <Palette className="w-5 h-5" />
|
||
},
|
||
{
|
||
phase: "Core Development",
|
||
duration: "6 weeks",
|
||
description: "Mobile app development, authentication, list builder, and basic inventory",
|
||
icon: <Code className="w-5 h-5" />
|
||
},
|
||
{
|
||
phase: "Advanced Features",
|
||
duration: "2 weeks",
|
||
description: "Voice integration, barcode scanning, collaboration features, and notifications",
|
||
icon: <Zap className="w-5 h-5" />
|
||
},
|
||
{
|
||
phase: "Testing & QA",
|
||
duration: "1 week",
|
||
description: "Comprehensive testing, bug fixes, and performance optimization",
|
||
icon: <CheckCircle className="w-5 h-5" />
|
||
}
|
||
];
|
||
|
||
const resultsMetrics = [
|
||
{ label: "Load Time", value: "<1.5s", description: "95% of screens load quickly" },
|
||
{ label: "Crash-free Sessions", value: "99.9%", description: "Industry-leading stability" },
|
||
{ label: "Feature Adoption", value: "70%", description: "Users adopt recurring lists" },
|
||
{ label: "User Satisfaction", value: "4.8/5", description: "Average app store rating" },
|
||
{ label: "Daily Active Users", value: "85%", description: "Strong user engagement" },
|
||
{ label: "Inventory Accuracy", value: "92%", description: "Smart tracking precision" }
|
||
];
|
||
|
||
const technicalAchievements = [
|
||
"Voice recognition with 95% accuracy across multiple languages",
|
||
"Real-time synchronization with conflict resolution algorithms",
|
||
"Smart inventory prediction based on consumption patterns",
|
||
"Seamless barcode integration with 200+ product categories"
|
||
];
|
||
|
||
const lessonsLearned = {
|
||
worked: [
|
||
"User testing with real families improved collaboration features significantly",
|
||
"Voice input prototyping early helped refine speech recognition accuracy",
|
||
"Modular architecture enabled rapid feature additions and updates"
|
||
],
|
||
improve: [
|
||
"Notification frequency personalization needed earlier implementation",
|
||
"Barcode database integration required more comprehensive planning",
|
||
"Family onboarding flow could benefit from interactive tutorials"
|
||
]
|
||
};
|
||
|
||
const futureRoadmap = [
|
||
{
|
||
phase: "Phase 2",
|
||
features: ["AI-powered shopping list suggestions", "Store discount tracking integration", "Recipe-based automatic list generation"]
|
||
},
|
||
{
|
||
phase: "Phase 3",
|
||
features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery services"]
|
||
}
|
||
];
|
||
|
||
export const RanOutOfProject = () => {
|
||
return (
|
||
<div className="dark min-h-screen bg-background">
|
||
<Navigation />
|
||
|
||
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||
<section className="relative pt-32 pb-24 bg-background overflow-hidden">
|
||
<GridPattern strokeDasharray="4 2" />
|
||
|
||
<div className="relative z-10 container mx-auto px-4 lg:px-6">
|
||
{/* Back Button */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
className="mb-12"
|
||
>
|
||
<Button
|
||
variant="ghost"
|
||
onClick={() => navigateTo('/case-studies')}
|
||
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0 hover:bg-transparent"
|
||
>
|
||
<ArrowLeft className="w-4 h-4" />
|
||
Back to Portfolio
|
||
</Button>
|
||
</motion.div>
|
||
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
{/* Content - Left Aligned */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="lg:col-span-7"
|
||
>
|
||
<div className="mb-6">
|
||
<Badge variant="secondary" className="text-accent border-accent/20 bg-accent/10">
|
||
Case Study
|
||
</Badge>
|
||
</div>
|
||
|
||
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-8 leading-tight">
|
||
{projectDetails.title}
|
||
</h1>
|
||
|
||
<p className="text-xl text-muted-foreground mb-10 leading-relaxed max-w-2xl">
|
||
{projectDetails.subtitle}
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Project Image */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="lg:col-span-5"
|
||
>
|
||
<div className="relative aspect-[4/3] overflow-hidden bg-card/30 rounded-2xl border border-border/50 p-4">
|
||
<ImageWithFallback
|
||
src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center"
|
||
alt="RanOutOf smart grocery management app showcasing voice-enabled list creation and collaborative family planning"
|
||
className="w-full h-full object-contain object-center rounded-xl"
|
||
/>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Section 2: Project Details */}
|
||
<section className="py-24 bg-card/30 relative overflow-hidden">
|
||
{/* Background Elements */}
|
||
<div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-green-500/5" />
|
||
<div className="absolute top-20 right-20 w-64 h-64 bg-accent/10 rounded-full blur-3xl opacity-20" />
|
||
<div className="absolute bottom-20 left-20 w-48 h-48 bg-green-500/10 rounded-full blur-3xl opacity-20" />
|
||
|
||
<div className="container mx-auto px-4 lg:px-6 relative z-10">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
{/* Section Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Project Details
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
Comprehensive overview of technologies, timeline, and key achievements that revolutionized household grocery management
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Project Meta Information Grid */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="grid lg:grid-cols-2 gap-8 mb-20"
|
||
>
|
||
{/* Technologies & Industries Card */}
|
||
<div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-accent/20 transition-all duration-500 group">
|
||
<div className="space-y-8">
|
||
{/* Technologies */}
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-accent/10 backdrop-blur-sm rounded-xl border border-accent/20 flex items-center justify-center group-hover:bg-accent/20 transition-all duration-300">
|
||
<Code className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground">Technologies</h3>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
{projectDetails.technologies.map((tech) => (
|
||
<Badge
|
||
key={tech}
|
||
variant="outline"
|
||
className="text-base border-border/40 bg-background/30 hover:bg-accent/10 hover:border-accent/40 flex items-center gap-2 px-4 py-2 transition-all duration-300"
|
||
>
|
||
<span className="text-accent">{getTechIcon(tech)}</span>
|
||
{tech}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Industries */}
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-green-500/10 backdrop-blur-sm rounded-xl border border-green-500/20 flex items-center justify-center group-hover:bg-green-500/20 transition-all duration-300">
|
||
<ShoppingCart className="w-6 h-6 text-green-400" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground">Industries</h3>
|
||
</div>
|
||
<div className="flex flex-wrap gap-3">
|
||
{projectDetails.industries.map((industry) => (
|
||
<Badge
|
||
key={industry}
|
||
variant="secondary"
|
||
className="text-base bg-green-500/10 border-green-500/20 text-green-100 hover:bg-green-500/20 px-4 py-2 transition-all duration-300"
|
||
>
|
||
{industry}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline & Team Card */}
|
||
<div className="bg-background/40 backdrop-blur-xl rounded-2xl p-8 border border-border/30 hover:border-blue-400/20 transition-all duration-500 group">
|
||
<div className="space-y-8">
|
||
{/* Duration */}
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-blue-500/10 backdrop-blur-sm rounded-xl border border-blue-500/20 flex items-center justify-center group-hover:bg-blue-500/20 transition-all duration-300">
|
||
<Calendar className="w-6 h-6 text-blue-400" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground">Project Timeline</h3>
|
||
</div>
|
||
<p className="text-lg text-muted-foreground pl-15">{projectDetails.duration}</p>
|
||
</div>
|
||
|
||
{/* Team */}
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-purple-500/10 backdrop-blur-sm rounded-xl border border-purple-500/20 flex items-center justify-center group-hover:bg-purple-500/20 transition-all duration-300">
|
||
<Users className="w-6 h-6 text-purple-400" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground">Team Composition</h3>
|
||
</div>
|
||
<p className="text-lg text-muted-foreground pl-15">{projectDetails.teamSize}</p>
|
||
</div>
|
||
|
||
{/* Platforms */}
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-12 h-12 bg-orange-500/10 backdrop-blur-sm rounded-xl border border-orange-500/20 flex items-center justify-center group-hover:bg-orange-500/20 transition-all duration-300">
|
||
<Smartphone className="w-6 h-6 text-orange-400" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground">Target Platforms</h3>
|
||
</div>
|
||
<div className="flex gap-3 pl-15">
|
||
{projectDetails.platforms.map((platform) => (
|
||
<Badge
|
||
key={platform}
|
||
variant="outline"
|
||
className="text-base border-orange-400/40 bg-orange-500/10 text-orange-100 hover:bg-orange-500/20 px-3 py-1"
|
||
>
|
||
{platform}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Key Achievements Section */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="mb-16"
|
||
>
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
|
||
Key Impact & Results
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
Measurable outcomes that demonstrate RanOutOf's success in transforming household grocery management
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{keyAchievements.map((achievement, index) => (
|
||
<motion.div
|
||
key={achievement.label}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
|
||
whileHover={{
|
||
scale: 1.02,
|
||
y: -4,
|
||
transition: { duration: 0.3, ease: "easeOut" }
|
||
}}
|
||
className="bg-background/50 backdrop-blur-xl rounded-2xl p-8 border border-border/40 hover:border-accent/30 hover:bg-background/60 transition-all duration-500 group cursor-pointer relative overflow-hidden"
|
||
>
|
||
{/* Card Background Gradient */}
|
||
<div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||
|
||
{/* Content */}
|
||
<div className="relative z-10 text-center">
|
||
{/* Value */}
|
||
<div className="text-3xl lg:text-4xl font-bold text-accent mb-4 group-hover:text-accent transition-colors duration-300">
|
||
{achievement.value}
|
||
</div>
|
||
|
||
{/* Label */}
|
||
<div className="text-xl font-semibold text-foreground mb-3 group-hover:text-foreground transition-colors duration-300">
|
||
{achievement.label}
|
||
</div>
|
||
|
||
{/* Description */}
|
||
<div className="text-base text-muted-foreground leading-relaxed group-hover:text-muted-foreground transition-colors duration-300">
|
||
{achievement.description}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Hover Effect Line */}
|
||
<div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-accent to-accent/50 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Executive Summary */}
|
||
<section className="py-24 bg-card/30">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto text-center"
|
||
>
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
Executive Summary
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground leading-relaxed">
|
||
RanOutOf is a mobile-first solution tailored for modern households that frequently forget or mismanage their grocery shopping. The app simplifies list-making, enables shared household planning, and manages pantry inventory using reminders, barcodes, and smart grouping features to eliminate stockouts and reduce food waste.
|
||
</p>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Project Overview */}
|
||
<section className="py-24 bg-background">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Project Overview
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<div className="grid lg:grid-cols-3 gap-12">
|
||
{/* Background & Context */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
whileHover={{
|
||
scale: 1.05,
|
||
y: -4,
|
||
transition: { duration: 0.3, ease: "easeOut" }
|
||
}}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="bg-card/30 rounded-2xl p-8 border-2 border-accent/20 cursor-pointer group hover:border-accent/40 hover:bg-card/40 hover:shadow-lg hover:shadow-accent/10 transition-all duration-300 ease-out"
|
||
>
|
||
{/* Glassmorphism Icon Container */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="flex justify-start mb-6"
|
||
>
|
||
<div className="w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full border border-border/30 flex items-center justify-center group-hover:border-accent/50 group-hover:bg-accent/10 transition-all duration-300 ease-out">
|
||
<Globe className="w-8 h-8 text-accent group-hover:scale-110 transition-transform duration-300 ease-out" />
|
||
</div>
|
||
</motion.div>
|
||
<h3 className="text-2xl font-semibold text-foreground mb-6">Background & Context</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Frequent grocery stockouts, duplicate purchases, and poor inventory tracking are common problems for busy families. RanOutOf addresses this by digitizing list-building, enabling collaboration, and automatically reminding users about restocking needs.
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Target Audience */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
whileHover={{
|
||
scale: 1.05,
|
||
y: -4,
|
||
transition: { duration: 0.3, ease: "easeOut" }
|
||
}}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="bg-card/30 rounded-2xl p-8 border-2 border-blue-400/20 cursor-pointer group hover:border-blue-400/40 hover:bg-card/40 hover:shadow-lg hover:shadow-blue-400/10 transition-all duration-300 ease-out"
|
||
>
|
||
{/* Glassmorphism Icon Container */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="flex justify-start mb-6"
|
||
>
|
||
<div className="w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full border border-border/30 flex items-center justify-center group-hover:border-blue-400/50 group-hover:bg-blue-400/10 transition-all duration-300 ease-out">
|
||
<Users className="w-8 h-8 text-blue-400 group-hover:scale-110 transition-transform duration-300 ease-out" />
|
||
</div>
|
||
</motion.div>
|
||
<h3 className="text-2xl font-semibold text-foreground mb-6">Target Audience</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
Tech-savvy individuals and families (age 25–45) who want to simplify their grocery management and improve household planning through mobile convenience and collaborative features.
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Business Objectives */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
whileHover={{
|
||
scale: 1.05,
|
||
y: -4,
|
||
transition: { duration: 0.3, ease: "easeOut" }
|
||
}}
|
||
transition={{ duration: 0.6, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="bg-card/30 rounded-2xl p-8 border-2 border-green-400/20 cursor-pointer group hover:border-green-400/40 hover:bg-card/40 hover:shadow-lg hover:shadow-green-400/10 transition-all duration-300 ease-out"
|
||
>
|
||
{/* Glassmorphism Icon Container */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="flex justify-start mb-6"
|
||
>
|
||
<div className="w-16 h-16 bg-background/20 backdrop-blur-sm rounded-full border border-border/30 flex items-center justify-center group-hover:border-green-400/50 group-hover:bg-green-400/10 transition-all duration-300 ease-out">
|
||
<Target className="w-8 h-8 text-green-400 group-hover:scale-110 transition-transform duration-300 ease-out" />
|
||
</div>
|
||
</motion.div>
|
||
<h3 className="text-2xl font-semibold text-foreground mb-6">Business Objectives</h3>
|
||
<div className="space-y-3">
|
||
{businessObjectives.map((objective, index) => (
|
||
<div key={index} className="flex items-start gap-3">
|
||
<CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
|
||
<span className="text-muted-foreground text-base">{objective}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Core Features */}
|
||
<section className="py-24 bg-card/30">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-6xl mx-auto"
|
||
>
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Core Features & Functionality
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{coreFeatures.map((feature, index) => (
|
||
<motion.div
|
||
key={feature.title}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<Card className="h-full bg-card/50 border-border/50 hover:border-accent/30 transition-all duration-300 group">
|
||
<CardContent className="p-8">
|
||
<div className="text-accent mb-4 group-hover:scale-110 transition-transform duration-300">
|
||
{feature.icon}
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{feature.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Challenges & Solution Architecture */}
|
||
<section className="py-24 bg-background">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="grid lg:grid-cols-2 gap-20">
|
||
{/* Challenges */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
|
||
Challenges & Constraints
|
||
</h2>
|
||
<div className="space-y-6">
|
||
{technicalChallenges.map((challenge, index) => (
|
||
<motion.div
|
||
key={challenge.title}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/20 transition-colors duration-300"
|
||
>
|
||
<div className="flex items-start gap-4">
|
||
<div className="text-accent mt-1">
|
||
{challenge.icon}
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold text-foreground mb-2">
|
||
{challenge.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{challenge.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Solution Architecture */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-12">
|
||
Solution Architecture
|
||
</h2>
|
||
<div className="bg-background/50 rounded-2xl p-8 border border-border/50">
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-6">Technology Stack</h3>
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-3">
|
||
<Smartphone className="w-5 h-5 text-accent" />
|
||
<span className="text-muted-foreground">Frontend: React Native</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Server className="w-5 h-5 text-accent" />
|
||
<span className="text-muted-foreground">Backend: Laravel & Node.js</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Database className="w-5 h-5 text-accent" />
|
||
<span className="text-muted-foreground">Database: MySQL</span>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Cloud className="w-5 h-5 text-accent" />
|
||
<span className="text-muted-foreground">Cloud: Firebase Services</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-6">Key Highlights</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
|
||
<span className="text-muted-foreground text-base">Voice recognition with multi-language support</span>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
|
||
<span className="text-muted-foreground text-base">Real-time synchronization with conflict resolution</span>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
|
||
<span className="text-muted-foreground text-base">Smart inventory tracking with expiry prediction</span>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<CheckCircle className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
|
||
<span className="text-muted-foreground text-base">Comprehensive admin panel for content management</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Development Process */}
|
||
<section className="py-24 bg-card/30">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-6xl mx-auto"
|
||
>
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Development Process & Methodology
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
Agile development approach with milestone-based delivery ensuring quality and timely completion.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-5 gap-8">
|
||
{developmentPhases.map((phase, index) => (
|
||
<motion.div
|
||
key={phase.phase}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="relative"
|
||
>
|
||
<div className="bg-card/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 h-full">
|
||
<div className="text-accent mb-4">
|
||
{phase.icon}
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-foreground mb-2">
|
||
{phase.phase}
|
||
</h3>
|
||
<div className="text-accent font-medium mb-3">
|
||
{phase.duration}
|
||
</div>
|
||
<p className="text-muted-foreground text-sm leading-relaxed">
|
||
{phase.description}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Connector Line */}
|
||
{index < developmentPhases.length - 1 && (
|
||
<div className="hidden lg:block absolute top-1/2 -right-4 w-8 h-0.5 bg-border transform -translate-y-1/2" />
|
||
)}
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Results & Impact */}
|
||
<section className="py-24 bg-background">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-6xl mx-auto"
|
||
>
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Results & Impact
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
Comprehensive performance metrics demonstrating RanOutOf's success in transforming household grocery management.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||
{resultsMetrics.map((metric, index) => (
|
||
<motion.div
|
||
key={metric.label}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||
viewport={{ once: true }}
|
||
className="bg-background/50 rounded-xl p-6 border border-border/50 hover:border-accent/30 transition-all duration-300 text-center"
|
||
>
|
||
<div className="text-3xl font-bold text-accent mb-2">
|
||
{metric.value}
|
||
</div>
|
||
<div className="text-lg font-semibold text-foreground mb-2">
|
||
{metric.label}
|
||
</div>
|
||
<div className="text-muted-foreground text-sm">
|
||
{metric.description}
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="bg-background/50 rounded-2xl p-8 border border-border/50"
|
||
>
|
||
<h3 className="text-2xl font-semibold text-foreground mb-6">
|
||
Technical Achievements
|
||
</h3>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
{technicalAchievements.map((achievement, index) => (
|
||
<div key={index} className="flex items-start gap-3">
|
||
<CheckCircle className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
|
||
<span className="text-muted-foreground">{achievement}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Lessons Learned */}
|
||
<section className="py-24 bg-card/30">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Lessons Learned
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
Key insights and learnings from the RanOutOf development journey.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-12">
|
||
{/* What Worked */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="bg-green-500/5 rounded-2xl p-8 border border-green-500/20"
|
||
>
|
||
<h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
|
||
<CheckCircle className="w-6 h-6 text-green-400" />
|
||
What Worked Well
|
||
</h3>
|
||
<div className="space-y-4">
|
||
{lessonsLearned.worked.map((lesson, index) => (
|
||
<div key={index} className="flex items-start gap-3">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full mt-2 flex-shrink-0" />
|
||
<span className="text-muted-foreground">{lesson}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* What Could Improve */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="bg-yellow-500/5 rounded-2xl p-8 border border-yellow-500/20"
|
||
>
|
||
<h3 className="text-2xl font-semibold text-foreground mb-8 flex items-center gap-3">
|
||
<ArrowRight className="w-6 h-6 text-yellow-400" />
|
||
Areas for Improvement
|
||
</h3>
|
||
<div className="space-y-4">
|
||
{lessonsLearned.improve.map((lesson, index) => (
|
||
<div key={index} className="flex items-start gap-3">
|
||
<div className="w-2 h-2 bg-yellow-400 rounded-full mt-2 flex-shrink-0" />
|
||
<span className="text-muted-foreground">{lesson}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Future Roadmap */}
|
||
<section className="py-24 bg-background">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-6xl mx-auto"
|
||
>
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Future Roadmap
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
Planned enhancements and features to further revolutionize grocery management.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-12">
|
||
{futureRoadmap.map((roadmap, index) => (
|
||
<motion.div
|
||
key={roadmap.phase}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="bg-background/50 rounded-2xl p-8 border border-border/50 hover:border-accent/30 transition-all duration-300"
|
||
>
|
||
<h3 className="text-2xl font-semibold text-foreground mb-6">
|
||
{roadmap.phase}
|
||
</h3>
|
||
<div className="space-y-4">
|
||
{roadmap.features.map((feature, featureIndex) => (
|
||
<div key={featureIndex} className="flex items-start gap-3">
|
||
<ArrowRight className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
|
||
<span className="text-muted-foreground">{feature}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Client Testimonial */}
|
||
<section className="py-24 bg-card/30">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto text-center"
|
||
>
|
||
<div className="bg-card/50 rounded-2xl p-12 border border-border/50">
|
||
<div className="flex justify-center mb-8">
|
||
<ImageWithFallback
|
||
src={ranoutofLogo}
|
||
alt="RanOutOf - Smart Grocery Management App Logo"
|
||
className="h-12 w-auto object-contain"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex justify-center mb-8">
|
||
<div className="flex text-yellow-400">
|
||
{[...Array(5)].map((_, i) => (
|
||
<Star key={i} className="w-6 h-6 fill-current" />
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<blockquote className="text-2xl lg:text-3xl text-foreground mb-8 leading-relaxed italic">
|
||
"WDI delivered a clean, powerful solution that has made grocery planning easier than ever. The list templates, reminders, and inventory alerts are game-changers for our users."
|
||
</blockquote>
|
||
|
||
<div className="flex flex-col items-center">
|
||
<div className="text-lg font-semibold text-foreground">
|
||
Rishabh Jain
|
||
</div>
|
||
<div className="text-muted-foreground">
|
||
Director, Global Ease Solutions Pty. Ltd.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-24 bg-background">
|
||
<div className="container mx-auto px-4 lg:px-6">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto text-center"
|
||
>
|
||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
Want to build a smart, collaborative lifestyle app?
|
||
</h2>
|
||
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
|
||
Partner with WDI to design solutions that streamline daily life with precision tech and intuitive design.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Button
|
||
size="lg"
|
||
onClick={() => navigateTo('/contact-us')}
|
||
className="bg-accent hover:bg-accent/90 text-accent-foreground"
|
||
>
|
||
Contact Us
|
||
<ArrowRight className="w-5 h-5 ml-2" />
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
onClick={() => navigateTo('/case-studies')}
|
||
className="border-accent/30 text-accent hover:bg-accent/10"
|
||
>
|
||
View More Case Studies
|
||
<ExternalLink className="w-5 h-5 ml-2" />
|
||
</Button>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}; |