Wdipl-react/pages/RanOutOfProject.tsx

import PortfolioChallengeSolution from "@/components/portfolio/PortfolioChallengeSolution";
import { PortfolioCoreFeatures } from "@/components/portfolio/PortfolioCoreFeatures";
import { PortfolioDevelopmentProcess } from "@/components/portfolio/PortfolioDevelopmentProcess";
import { PortfolioExecutiveSummary } from "@/components/portfolio/PortfolioExecutiveSummary";
import { PortfolioHero } from "@/components/portfolio/PortfolioHero";
import PortfolioLessonsSection from "@/components/portfolio/PortfolioLessonsSection";
import { PortfolioProjectDetails } from "@/components/portfolio/PortfolioProjectDetails";
import { PortfolioProjectOverview } from "@/components/portfolio/PortfolioProjectOverview";
import { PortfolioResultsImpact } from "@/components/portfolio/PortfolioResultsImpact";
import PortfolioRoadmapSection from "@/components/portfolio/PortfolioRoadmapSection";
import PortfolioTestimonial from "@/components/portfolio/PortfolioTestimonial";
import { motion } from "framer-motion";
import {
  AlertTriangle,
  ArrowRight,
  Bell,
  Brain,
  CheckCircle,
  Cloud,
  Code,
  Database,
  ExternalLink,
  Globe,
  Home,
  List,
  Mic,
  Palette,
  RefreshCcw,
  Scan,
  Server,
  Share2,
  Smartphone,
  Target,
  Users,
  Zap
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../components/ui/button";
import ranoutofLogo from "../src/images/ranoutof-logo.webp";

// Project data

const projectData = {
  hero: {
    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",
    imageUrl: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center",
    imageAlt: "RanOutOf smart grocery management app showcasing voice-enabled list creation and collaborative family planning"
  },
  details: {
    technologies: [
      { name: "React Native", icon: <Smartphone className="w-4 h-4" /> },
      { name: "Node.js", icon: <Server className="w-4 h-4" /> },
      { name: "MySQL", icon: <Database className="w-4 h-4" /> },
      { name: "AWS", icon: <Cloud className="w-4 h-4" /> }
    ],
    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"]
  },
  achievements: [
    { label: "Product Categories", value: "200+", description: "Over 25,000 items available" },
    { label: "List Sharing", value: "100%", description: "Real-time collaboration" },
    { label: "Smart Alerts", value: "24/7", description: "Expiry and restock reminders" }
  ],
  executiveSummary: {
    content: "RanOutOf is a mobile-first app designed to help modern households simplify grocery shopping and stay organized. The app streamlines list creation, supports collaborative household planning, and efficiently manages pantry inventory with features like reminders, barcode scanning, and smart grouping."
  },
  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"
  ],
  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" />
    }
  ],
  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" />
    }
  ],
  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" }
  ],
  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"
  ],
  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 and eCommerce platforms"]
    }
  ],
};


export const RanOutOfProject = () => {
  const navigate = useNavigate();
  return (
    <div className="dark min-h-screen bg-background">

      {/* Section 1: Hero with Heading, Subheading, and Image */}
      <PortfolioHero
        title={projectData.hero.title}
        subtitle={projectData.hero.subtitle}
        imageUrl={projectData.hero.imageUrl}
        imageAlt={projectData.hero.imageAlt}
      />

      {/* Section 2: Project Details */}
      <PortfolioProjectDetails
        details={projectData.details}
        achievements={projectData.achievements}
      />

      {/* Executive Summary */}
      <PortfolioExecutiveSummary
        content={projectData.executiveSummary.content}
      />

      {/* Project Overview */}
      <section className="py-24 bg-background">
        <div className="container mx-auto px-4 lg:px-6">
          <div className="max-w-6xl mx-auto text-center mb-16">
            <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
              Project Overview
            </h2>
          </div>

          <div className="grid lg:grid-cols-3 gap-12">
            <PortfolioProjectOverview
              icon={<Globe className="w-8 h-8 text-accent" />}
              title="Background & Context"
              description="Frequent grocery stockouts, duplicate purchases, and poor inventory tracking are common problems..."
              borderColor="border-accent/20"
              hoverColor="accent"
            />

            <PortfolioProjectOverview
              icon={<Users className="w-8 h-8 text-blue-400" />}
              title="Target Audience"
              description="Tech-savvy individuals and families (age 15–65) who want to simplify grocery management."
              borderColor="border-blue-400/20"
              hoverColor="blue-400"
            />

            <PortfolioProjectOverview
              icon={<Target className="w-8 h-8 text-green-400" />}
              title="Business Objectives"
              points={projectData.businessObjectives}
              borderColor="border-green-400/20"
              hoverColor="green-400"
            />
          </div>
        </div>
      </section>

      {/* Core Features */}
      <PortfolioCoreFeatures
        title="Core Features & Functionality"
        subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
        features={projectData.coreFeatures}
      />

      {/* Challenges & Solution Architecture */}
      <PortfolioChallengeSolution
        challenges={[
          {
            icon: <Mic className="w-6 h-6 text-accent" />,
            title: "Multi-Input Integration",
            description: "Creating seamless integration between voice, barcode, and manual input methods."
          },
          {
            icon: <RefreshCcw className="w-6 h-6 text-accent" />,
            title: "Real-time Synchronization",
            description: "Real-time grocery list sharing and updates with family members."
          },
          {
            icon: <Brain className="w-6 h-6 text-accent" />,
            title: "Inventory Intelligence",
            description: "Building smart expiration tracking and predictive restocking algorithms."
          },
          {
            icon: <Smartphone className="w-6 h-6 text-accent" />,
            title: "Cross-platform Consistency",
            description: "Maintaining identical user experience across iOS, Android, and web admin."
          }
        ]}
        technologyStack={[
          { icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: React Native" },
          { icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Node.js" },
          { icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MySQL" },
          { icon: <Cloud className="w-5 h-5 text-accent" />, label: "Cloud: AWS" },
        ]}
        highlights={[
          { text: "Voice recognition with multi-language support" },
          { text: "Real-time synchronization with conflict resolution" },
          { text: "Smart inventory tracking with expiry prediction" },
          { text: "Comprehensive admin panel for content management" },
        ]}
      />

      {/* Development Process */}
      <PortfolioDevelopmentProcess
        title="Development Process & Methodology"
        subtitle="RanOutOf follows an Agile development approach with milestone-based delivery. This ensures timely completion while maintaining high quality through iterative progress and continuous feedback."
        phases={projectData.developmentPhases}
      />

      {/* Results & Impact */}
      <PortfolioResultsImpact
        title="Results & Impact"
        subtitle="RanOutOf delivers comprehensive performance metrics showcasing its success in transforming household grocery management. Key indicators include improved inventory accuracy, reduced stockouts, increased shared list usage, and measurable reductions in food waste."
        metrics={projectData.resultsMetrics}
        achievements={projectData.technicalAchievements}
      />

      {/* Lessons Learned */}
      <PortfolioLessonsSection
        title="Lessons Learned"
        description="Key insights and learnings from the RanOutOf development journey."
        workedTitle="What Worked Well"
        workedIcon={<CheckCircle className="w-6 h-6" />}
        workedColor="#22c55e" // Tailwind green-500
        workedLessons={[
          "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",
        ]}
        improveTitle="Areas for Improvement"
        improveIcon={<ArrowRight className="w-6 h-6" />}
        improveColor="#eab308" // Tailwind yellow-500
        improveLessons={[
          "Notification frequency personalization needed earlier implementation",
          "Barcode database integration required more comprehensive planning",
          "Family onboarding flow could benefit from interactive tutorials",
        ]}
      />

      {/* Future Roadmap */}
      <PortfolioRoadmapSection
        title="Future Roadmap"
        description="Planned enhancements and features to further revolutionize grocery management apps."
        roadmapItems={projectData.futureRoadmap}
        icon={<ArrowRight className="w-5 h-5" />}
      />

      {/* Client Testimonial */}
      <PortfolioTestimonial
        logo={ranoutofLogo}
        alt="RanOutOf Logo"
        rating={5}
        testimonial="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."
        clientName="Rishabh Jain"
        clientRole="Director, Global Ease Solutions Pty. Ltd."
      />

      {/* 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={() => navigate('/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={() => navigate('/case-studies')}
                className="border-accent/30 text-accent hover:bg-accent/10"
              >
                View More Case Studies
                <ExternalLink className="w-5 h-5 ml-2" />
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

    </div>
  );
};