From 700fe06892b4bc356a233129031bc13465ae17d4 Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Tue, 14 Oct 2025 19:22:07 +0530 Subject: [PATCH] diwali banner, portfolio content changes, and some hero text changes and slider add on homepage --- components/CaseStudySlider.tsx | 394 +++++ components/DedicatedTeamPricing.tsx | 280 ++++ components/DiwaliHeroSection.tsx | 571 +++++++ components/PackagesSection.tsx | 116 ++ components/VibeProgrammingPackages.tsx | 155 ++ .../portfolio/PortfolioChallengeSolution.tsx | 127 ++ .../portfolio/PortfolioCoreFeatures.tsx | 73 + .../portfolio/PortfolioDevelopmentProcess.tsx | 78 + .../portfolio/PortfolioExecutiveSummary.tsx | 35 + components/portfolio/PortfolioHero.tsx | 96 ++ .../portfolio/PortfolioLessonsSection.tsx | 119 ++ .../portfolio/PortfolioProjectDetails.tsx | 233 +++ .../portfolio/PortfolioProjectOverview.tsx | 75 + .../portfolio/PortfolioResultsImpact.tsx | 92 ++ .../portfolio/PortfolioRoadmapSection.tsx | 75 + components/portfolio/PortfolioTestimonial.tsx | 70 + pages/CustomWebAppDevelopment.tsx | 2 +- pages/GoodTimesProject.tsx | 1327 ++++------------ pages/Homepage.tsx | 20 +- pages/MVPStartupLaunchPackages.tsx | 20 +- pages/MobileAppDevelopment.tsx | 6 +- pages/RanOutOfProject.tsx | 1237 ++++----------- pages/SeezunProject.tsx | 643 ++++---- pages/TradersCircuitProject.tsx | 1332 ++++------------- pages/WokaProject.tsx | 708 ++++----- src/images/seezun-logo.png | Bin 0 -> 4856 bytes src/images/tc-logo.png | Bin 0 -> 7261 bytes src/images/woka-logo.png | Bin 0 -> 32351 bytes 28 files changed, 4185 insertions(+), 3699 deletions(-) create mode 100644 components/CaseStudySlider.tsx create mode 100644 components/DedicatedTeamPricing.tsx create mode 100644 components/DiwaliHeroSection.tsx create mode 100644 components/PackagesSection.tsx create mode 100644 components/VibeProgrammingPackages.tsx create mode 100644 components/portfolio/PortfolioChallengeSolution.tsx create mode 100644 components/portfolio/PortfolioCoreFeatures.tsx create mode 100644 components/portfolio/PortfolioDevelopmentProcess.tsx create mode 100644 components/portfolio/PortfolioExecutiveSummary.tsx create mode 100644 components/portfolio/PortfolioHero.tsx create mode 100644 components/portfolio/PortfolioLessonsSection.tsx create mode 100644 components/portfolio/PortfolioProjectDetails.tsx create mode 100644 components/portfolio/PortfolioProjectOverview.tsx create mode 100644 components/portfolio/PortfolioResultsImpact.tsx create mode 100644 components/portfolio/PortfolioRoadmapSection.tsx create mode 100644 components/portfolio/PortfolioTestimonial.tsx create mode 100644 src/images/seezun-logo.png create mode 100644 src/images/tc-logo.png create mode 100644 src/images/woka-logo.png diff --git a/components/CaseStudySlider.tsx b/components/CaseStudySlider.tsx new file mode 100644 index 0000000..e8b343b --- /dev/null +++ b/components/CaseStudySlider.tsx @@ -0,0 +1,394 @@ +// components/CaseStudySlider.tsx +import { motion } from "framer-motion"; +import { + Activity, + ArrowUpRight, + Building2, + ChevronLeft, ChevronRight, + FlaskConical, + Globe, + Heart, + Package, + PartyPopper, + ShoppingCart, + Star, + Tractor, + TrendingUp, + Trophy, + Tv, + Users, + Utensils +} from "lucide-react"; +import { useEffect, useRef, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import ambleCase from "../src/images/amble-case.webp"; +import amozCase from "../src/images/amozCase.webp"; +import dkCase from "../src/images/dkCase.webp"; +import farmCase from "../src/images/farmCase.webp"; +import gtCase from "../src/images/gt-case.webp"; +import leanCase from "../src/images/leanCase.webp"; +import niftyCase from "../src/images/niftyCase.webp"; +import prospertyCase from "../src/images/prospertyCase.webp"; +import ranoutofCase from "../src/images/ranoutof-case.webp"; +import RrCase from "../src/images/resturant-reward-case.webp"; +import seezunCase from "../src/images/seezun-case.webp"; +import simplitendCase from "../src/images/simplitendCase.webp"; +import tcCase from "../src/images/tc-case.webp"; +import vib360Case from "../src/images/vib360Case.webp"; +import wokaCase from "../src/images/woka-case.webp"; +import { ImageWithFallback } from "./figma/ImageWithFallback"; +import { Badge } from "./ui/badge"; +import { Button } from "./ui/button"; +import { Card, CardContent } from "./ui/card"; + +// Internal data (no need to pass props) +const defaultCaseStudies = [ + { + id: 1, + title: "RanOutOf", + image: ranoutofCase, + category: "Lifestyle", + industry: "Consumer", + featured: true, + link: "/projects/ranoutof", + icon: Package + }, + { + id: 2, + title: "Seezun", + image: seezunCase, + category: "E-commerce", + industry: "Retail", + featured: true, + link: "/projects/seezun", + icon: ShoppingCart + }, + { + id: 3, + title: "Woka", + image: wokaCase, + category: "Health & Fitness", + industry: "Healthcare", + featured: true, + link: "/projects/woka", + icon: Tv + }, + { + id: 6, + title: "Traders Circuit", + image: tcCase, + category: "FinTech", + industry: "Finance", + featured: true, + link: "/projects/traderscircuit", + icon: TrendingUp + }, + { + id: 7, + title: "Good Times", + image: gtCase, + category: "Events", + industry: "Entertainment", + featured: true, + link: "/projects/goodtimes", + 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: 14, + title: "Prosperty", + image: prospertyCase, + category: "Lifestyle", + industry: "Real Estate", + featured: false, + link: "/projects/prosperty", + icon: Building2 + }, + { + id: 15, + title: "Simpletend", + image: simplitendCase, + category: "Health & Fitness", + industry: "Healthcare", + featured: false, + link: "/projects/simpletend", + icon: Activity + }, + { + id: 16, + title: "Farm Feeder", + image: farmCase, + category: "AgriTech", + industry: "Agriculture", + featured: false, + link: "/comming-soon", + icon: Tractor + }, + { + id: 17, + title: "Lean In World", + image: leanCase, + category: "AgriTech", + industry: "Agriculture", + featured: false, + link: "/comming-soon", + icon: Globe + }, +]; + +interface CaseStudySliderProps { + autoPlay?: boolean; + autoPlayInterval?: number; +} + +export const CaseStudySlider = ({ + autoPlay = false, + autoPlayInterval = 4000, +}: CaseStudySliderProps) => { + const [currentIndex, setCurrentIndex] = useState(0); + const [isAutoPlaying, setIsAutoPlaying] = useState(autoPlay); + const [visibleSlides, setVisibleSlides] = useState(3); + const sliderRef = useRef(null); + const containerRef = useRef(null); + const navigate = useNavigate(); + + const caseStudies = defaultCaseStudies; + + const nextSlide = () => { + setCurrentIndex((prev) => { + const nextIndex = prev + 1; + return nextIndex > caseStudies.length - visibleSlides ? 0 : nextIndex; + }); + }; + + const prevSlide = () => { + setCurrentIndex((prev) => { + const prevIndex = prev - 1; + return prevIndex < 0 ? caseStudies.length - visibleSlides : prevIndex; + }); + }; + + const goToSlide = (index: number) => { + setCurrentIndex(Math.min(index, caseStudies.length - visibleSlides)); + }; + + useEffect(() => { + if (!isAutoPlaying || !autoPlay) return; + const interval = setInterval(nextSlide, autoPlayInterval); + return () => clearInterval(interval); + }, [isAutoPlaying, autoPlay, autoPlayInterval, visibleSlides]); + + // Calculate visible slides on resize + useEffect(() => { + const updateVisibleSlides = () => { + if (!containerRef.current) return; + const width = containerRef.current.offsetWidth; + if (width < 640) setVisibleSlides(1); + else if (width < 1024) setVisibleSlides(2); + else setVisibleSlides(3); + }; + + updateVisibleSlides(); + window.addEventListener('resize', updateVisibleSlides); + return () => window.removeEventListener('resize', updateVisibleSlides); + }, []); + + const maxIndex = Math.max(0, caseStudies.length - visibleSlides); + + // Calculate the actual translation percentage + const getTranslationPercentage = () => { + if (visibleSlides >= caseStudies.length) return 0; + return (currentIndex * (100 / visibleSlides)); + }; + + return ( +
setIsAutoPlaying(false)} + onMouseLeave={() => setIsAutoPlaying(autoPlay)} + ref={containerRef} + > +
+ {/* Header */} +
+ {caseStudies.length > visibleSlides && ( +
+ + +
+ )} +
+ + {/* Slider Container */} +
+ + {caseStudies.map((study, index) => { + const IconComponent = study.icon; + return ( + + navigate(study.link)} + > + + {/* Image */} +
+ +
+ + {/* Category Badge */} +
+ + {study.category} + +
+ + {/* Featured Badge */} + {study.featured && ( +
+
+ + Featured +
+
+ )} + + {/* Icon */} +
+
+ +
+
+
+ + + + ); + })} + +
+ + {/* Dots Indicator */} + {caseStudies.length > visibleSlides && ( +
+ {Array.from({ length: maxIndex + 1 }).map((_, index) => ( +
+ )} +
+
+ ); +}; \ No newline at end of file diff --git a/components/DedicatedTeamPricing.tsx b/components/DedicatedTeamPricing.tsx new file mode 100644 index 0000000..236b42a --- /dev/null +++ b/components/DedicatedTeamPricing.tsx @@ -0,0 +1,280 @@ +import { motion } from "framer-motion"; +import { Check, Users, Clock, Sparkles } from "lucide-react"; +import { GridPattern } from "./GridPattern"; +import { Badge } from "./ui/badge"; + +interface PricingTier { + name: string; + price: string; + pricePerMonth: string; + description: string; + isPopular?: boolean; + teamSize: string; + projectManager: string; + uiuxDesigners: string; + frontendDevs: string; + backendDevs: string; + qaTesters: string; + leadTime: string; + minEngagement: string; +} + +const pricingTiers: PricingTier[] = [ + { + name: "Small", + price: "$7,500", + pricePerMonth: "/mo", + description: "Maintenance & updates", + teamSize: "3-5 Members", + projectManager: "Part-time (≤ 32 hrs/month)", + uiuxDesigners: "Part-time", + frontendDevs: "Shared", + backendDevs: "Shared", + qaTesters: "Part-time", + leadTime: "< 3 Days", + minEngagement: "1 Month" + }, + { + name: "Medium", + price: "$12,000", + pricePerMonth: "/mo", + description: "Ongoing MVP development", + isPopular: true, + teamSize: "4-8 Members", + projectManager: "Shared (≤ 80 hrs/month)", + uiuxDesigners: "Shared", + frontendDevs: "Shared", + backendDevs: "Shared", + qaTesters: "Shared", + leadTime: "< 2 Weeks", + minEngagement: "2 Months" + }, + { + name: "Large", + price: "$22,680", + pricePerMonth: "/mo", + description: "Long-term growth & GTM", + teamSize: "6-10 Members", + projectManager: "Dedicated full-time", + uiuxDesigners: "Full-time", + frontendDevs: "Full-time", + backendDevs: "Full-time", + qaTesters: "Full-time", + leadTime: "< 4 Weeks", + minEngagement: "3 Months" + } +]; + +const includedFeatures = [ + { + left: "Access to WDI Code Library", + right: "Direct Communication" + }, + { + left: "Time Zone Overlap: 3 Hours", + right: "Resource Replacement (within 1 week)" + }, + { + left: "No Obligation Trial (conditional)", + right: "IPR & Code Ownership" + }, + { + left: "Termination Notice: 1 Month", + right: "Performance Guarantee" + } +]; + +const comparisonRows = [ + { label: "Team Size", key: "teamSize" as keyof PricingTier }, + { label: "Project Manager", key: "projectManager" as keyof PricingTier }, + { label: "UI/UX Designers", key: "uiuxDesigners" as keyof PricingTier }, + { label: "Frontend Developers", key: "frontendDevs" as keyof PricingTier }, + { label: "Backend Developers", key: "backendDevs" as keyof PricingTier }, + { label: "QA Testers", key: "qaTesters" as keyof PricingTier }, + { label: "Lead Time to Start", key: "leadTime" as keyof PricingTier }, + { label: "Minimum Engagement Period", key: "minEngagement" as keyof PricingTier } +]; + +export const DedicatedTeamPricing = () => { + return ( +
+ + +
+ {/* Header */} + +
+ +

+ Dedicated Team Pricing +

+
+

+ Scale your development with flexible team structures tailored to your project needs +

+ + + {/* Pricing Cards Row */} + + {pricingTiers.map((tier, index) => ( + + {tier.isPopular && ( +
+ + Most Popular + +
+ )} + +
+

+ {tier.name} +

+
+ + {tier.price} + + + {tier.pricePerMonth} + +
+

+ {tier.description} +

+
+ + ))} + + + {/* Comparison Table */} + +
+
+ + {/* Table Header - Hidden on mobile, shown on desktop */} + + + + {pricingTiers.map((tier) => ( + + ))} + + + + {/* Table Body */} + + {comparisonRows.map((row, rowIndex) => ( + + + + {/* Desktop: Show values in columns */} + {pricingTiers.map((tier) => ( + + ))} + + ))} + +
+ {tier.name} +
+
{row.label}
+
{row.label}
+ + {/* Mobile: Stack values vertically with tier name */} +
+ {pricingTiers.map((tier) => ( +
+ {tier.name}: + {tier[row.key]} +
+ ))} +
+ 		+ {tier[row.key]} +
+
+
+ + + {/* Included in All Plans */} + +
+
+
+ +
+

+ Included in All Plans +

+
+ +
+ {includedFeatures.map((feature, index) => ( +
+
+
+ +
+ + {feature.left} + +
+
+
+ +
+ + {feature.right} + +
+
+ ))} +
+
+ +
+
+ ); +}; diff --git a/components/DiwaliHeroSection.tsx b/components/DiwaliHeroSection.tsx new file mode 100644 index 0000000..c8a4f95 --- /dev/null +++ b/components/DiwaliHeroSection.tsx @@ -0,0 +1,571 @@ +import { Button } from "./ui/button"; +import { Calendar, Briefcase, Sparkles } from "lucide-react"; +import { motion } from "framer-motion"; +import { useNavigate } from "react-router-dom"; + +// Firework component +const Firework = ({ delay = 0, top, left, colors }: { delay?: number; top: string; left: string; colors: string[] }) => { + return ( + + + {/* Firework burst rays */} + {Array.from({ length: 24 }).map((_, i) => { + const angle = (i * 360) / 24; + const colorIndex = i % colors.length; + return ( + + ); + })} + {/* Center burst */} + + + + ); +}; + +// Sparkle Star component +const SparkleStar = ({ delay = 0, top, left, size = 16 }: { delay?: number; top: string; left: string; size?: number }) => { + return ( + + + + ); +}; + +// Marigold Flower component +const MarigoldFlower = ({ size = "md", delay = 0 }: { size?: "sm" | "md" | "lg"; delay?: number }) => { + const sizes = { + sm: 16, + md: 20, + lg: 24, + }; + + const flowerSize = sizes[size]; + + return ( + + {/* Flower petals */} + + {/* Outer petals */} + {Array.from({ length: 16 }).map((_, i) => { + const angle = (i * 360) / 16; + return ( + + ); + })} + + {/* Inner petals */} + {Array.from({ length: 12 }).map((_, i) => { + const angle = (i * 360) / 12; + return ( + + ); + })} + + {/* Center */} + + + + {/* Gradient definitions */} + + + + + + + + + + + + + + + + + {/* Glow effect */} +
+ + ); +}; + +// Flower Garland (Toran) component +const FlowerGarland = ({ left, flowerCount = 8, delay = 0 }: { left: string; flowerCount?: number; delay?: number }) => { + return ( + + {/* String/thread */} +
+ + {/* Flowers on string */} +
+ {Array.from({ length: flowerCount }).map((_, i) => ( + + + + ))} +
+ + ); +}; + +// Decorative Hanging Lantern component +const DecorativeLantern = () => { + return ( + + + + {/* Hanging String */} + + + {/* Top Cap - Cyan/Blue */} + + + + {/* Top decoration line - Purple accent */} + + + {/* Main Lantern Body - Golden Orange with curves */} + + + {/* Inner decorative pattern - curved diamond */} + + + + {/* Vertical center line */} + + + {/* Highlight shine */} + + + {/* Bottom Cap - Cyan/Blue */} + + + + + {/* Hanging Tassels - Cyan strands */} + {Array.from({ length: 7 }).map((_, i) => { + const x = 45 + i * 5; + return ( + + + + ); + })} + + {/* Gradient Definitions */} + + + + + + + + + + + {/* Glow effect */} +
+ + + ); +}; + +export function DiwaliHeroSection() { + const navigate = useNavigate(); + return ( +
+ {/* Dark Background with subtle glow */} +
+ + {/* Decorative Hanging Lantern - Center Top */} + + + {/* Marigold Flower Garlands (Torans) - Minimal placement */} + + + + + + {/* Animated Fireworks */} + + + + + + + + {/* Floating Sparkles */} + {[...Array(25)].map((_, i) => ( + + ))} + + {/* Small floating particles */} + {[...Array(40)].map((_, i) => ( + + ))} + + {/* Main Content */} +
+
+ {/* Top Badge */} + + + 🪔 + + + WDI + Wishes you + + + 🪔 + + + + {/* Main Heading */} + + + Happy Diwali + + + + {/* Subtitle */} + + Wishing you a Diwali filled with{" "} + light,{" "} + success, and{" "} + lightning-fast launches. + + + {/* CTA Buttons */} + + + + + + + {/* Bottom decorative text */} + + + May this festival bring prosperity to your business + + 🌟 + + + +
+
+ + {/* Bottom scroll indicator */} + + + + + + + +
+ ); +} diff --git a/components/PackagesSection.tsx b/components/PackagesSection.tsx new file mode 100644 index 0000000..16c4f67 --- /dev/null +++ b/components/PackagesSection.tsx @@ -0,0 +1,116 @@ +import { motion } from "framer-motion"; +import { Tablet, Rocket, Crown, Check } from "lucide-react"; +import { GridPattern } from "./GridPattern"; + +interface Package { + icon: React.ReactNode; + title: string; + timeline: string; + priceRange: string; + features: string[]; +} + +const packages: Package[] = [ + { + icon: , + title: "The Blueprint", + timeline: "Product Definition in 1 Week", + priceRange: "$1,500 - $2,500", + features: [ + "Strategy & roadmap", + "User flows & wireframes", + "Technical architecture" + ] + }, + { + icon: , + title: "The Prototype", + timeline: "Working Demo in 2 Weeks", + priceRange: "$6,000 - $8,000", + features: [ + "Functional web or mobile prototype", + "Core features implemented", + "User testing ready" + ] + }, + { + icon: , + title: "The Launchpad", + timeline: "Market-Ready MVP in 6 Weeks", + priceRange: "$20,000 - $30,000", + features: [ + "Full website or app", + "SEO-optimized & scalable", + "Ready for launch" + ] + } +]; + +export const PackagesSection = () => { + return ( +
+ + +
+ +

+ Choose Your Speed. We'll Deliver Your Launch. +

+ + +
+ {packages.map((pkg, index) => ( + + {/* Icon */} +
+ {pkg.icon} +
+ + {/* Title */} +

+ {pkg.title} +

+ + {/* Timeline */} +

+ {pkg.timeline} +

+ + {/* Price Range */} +
+ {pkg.priceRange} +
+ + {/* Features List */} +
    + {pkg.features.map((feature, idx) => ( +
  • +
    + +
    + + {feature} + +
    • + ))} +
+ + ))} +
+
+
+ ); +}; diff --git a/components/VibeProgrammingPackages.tsx b/components/VibeProgrammingPackages.tsx new file mode 100644 index 0000000..6ec6b72 --- /dev/null +++ b/components/VibeProgrammingPackages.tsx @@ -0,0 +1,155 @@ +import { motion } from "framer-motion"; +import { FileText, Rocket, Crown, Check, ArrowRight, Zap } from "lucide-react"; +import { Button } from "./ui/button"; +import { GridPattern } from "./GridPattern"; + +interface Package { + icon: React.ReactNode; + title: string; + description: string; + timeline: string; + timelineValue: string; + outcome: string; + outcomeValue: string; + priceRange: string; + isPopular?: boolean; +} + +const packages: Package[] = [ + { + icon: , + title: "The Blueprint", + description: "Your idea, structured. We shape product vision for your website, app, or solution—prioritize features, and map technical architecture into a tangible plan.", + timeline: "Timeline:", + timelineValue: "1 Week", + outcome: "Outcome:", + outcomeValue: "Clarity, without ambiguity.", + priceRange: "$1,500 – $2,500+", + isPopular: false + }, + { + icon: , + title: "The Prototype", + description: "Your product, visualized. High-fidelity designs, user flows, and a clickable web or mobile prototype that communicates your vision to stakeholders and investors.", + timeline: "Timeline:", + timelineValue: "2 Weeks or Less", + outcome: "Outcome:", + outcomeValue: "A working model to validate and showcase.", + priceRange: "$6,000 – $8,000+", + isPopular: true + }, + { + icon: , + title: "The Launchpad (MVP)", + description: "Your product, live. A fully functional, market-ready website or mobile app MVP delivered with speed, precision, SEO optimization, and scalability.", + timeline: "Timeline:", + timelineValue: "Under 6 Weeks", + outcome: "Outcome:", + outcomeValue: "A product in users' hands.", + priceRange: "$20,000 – $30,000+", + isPopular: false + } +]; + +export const VibeProgrammingPackages = () => { + return ( +
+ + +
+ {/* Header */} + +
+ +

+ Vibe Programming Packages +

+
+

+ Where your vision takes form. From clarity to click-through to launch. +

+ + + {/* Package Cards */} +
+ {packages.map((pkg, index) => ( + + {/* Most Popular Badge */} + {pkg.isPopular && ( +
+ + Most Popular + +
+ )} + + {/* Icon */} +
+ {pkg.icon} +
+ + {/* Title */} +

+ {pkg.title} +

+ + {/* Description */} +

+ {pkg.description} +

+ + {/* Timeline */} +
+
+ {pkg.timeline} + {pkg.timelineValue} +
+
+ + {/* Outcome */} +
+
+ {pkg.outcome} + {pkg.outcomeValue} +
+
+ + {/* Price Range */} +
+ {pkg.priceRange} +
+ + {/* Get Started Button */} + + + ))} +
+
+
+ ); +}; diff --git a/components/portfolio/PortfolioChallengeSolution.tsx b/components/portfolio/PortfolioChallengeSolution.tsx new file mode 100644 index 0000000..d31d63a --- /dev/null +++ b/components/portfolio/PortfolioChallengeSolution.tsx @@ -0,0 +1,127 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { CheckCircle } from "lucide-react"; + +interface Challenge { + icon: React.ReactNode; + title: string; + description: string; +} + +interface Technology { + icon: React.ReactNode; + label: string; +} + +interface Highlight { + text: string; +} + +interface PortfolioChallengeSolutionProps { + challengesTitle?: string; + challenges: Challenge[]; + solutionTitle?: string; + technologyStack: Technology[]; + highlights: Highlight[]; +} + +const PortfolioChallengeSolution: React.FC = ({ + challengesTitle = "Challenges & Constraints", + challenges, + solutionTitle = "Solution Architecture", + technologyStack, + highlights, +}) => { + return ( +
+
+
+
+ {/* Challenges */} + +

+ {challengesTitle} +

+
+ {challenges.map((challenge, index) => ( + +
+
{challenge.icon}
+
+

+ {challenge.title} +

+

+ {challenge.description} +

+
+
+ + ))} +
+ + + {/* Solution Architecture */} + +

+ {solutionTitle} +

+
+
+
+

+ Technology Stack +

+
+ {technologyStack.map((tech, idx) => ( +
+ {tech.icon} + {tech.label} +
+ ))} +
+
+ +
+

+ Key Highlights +

+
+ {highlights.map((item, idx) => ( +
+ + + {item.text} + +
+ ))} +
+
+
+
+ +
+
+
+
+ ); +}; + +export default PortfolioChallengeSolution; diff --git a/components/portfolio/PortfolioCoreFeatures.tsx b/components/portfolio/PortfolioCoreFeatures.tsx new file mode 100644 index 0000000..ac6fdd3 --- /dev/null +++ b/components/portfolio/PortfolioCoreFeatures.tsx @@ -0,0 +1,73 @@ +// components/PortfolioCoreFeatures.tsx +import { motion } from "framer-motion"; +import { ReactNode } from "react"; +import { Card, CardContent } from "@/components/ui/card"; // adjust path as per your project + +interface Feature { + icon: ReactNode; + title: string; + description: string; +} + +interface PortfolioCoreFeaturesProps { + title: string; + subtitle: string; + features: Feature[]; +} + +export function PortfolioCoreFeatures({ + title, + subtitle, + features, +}: PortfolioCoreFeaturesProps) { + return ( +
+
+ + {/* Section Heading */} +
+

+ {title} +

+

+ {subtitle} +

+
+ + {/* Features Grid */} +
+ {features.map((feature, index) => ( + + + +
+ {feature.icon} +
+

+ {feature.title} +

+

+ {feature.description} +

+ + + + ))} +
+ +
+
+ ); +} diff --git a/components/portfolio/PortfolioDevelopmentProcess.tsx b/components/portfolio/PortfolioDevelopmentProcess.tsx new file mode 100644 index 0000000..74ff2eb --- /dev/null +++ b/components/portfolio/PortfolioDevelopmentProcess.tsx @@ -0,0 +1,78 @@ +// components/PortfolioDevelopmentProcess.tsx +import { motion } from "framer-motion"; +import { ReactNode } from "react"; + +interface Phase { + icon: ReactNode; + phase: string; + duration: string; + description: string; +} + +interface PortfolioDevelopmentProcessProps { + title: string; + subtitle: string; + phases: Phase[]; +} + +export function PortfolioDevelopmentProcess({ + title, + subtitle, + phases, +}: PortfolioDevelopmentProcessProps) { + return ( +
+
+ + {/* Section Heading */} +
+

+ {title} +

+

+ {subtitle} +

+
+ + {/* Phases Grid */} +
+ {phases.map((phase, index) => ( + +
+
{phase.icon}
+

+ {phase.phase} +

+
+ {phase.duration} +
+

+ {phase.description} +

+
+ + {/* Connector Line */} + {index < phases.length - 1 && ( +
+ )} + + ))} +
+ +
+
+ ); +} diff --git a/components/portfolio/PortfolioExecutiveSummary.tsx b/components/portfolio/PortfolioExecutiveSummary.tsx new file mode 100644 index 0000000..004559c --- /dev/null +++ b/components/portfolio/PortfolioExecutiveSummary.tsx @@ -0,0 +1,35 @@ +// components/portfolio/PortfolioExecutiveSummary.tsx +import { motion } from "framer-motion"; + +interface PortfolioExecutiveSummaryProps { + title?: string; + content: string; + backgroundColor?: string; +} + +export const PortfolioExecutiveSummary = ({ + title = "Executive Summary", + content, + backgroundColor = "bg-card/30" +}: PortfolioExecutiveSummaryProps) => { + return ( +
+
+ +

+ {title} +

+

+ {content} +

+ +
+
+ ); +}; \ No newline at end of file diff --git a/components/portfolio/PortfolioHero.tsx b/components/portfolio/PortfolioHero.tsx new file mode 100644 index 0000000..0c73377 --- /dev/null +++ b/components/portfolio/PortfolioHero.tsx @@ -0,0 +1,96 @@ +// components/portfolio/PortfolioHero.tsx +import { motion } from "framer-motion"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { ArrowLeft } from "lucide-react"; +import { GridPattern } from "../GridPattern"; +import { ImageWithFallback } from "../figma/ImageWithFallback"; +import { useNavigate } from "react-router-dom"; + +interface PortfolioHeroProps { + badgeText?: string; + title: string; + subtitle: string; + subtitleTwo?: string; + imageUrl: string; + imageAlt: string; +} + +export const PortfolioHero = ({ + badgeText = "Portfolio", + title, + subtitle, + subtitleTwo, + imageUrl, + imageAlt, +}: PortfolioHeroProps) => { + const navigate = useNavigate(); + + return ( +
+ + +
+ {/* Back Button */} + + + + +
+ {/* Content - Left Aligned */} + +
+ + {badgeText} + +
+ +

+ {title} +

+ +

+ {subtitle} +

+

+ {subtitleTwo} +

+ + + {/* Project Image */} + +
+ +
+ +
+
+
+ ); +}; \ No newline at end of file diff --git a/components/portfolio/PortfolioLessonsSection.tsx b/components/portfolio/PortfolioLessonsSection.tsx new file mode 100644 index 0000000..abf73e8 --- /dev/null +++ b/components/portfolio/PortfolioLessonsSection.tsx @@ -0,0 +1,119 @@ +import React from "react"; +import { motion } from "framer-motion"; + +interface LessonSectionProps { + title: string; + description: string; + workedTitle: string; + workedIcon: React.ReactNode; + workedColor: string; + workedLessons: string[]; + improveTitle: string; + improveIcon: React.ReactNode; + improveColor: string; + improveLessons: string[]; +} + +const PortfolioLessonsSection: React.FC = ({ + title, + description, + workedTitle, + workedIcon, + workedColor, + workedLessons, + improveTitle, + improveIcon, + improveColor, + improveLessons, +}) => { + return ( +
+
+
+ {/* Section Header */} + +

+ {title} +

+

+ {description} +

+ + + {/* Lessons Grid */} +
+ {/* Worked Well */} + +

+ + {workedIcon} + + {workedTitle} +

+
+ {workedLessons.map((lesson, index) => ( +
+
+ {lesson} +
+ ))} +
+ + + {/* Areas for Improvement */} + +

+ + {improveIcon} + + {improveTitle} +

+
+ {improveLessons.map((lesson, index) => ( +
+
+ {lesson} +
+ ))} +
+ +
+
+
+
+ ); +}; + +export default PortfolioLessonsSection; diff --git a/components/portfolio/PortfolioProjectDetails.tsx b/components/portfolio/PortfolioProjectDetails.tsx new file mode 100644 index 0000000..e64e8f0 --- /dev/null +++ b/components/portfolio/PortfolioProjectDetails.tsx @@ -0,0 +1,233 @@ +// components/portfolio/PortfolioProjectDetails.tsx +import { motion } from "framer-motion"; +import { Badge } from "@/components/ui/badge"; +import { + Code, + ShoppingCart, + Calendar, + Users, + Smartphone +} from "lucide-react"; + +interface Technology { + name: string; + icon: React.ReactNode; +} + +interface ProjectDetails { + technologies: Technology[]; + industries: string[]; + duration: string; + teamSize: string; + platforms: string[]; +} + +interface PortfolioProjectDetailsProps { + title?: string; + description?: string; + details: ProjectDetails; + achievements?: Array<{ + label: string; + value: string; + description: string; + }>; +} + +export const PortfolioProjectDetails = ({ + title = "Project Details", + description = "Detailed overview of the project including technologies, timeline, and team composition.", + details, + achievements = [] +}: PortfolioProjectDetailsProps) => { + return ( +
+ {/* Background Elements */} +
+
+
+ +
+
+ {/* Section Header */} + +

+ {title} +

+

+ {description} +

+ + + {/* Project Meta Information Grid */} + + {/* Technologies & Industries Card */} +
+
+ {/* Technologies */} +
+
+
+ +
+

Technologies

+
+
+ {details.technologies.map((tech) => ( + + {tech.icon} + {tech.name} + + ))} +
+
+ + {/* Industries */} +
+
+
+ +
+

Industries

+
+
+ {details.industries.map((industry) => ( + + {industry} + + ))} +
+
+
+
+ + {/* Timeline & Team Card */} +
+
+ {/* Duration */} +
+
+
+ +
+

Project Timeline

+
+

{details.duration}

+
+ + {/* Team */} +
+
+
+ +
+

Team Composition

+
+

{details.teamSize}

+
+ + {/* Platforms */} +
+
+
+ +
+

Target Platforms

+
+
+ {details.platforms.map((platform) => ( + + {platform} + + ))} +
+
+
+
+ + + {/* Key Achievements Section */} + {achievements.length > 0 && ( + +
+

+ Key Impact & Results +

+

+ Measurable outcomes that demonstrate the project's success +

+
+ +
+ {achievements.map((achievement, index) => ( + + {/* Card Background Gradient */} +
+ + {/* Content */} +
+ {/* Value */} +
+ {achievement.value} +
+ + {/* Label */} +
+ {achievement.label} +
+ + {/* Description */} +
+ {achievement.description} +
+
+ + {/* Hover Effect Line */} +
+ + ))} +
+ + )} +
+
+
+ ); +}; \ No newline at end of file diff --git a/components/portfolio/PortfolioProjectOverview.tsx b/components/portfolio/PortfolioProjectOverview.tsx new file mode 100644 index 0000000..464b7e3 --- /dev/null +++ b/components/portfolio/PortfolioProjectOverview.tsx @@ -0,0 +1,75 @@ +// components/PortfolioProjectOverview.tsx +import { motion } from "framer-motion"; +import { ReactNode } from "react"; + +interface PortfolioProjectOverviewProps { + icon: ReactNode; + title: string; + description?: string; + points?: string[]; + borderColor?: string; + hoverColor?: string; +} + +export function PortfolioProjectOverview({ + icon, + title, + description, + points, + borderColor = "border-accent/20", + hoverColor = "accent", +}: PortfolioProjectOverviewProps) { + return ( + + {/* Icon */} + +
+ {icon} +
+ + + {/* Title */} +

{title}

+ + {/* Content */} + {description && ( +

{description}

+ )} + {points && ( +
+ {points.map((point, i) => ( +
+ ✔ + {point} +
+ ))} +
+ )} + + ); +} diff --git a/components/portfolio/PortfolioResultsImpact.tsx b/components/portfolio/PortfolioResultsImpact.tsx new file mode 100644 index 0000000..f3d0b6b --- /dev/null +++ b/components/portfolio/PortfolioResultsImpact.tsx @@ -0,0 +1,92 @@ +// components/PortfolioResultsImpact.tsx +import { motion } from "framer-motion"; +import { CheckCircle } from "lucide-react"; + +interface Metric { + value: string; + label: string; + description: string; +} + +interface PortfolioResultsImpactProps { + title: string; + subtitle: string; + metrics: Metric[]; + achievements: string[]; +} + +export function PortfolioResultsImpact({ + title, + subtitle, + metrics, + achievements, +}: PortfolioResultsImpactProps) { + return ( +
+
+ + {/* Heading */} +
+

+ {title} +

+

+ {subtitle} +

+
+ + {/* Metrics */} +
+ {metrics.map((metric, index) => ( + +
+ {metric.value} +
+
+ {metric.label} +
+
+ {metric.description} +
+ + ))} +
+ + {/* Achievements */} + +

+ Technical Achievements +

+
+ {achievements.map((achievement, index) => ( +
+ + {achievement} +
+ ))} +
+ + +
+
+ ); +} diff --git a/components/portfolio/PortfolioRoadmapSection.tsx b/components/portfolio/PortfolioRoadmapSection.tsx new file mode 100644 index 0000000..adb896d --- /dev/null +++ b/components/portfolio/PortfolioRoadmapSection.tsx @@ -0,0 +1,75 @@ +import React from "react"; +import { motion } from "framer-motion"; + +interface RoadmapItem { + phase: string; + features: string[]; +} + +interface PortfolioRoadmapSectionProps { + title: string; + description: string; + roadmapItems: RoadmapItem[]; + icon?: React.ReactNode; // optional (default ArrowRight) +} + +const PortfolioRoadmapSection: React.FC = ({ + title, + description, + roadmapItems, + icon, +}) => { + return ( +
+
+ + {/* Header */} +
+

+ {title} +

+

+ {description} +

+
+ + {/* Roadmap Grid */} +
+ {roadmapItems.map((roadmap, index) => ( + +

+ {roadmap.phase} +

+
+ {roadmap.features.map((feature, featureIndex) => ( +
+ + {icon} + + {feature} +
+ ))} +
+ + ))} +
+ +
+
+ ); +}; + +export default PortfolioRoadmapSection; diff --git a/components/portfolio/PortfolioTestimonial.tsx b/components/portfolio/PortfolioTestimonial.tsx new file mode 100644 index 0000000..e9beb3d --- /dev/null +++ b/components/portfolio/PortfolioTestimonial.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import { motion } from "framer-motion"; +import { Star } from "lucide-react"; + +interface PortfolioTestimonialProps { + logo: string | React.ReactNode; // can be an image URL or React component + alt?: string; + rating?: number; // default 5 + testimonial: string; + clientName: string; + clientRole: string; + maxWidth?: string; // optional, e.g., "max-w-4xl" +} + +const PortfolioTestimonial: React.FC = ({ + logo, + alt = "Client Logo", + rating = 5, + testimonial, + clientName, + clientRole, + maxWidth = "max-w-4xl", +}) => { + return ( +
+
+ +
+ {/* Logo */} + {typeof logo === "string" ? ( +
+ {alt} +
+ ) : ( +
{logo}
+ )} + + {/* Rating */} +
+
+ {[...Array(rating)].map((_, i) => ( + + ))} +
+
+ + {/* Testimonial */} +
+ {testimonial} +
+ + {/* Client Info */} +
+
{clientName}
+
{clientRole}
+
+
+ +
+
+ ); +}; + +export default PortfolioTestimonial; diff --git a/pages/CustomWebAppDevelopment.tsx b/pages/CustomWebAppDevelopment.tsx index 2ceb2b2..c56750b 100644 --- a/pages/CustomWebAppDevelopment.tsx +++ b/pages/CustomWebAppDevelopment.tsx @@ -123,7 +123,7 @@ const CustomWebAppHeroWithCTA = () => { {/* Main Heading */}

- Custom Web Application Development + Build What Your Business Needs — Fast

diff --git a/pages/GoodTimesProject.tsx b/pages/GoodTimesProject.tsx index 3daab13..3cbffae 100644 --- a/pages/GoodTimesProject.tsx +++ b/pages/GoodTimesProject.tsx @@ -1,1041 +1,361 @@ +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 { ArrowLeft, ExternalLink, Calendar, Users, TrendingUp, BarChart3, Smartphone, Target, CheckCircle, ArrowRight, Zap, Shield, Database, Code, RefreshCw, Activity, Award, Star, Clock, Building2, Brain, Globe, Layers, Server, Cloud, Monitor, Cpu, Palette, Wrench, Heart, Share2, MapPin, Filter, Bell, Gift, CreditCard } from "lucide-react"; -import { Navigation } from "../components/Navigation"; -import { Footer } from "../components/Footer"; -import { Button } from "../components/ui/button"; -import { GridPattern } from "../components/GridPattern"; -import { ImageWithFallback } from "../components/figma/ImageWithFallback"; -import { Badge } from "@/components/ui/badge"; -import { Card, CardContent } from "@/components/ui/card"; -import goodTimesLogo from "../src/images/good-times-logo.webp"; +import { + AlertTriangle, + ArrowRight, + Bell, + Brain, + Calendar, + CheckCircle, + Cloud, + Code, + Database, + ExternalLink, + Globe, + Gift, + QrCode, + MessageCircle, + Palette, + RefreshCcw, + Scan, + Server, + Share2, + Smartphone, + Star, + Target, + Users, + Zap, + Wallet, + TrendingUp, + Shield, + Clock, + BarChart3 +} from "lucide-react"; import { useNavigate } from "react-router-dom"; +import { Button } from "../components/ui/button"; +import goodTimesLogo from "../src/images/good-times-logo.webp"; -// Technology to icon mapping -const getTechIcon = (tech: string) => { - const techIconMap: { [key: string]: React.ReactNode } = { - "Flutter": , - "Laravel": , - "MySQL": , - "Firebase": , - "WebView": , - "React Native": , - "React": , - "Node.js": , - "MongoDB": , - "WebSocket": , - "Redux": , - "TypeScript": , - "JavaScript": , - "AWS": , - "Google Cloud": , - "Azure": , - "PostgreSQL": , - "Python": , - "Java": , - "Swift": , - "Kotlin": , - "Docker": , - "Kubernetes": , - "GraphQL": , - "REST API": , - "Express": , - "Vue.js": , - "Angular": - }; - - return techIconMap[tech] || ; -}; - -const projectDetails = { - title: "GoodTimes: Social Event Discovery & Referral Platform", - subtitle: "A feature-rich mobile application for discovering social events, managing event participation, and earning through referrals—developed to scale user engagement and streamline event organizer workflows.", - technologies: ["Flutter", "Laravel", "MySQL", "Firebase", "WebView"], - industries: ["Social Media", "Event Management", "Entertainment"], - duration: "Ongoing (initial build completed in 4 months, enhancement phase under progress)", - teamSize: "5 Developers, 2 Designers, 1 PM, 1 QA, 1 Business Analyst", - platforms: ["iOS", "Android", "Web Admin Panel"] -}; - -const keyAchievements = [ - { label: "Early Access Users", value: "15K+", description: "Successfully onboarded" }, - { label: "RSVP Engagement", value: "70%", description: "Toggle interaction rate" }, - { label: "User Retention", value: "78%", description: "30-day retention rate" } -]; - -const businessObjectives = [ - "Enable users to discover and RSVP to events with ease", - "Reward users for referrals and active engagement", - "Provide planners with tools to list events and track attendance", - "Integrate a scalable wallet and payment structure", - "Launch in the UK market, scale across Europe" -]; - -const coreFeatures = [ - { - title: "Multi-role App Access", - description: "Distinct experiences for Customers and Event Planners with tailored interfaces", - icon: +// GoodTimes Project Data +const goodTimesData = { + hero: { + title: "GoodTimes: Social Event Discovery & Referral Platform", + subtitle: "An innovative mobile platform designed to help users discover social events, manage attendance seamlessly, and earn rewards through referrals, built to drive user engagement and simplify event organizer operations.", + imageUrl: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=600&fit=crop&crop=center", + imageAlt: "GoodTimes social event discovery app showcasing event listings and social features" }, - { - title: "Referral + Wallet Engine", - description: "Share QR/referral codes and track earnings with integrated wallet system", - icon: + details: { + technologies: [ + { name: "Flutter", icon: }, + { name: "Laravel", icon: }, + { name: "MySQL", icon: }, + { name: "OneSignal", icon: } + ], + industries: ["Social Media", "Event Management", "Entertainment"], + duration: "Ongoing (initial build completed in 4 months)", + teamSize: "5 Developers, 2 Designers, 1 PM, 1 QA, 1 Business Analyst", + platforms: ["iOS", "Android", "Web Admin Panel"] }, - { - title: "Event Calendar Engine", - description: "Advanced filtering by genre, location, date, and interest with visual calendar", - icon: - }, - { - title: "RSVP & Reminder System", - description: "In-app toggle, calendar sync, fire/exclusive event labels with smart notifications", - icon: - }, - { - title: "Content Management", - description: "Comprehensive blogs, FAQs, About, and Contact modules with CMS integration", - icon: - }, - { - title: "Rating & Review Engine", - description: "Post-event feedback system visible to all users for community trust", - icon: - } -]; - -const technicalChallenges = [ - { - title: "Dynamic Referral Logic", - description: "Complex subscription rules with lockouts and wallet freeze mechanisms", - icon: - }, - { - title: "Multi-role Architecture", - description: "Individual logic layers for customers, planners, and admin with secure access", - icon: - }, - { - title: "Calendar Performance", - description: "Optimizing calendar-level performance for large event datasets", - icon: - }, - { - title: "Wallet System Security", - description: "Flexible yet secure wallet system with payment thresholds and fraud prevention", - icon: - } -]; - -const developmentPhases = [ - { - phase: "Discovery & Planning", - duration: "2 weeks", - description: "User journeys, event lifecycle modeling, tech recommendations", - icon: - }, - { - phase: "UI/UX Design", - duration: "3 weeks", - description: "Wireframing, onboarding flow mockups, calendar UX design", - icon: - }, - { - phase: "Core Development", - duration: "8 weeks", - description: "Flutter builds, backend API, wallet logic, event management system", - icon: - }, - { - phase: "Testing & QA", - duration: "3 weeks", - description: "Multi-role testing, referral validation, UI regression testing", - icon: - }, - { - phase: "Deployment & Support", - duration: "1 week", - description: "App Store/Play Store submission, admin access handover, monitoring setup", - icon: - } -]; - -const resultsMetrics = [ - { label: "Google Play Rating", value: "4.7★", description: "User satisfaction score" }, - { label: "API Response Time", value: "120ms", description: "Average response time" }, - { label: "Monthly Growth", value: "+22%", description: "User growth rate" }, - { label: "Referral Contribution", value: "35%", description: "New user acquisition" }, - { label: "Session Time Increase", value: "+28%", description: "Due to social features" }, - { label: "Event Attendance", value: "2x", description: "Planner reported increase" } -]; - -const technicalAchievements = [ - "Subscription logic with freeze/forfeit tracking system", - "Referral engine with QR + WhatsApp API integration", - "Optimized Flutter app: <10MB APK with lightning UI transitions", - "Admin dashboard enabling full control over users and events", - "Gamified event discovery with engagement-driven tags", - "Smart calendar sync with one-tap RSVP functionality" -]; - -const lessonsLearned = { - worked: [ - "Clear onboarding UX improved signup conversion by 37%", - "Agile iteration helped manage enhancement requests efficiently", - "In-app referral education improved share rates significantly" + achievements: [ + { label: "Early Access Users", value: "15K+", description: "Successfully onboarded" }, + { label: "RSVP Engagement", value: "70%", description: "Toggle interaction rate" }, + { label: "User Retention", value: "78%", description: "30-day retention rate" } ], - improve: [ - "Subscription billing and wallet freeze logic were complex to align", - "WhatsApp sharing setup needed special attention for API approvals", - "Multi-role testing required more comprehensive initial planning" - ] -}; - -const futureRoadmap = [ - { - phase: "Next 6 Months", - features: ["Event media gallery integration", "AI-powered event recommendations", "Push analytics for social feature usage", "Performance dashboards for event organizers"] + executiveSummary: { + content: "GoodTimes is a dynamic social event discovery platform designed to connect event-goers with organizers through innovative referral programs, gamified user engagement, and streamlined event management. Engineered for scalability and optimized user experience, GoodTimes revolutionizes how people find, participate in, and host social events, while fostering sustainable revenue through viral referral mechanics." }, - { - phase: "12 Months Vision", - features: ["Marketplace for ticket sales", "User-level badges and community forums", "Event sponsor promotions", "Multi-language support for EU expansion"] - } -]; + businessObjectives: [ + "Enable users to discover and RSVP to events with ease", + "Reward users for referrals and active engagement", + "Provide planners with tools to list events and track attendance", + "Integrate a scalable wallet and payment structure", + "Launch in the UK market, scale across Europe" + ], + coreFeatures: [ + { + title: "Multi-role App Access", + description: "Distinct experiences for Customers and Event Planners with tailored interfaces", + icon: + }, + { + title: "Referral + Wallet Engine", + description: "Share QR/referral codes and track earnings with integrated wallet system", + icon: + }, + { + title: "Event Calendar Engine", + description: "Advanced filtering by genre, location, date, and interest with visual calendar", + icon: + }, + { + title: "RSVP & Reminder System", + description: "In-app toggle, calendar sync, fire/exclusive event labels with smart notifications", + icon: + }, + { + title: "Content Management", + description: "Comprehensive blogs, FAQs, About, and Contact modules with CMS integration", + icon: + }, + { + title: "Rating & Review Engine", + description: "Post-event feedback system visible to all users for community trust", + icon: + } + ], + developmentPhases: [ + { + phase: "Discovery & Planning", + duration: "2 weeks", + description: "User journeys, event lifecycle modeling, tech recommendations", + icon: + }, + { + phase: "UI/UX Design", + duration: "3 weeks", + description: "Wireframing, onboarding flow mockups, calendar UX", + icon: + }, + { + phase: "Core Development", + duration: "8 weeks", + description: "Flutter builds, backend API, wallet logic, event logic", + icon: + }, + { + phase: "Testing & QA", + duration: "3 weeks", + description: "Multi-role testing, referral validation, UI regression", + icon: + }, + { + phase: "Deployment & Support", + duration: "1 week", + description: "App Store/Play Store submission, admin access handover", + icon: + }, + { + phase: "Enhancements Phase II", + duration: "Ongoing", + description: "Blogs, contact features, event grouping, exclusive badges", + icon: + } + ], + resultsMetrics: [ + { label: "Google Play Rating", value: "4.7★", description: "User satisfaction score" }, + { label: "API Response Time", value: "120ms", description: "Average response time" }, + { label: "Monthly Growth", value: "+22%", description: "User growth rate" }, + { label: "Referral Contribution", value: "35%", description: "New user acquisition" }, + { label: "Session Time Increase", value: "+28%", description: "Due to social features" }, + { label: "Event Attendance", value: "2x", description: "Planner reported increase" } + ], + technicalAchievements: [ + "Subscription logic with freeze/forfeit tracking system", + "Referral engine with QR + WhatsApp API integration", + "Optimized Flutter app: <10MB APK with lightning UI transitions", + "Admin dashboard enabling full control over users and events", + "Gamified event discovery with engagement-driven tags", + "Smart calendar sync with one-tap RSVP functionality" + ], + futureRoadmap: [ + { + phase: "Next 6 Months", + features: [ + "Event media gallery integration", + "AI-powered event recommendations", + "Push analytics for social feature usage", + "Performance dashboards for event organizers" + ] + }, + { + phase: "12 Months", + features: [ + "Marketplace for ticket sales", + "User-level badges and community forums", + "Event sponsor promotions", + "Multi-language support for EU expansion" + ] + } + ], +}; export const GoodTimesProject = () => { const navigate = useNavigate(); + return (

- {/* */} - + {/* Section 1: Hero with Heading, Subheading, and Image */} -
- - -
- {/* Back Button */} - - - - -
- {/* Content - Left Aligned */} - -
- - Case Study - -
- -

- {projectDetails.title} -

- -

- {projectDetails.subtitle} -

- - - {/* Project Image */} - -
- -
- -
-
-
+ {/* Section 2: Project Details */} -
- {/* Background Elements */} -
-
-
- -
-
- - {/* Section Header */} - -

- Project Details -

-

- Comprehensive overview of technologies, timeline, and key achievements that drove this social platform's success -

- - - {/* Project Meta Information Grid */} - - {/* Technologies & Industries Card */} -
-
- {/* Technologies */} -
-
-
- -
-

Technologies

-
-
- {projectDetails.technologies.map((tech) => ( - - {getTechIcon(tech)} - {tech} - - ))} -
-
- - {/* Industries */} -
-
-
- -
-

Industries

-
-
- {projectDetails.industries.map((industry) => ( - - {industry} - - ))} -
-
-
-
- - {/* Timeline & Team Card */} -
-
- {/* Duration */} -
-
-
- -
-

Project Timeline

-
-

{projectDetails.duration}

-
- - {/* Team */} -
-
-
- -
-

Team Composition

-
-

{projectDetails.teamSize}

-
- - {/* Platforms */} -
-
-
- -
-

Target Platforms

-
-
- {projectDetails.platforms.map((platform) => ( - - {platform} - - ))} -
-
-
-
- - - {/* Key Achievements Section */} - -
-

- Key Impact & Results -

-

- Measurable outcomes that demonstrate the platform's success in social event discovery and engagement -

-
- -
- {keyAchievements.map((achievement, index) => ( - - {/* Card Background Gradient */} -
- - {/* Content */} -
- {/* Value */} -
- {achievement.value} -
- - {/* Label */} -
- {achievement.label} -
- - {/* Description */} -
- {achievement.description} -
-
- - {/* Hover Effect Line */} -
- - ))} -
- -
-
-
+ {/* Executive Summary */} -
-
- -

- Executive Summary -

-

- GoodTimes is a comprehensive social event discovery platform that bridges the gap between event-seekers and organizers through innovative referral systems, gamified engagement, and seamless event management. Built with scalability and user experience at its core, the platform transforms how people discover, attend, and organize social events while creating sustainable revenue streams through viral referral mechanisms. -

- -
-
+ {/* Project Overview */}
-
- -

- Project Overview -

- - -
- {/* Background & Context */} - - {/* Glassmorphism Icon Container */} - -
- -
- -

Background & Context

-

- Social event discovery and networking apps have grown significantly, especially among Gen-Z and millennials. GoodTimes aims to tap into this momentum by adding gamification (referrals, ratings, exclusive tags) and simplifying how users discover and commit to social events. -

- +
+

+ Project Overview +

+
- {/* Target Audience */} - - {/* Glassmorphism Icon Container */} - -
- -
- -

Target Audience

-

- Socially active individuals aged 18–35 interested in networking, music, fitness, and local events. Event planners and venues are the second audience, seeking efficient tools to reach new audiences and manage registrations. -

- +
+ } + title="Background & Context" + description="Social event discovery and networking apps have grown significantly, especially among Gen-Z and millennials. GoodTimes aims to tap into this momentum by adding gamification (referrals, ratings, exclusive tags) and simplifying how users discover and commit to social events." + borderColor="border-accent/20" + hoverColor="accent" + /> - {/* Business Objectives */} - - {/* Glassmorphism Icon Container */} - -
- -
- -

Business Objectives

-
- {businessObjectives.map((objective, index) => ( -
- - {objective} -
- ))} -
- -
+ } + title="Target Audience" + description="Socially active individuals aged 18–35 interested in networking, music, fitness, and local events. Event planners and venues are the second audience, seeking efficient tools to reach new audiences and manage registrations." + borderColor="border-blue-400/20" + hoverColor="blue-400" + /> + + } + title="Business Objectives" + points={goodTimesData.businessObjectives} + borderColor="border-green-400/20" + hoverColor="green-400" + />
{/* Core Features */} -
-
- -
-

- Core Features & Functionality -

-

- A comprehensive suite of tools designed to revolutionize social event discovery with gamification and seamless organizer workflows. -

-
- -
- {coreFeatures.map((feature, index) => ( - - - -
- {feature.icon} -
-

- {feature.title} -

-

- {feature.description} -

- - - - ))} -
- -
-
+ {/* Challenges & Solution Architecture */} -
-
-
-
- {/* Challenges */} - -

- Challenges & Constraints -

-
- {technicalChallenges.map((challenge, index) => ( - -
-
- {challenge.icon} -
-
-

- {challenge.title} -

-

- {challenge.description} -

-
-
- - ))} -
- - - {/* Solution Architecture */} - -

- Solution Architecture -

-
-
-
-

Technology Stack

-
-
- - Frontend: Flutter (iOS/Android) -
-
- - Backend: Laravel (PHP) -
-
- - Database: MySQL -
-
- - Notifications: Firebase & Analytics -
-
- - Payment: WebView-based integration -
-
-
- -
-

Architecture Highlights

-
-
- - Modular architecture with independent APIs per role -
-
- - Event-based notification triggers -
-
- - Wallet referral logic separate from transaction layer -
-
- - Multi-tenancy admin view for role-based control -
-
-
-
-
- -
-
-
-
+ , + title: "Multi-role Architecture", + description: "Designing flexible user experiences for both Customers and Event Planners with tailored interfaces" + }, + { + icon: , + title: "Referral & Wallet Integration", + description: "Creating seamless integration between referral tracking, wallet management, and payment systems" + }, + { + icon: , + title: "Real-time Event Management", + description: "Synchronizing event calendars, RSVP systems, and notifications across multiple users" + }, + { + icon: , + title: "Social Integration", + description: "Implementing WhatsApp sharing and social features while maintaining platform performance" + } + ]} + technologyStack={[ + { icon: , label: "Frontend: Flutter" }, + { icon: , label: "Backend: Laravel" }, + { icon: , label: "Database: MySQL" }, + { icon: , label: "Notifications: OneSignal" }, + ]} + highlights={[ + { text: "Modular architecture with independent APIs per role" }, + { text: "Event-based notification triggers for real-time updates" }, + { text: "Wallet referral logic separate from transaction layer" }, + { text: "Multi-tenancy admin view for role-based control" }, + ]} + /> {/* Development Process */} -
-
- -
-

- Development Process & Methodology -

-

- Agile sprints (2-week cycles) with enhancement backlog tracking, ensuring quality delivery and continuous improvement. -

-
- -
- {developmentPhases.map((phase, index) => ( - -
-
- {phase.icon} -
-

- {phase.phase} -

-
- {phase.duration} -
-

- {phase.description} -

-
- - {/* Connector Line */} - {index < developmentPhases.length - 1 && ( -
- )} - - ))} -
- -
-
+ {/* Results & Impact */} -
-
- -
-

- Results & Impact -

-

- Comprehensive performance metrics demonstrating GoodTimes' success in social event discovery and community engagement. -

-
- -
- {resultsMetrics.map((metric, index) => ( - -
- {metric.value} -
-
- {metric.label} -
-
- {metric.description} -
- - ))} -
- - -

- Technical Achievements -

-
- {technicalAchievements.map((achievement, index) => ( -
- - {achievement} -
- ))} -
- - -
-
+ {/* Lessons Learned */} -
-
-
- -

- Lessons Learned -

-

- Key insights and learnings from the GoodTimes development journey that shaped our approach to social platform development. -

- - -
- {/* What Worked */} - -

- - What Worked Well -

-
- {lessonsLearned.worked.map((lesson, index) => ( -
-
- {lesson} -
- ))} -
- - - {/* What Could Improve */} - -

- - Areas for Improvement -

-
- {lessonsLearned.improve.map((lesson, index) => ( -
-
- {lesson} -
- ))} -
- -
-
-
-
+ } + workedColor="#22c55e" + workedLessons={[ + "Clear onboarding UX improved signup conversion by 37%", + "Agile iteration helped manage enhancement requests efficiently", + "In-app referral education improved share rates significantly" + ]} + improveTitle="Areas for Improvement" + improveIcon={} + improveColor="#eab308" + improveLessons={[ + "Subscription billing and wallet freeze logic were complex to align", + "WhatsApp sharing setup needed special attention for API approvals", + "Multi-role testing required more comprehensive initial planning" + ]} + /> {/* Future Roadmap */} -
-
- -
-

- Future Roadmap -

-

- Planned enhancements and features to build a vibrant event discovery ecosystem powered by AI, gamification, and community. -

-
- -
- {futureRoadmap.map((roadmap, index) => ( - -

- {roadmap.phase} -

-
- {roadmap.features.map((feature, featureIndex) => ( -
- - {feature} -
- ))} -
- - ))} -
- -
-
+ } + // vision="Build a vibrant event discovery and engagement ecosystem powered by gamification, community, and seamless planning tools." + /> {/* Client Testimonial */} -
-
- -
-
- -
- -
-
- {[...Array(5)].map((_, i) => ( - - ))} -
-
- -
- "GoodTimes wouldn't be what it is without WDI's intuitive tech and top-notch planning. Their dedication to building for scale while also supporting daily product improvements is unmatched." -
- -
-
- Matthew Weightman -
-
- Founder, GoodTimes -
-
-
- -
-
+ {/* CTA Section */}
@@ -1048,19 +368,19 @@ export const GoodTimesProject = () => { className="max-w-4xl mx-auto text-center" >

- Want to Build the Next Big Social Platform? + Ready to Launch Your Next Big Social Platform?

- Let WDI help you turn your vision into an app that people love to use, with gamification, community features, and scalable architecture. + Partner with WDI to bring your vision to life with engaging gamification, vibrant community features, and scalable architecture. Build an app users will love.

- +
@@ -1077,7 +397,6 @@ export const GoodTimesProject = () => {
- {/*
*/}
); }; \ No newline at end of file diff --git a/pages/Homepage.tsx b/pages/Homepage.tsx index 29ed095..3fcbfac 100644 --- a/pages/Homepage.tsx +++ b/pages/Homepage.tsx @@ -14,6 +14,9 @@ import { Navigation } from "@/components/Navigation"; import { HeroSection } from "@/components/HeroSection"; import { ClientLogos } from "@/components/ClientLogos"; import { useNavigate } from "react-router-dom"; +import { CaseStudySlider } from "@/components/CaseStudySlider"; +import { PackagesSection } from "@/components/PackagesSection"; +import { DiwaliHeroSection } from "@/components/DiwaliHeroSection"; const services = [ @@ -97,6 +100,7 @@ const services = [ } ]; + export const Homepage = () => { const navigate = useNavigate(); @@ -154,8 +158,11 @@ export const Homepage = () => { {/* Hero Section - Dark background */}
- +
+ {/*
+ +
*/} {/* Client Logos - Dark background */}
@@ -164,8 +171,8 @@ export const Homepage = () => { {/* Services Grid - Dark background */} {/*
- -
*/} + +
*/}
{ {/* Case Studies - Dark background */}
+ +
+ {/*
+
*/} + +
+
{/* Inline CTA - Dark background */} diff --git a/pages/MVPStartupLaunchPackages.tsx b/pages/MVPStartupLaunchPackages.tsx index 3954235..d172e33 100644 --- a/pages/MVPStartupLaunchPackages.tsx +++ b/pages/MVPStartupLaunchPackages.tsx @@ -39,6 +39,8 @@ import { Card, CardContent } from "../components/ui/card"; import { ShimmerButton } from "../components/ui/shimmer-button"; import { useNavigate } from "react-router-dom"; import { Helmet } from "react-helmet-async"; +import { VibeProgrammingPackages } from "@/components/VibeProgrammingPackages"; +import { DedicatedTeamPricing } from "@/components/DedicatedTeamPricing"; // MVP & Startup Launch Packages Hero Section const MVPStartupLaunchPackagesHero = () => { @@ -114,7 +116,7 @@ const MVPStartupLaunchPackagesHero = () => { {/* Main Heading */}

- MVP & Startup Launch Packages + Launch Faster.
Learn Sooner.
Scale Smarter.

@@ -948,14 +950,12 @@ const MVPStartupProcess = () => { whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 0.8, delay: index * 0.2 }} viewport={{ once: true }} - className={`flex items-center ${ - isEven ? "lg:flex-row" : "lg:flex-row-reverse" - } flex-col lg:gap-16 gap-8`} + className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse" + } flex-col lg:gap-16 gap-8`} >

@@ -1430,6 +1430,9 @@ export const MVPStartupLaunchPackages = () => {
+ {/* VibeProgrammingPackages */} + + {/* Challenge */}
@@ -1440,6 +1443,9 @@ export const MVPStartupLaunchPackages = () => {
+ {/* DedicatedTeamPricing */} + + {/* Benefits */}
diff --git a/pages/MobileAppDevelopment.tsx b/pages/MobileAppDevelopment.tsx index 35249e4..e7c2d07 100644 --- a/pages/MobileAppDevelopment.tsx +++ b/pages/MobileAppDevelopment.tsx @@ -116,9 +116,9 @@ const HeroWithCTA = () => { className="space-y-6" >

- Expert - Mobile App Development - Services + From concept to + App Store + in just 6 weeks.

diff --git a/pages/RanOutOfProject.tsx b/pages/RanOutOfProject.tsx index 7ca632f..e51152c 100644 --- a/pages/RanOutOfProject.tsx +++ b/pages/RanOutOfProject.tsx @@ -1,13 +1,20 @@ -import { Badge } from "@/components/ui/badge"; -import { Card, CardContent } from "@/components/ui/card"; +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 { - Activity, - ArrowLeft, + AlertTriangle, ArrowRight, Bell, Brain, - Calendar, CheckCircle, Cloud, Code, @@ -15,1033 +22,308 @@ import { ExternalLink, Globe, Home, - Layers, List, Mic, - Monitor, Palette, - RefreshCw, + RefreshCcw, Scan, Server, Share2, - ShoppingCart, Smartphone, - Star, Target, Users, - Wrench, Zap } from "lucide-react"; -import { GridPattern } from "../components/GridPattern"; -import { ImageWithFallback } from "../components/figma/ImageWithFallback"; +import { useNavigate } from "react-router-dom"; import { Button } from "../components/ui/button"; import ranoutofLogo from "../src/images/ranoutof-logo.webp"; -import { useNavigate } from "react-router-dom"; -// Technology to icon mapping -const getTechIcon = (tech: string) => { - const techIconMap: { [key: string]: React.ReactNode } = { - "React Native": , - "Laravel": , - "Node.js": , - "MySQL": , - "Firebase": , - "PHP": , - "JavaScript": , - "TypeScript": , - "REST API": , - "WebSocket": , - "Redux": , - "PWA": - }; +// Project data - return techIconMap[tech] || ; -}; - -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", "Node.js", "MySQL", "AWS"], - 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: "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" } -]; - -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: +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" }, - { - title: "Inventory Tracking", - description: "Track home inventory, expiry dates, and get automated restocking alerts", - icon: + details: { + technologies: [ + { name: "React Native", icon: }, + { name: "Node.js", icon: }, + { name: "MySQL", icon: }, + { name: "AWS", icon: } + ], + 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"] }, - { - title: "Real-time Collaboration", - description: "Share lists with family members and sync updates instantly across devices", - icon: - }, - { - title: "Voice Integration", - description: "Add items hands-free with voice commands and smart speech recognition", - icon: - }, - { - title: "Barcode Scanner", - description: "Scan product barcodes for instant item recognition and inventory management", - icon: - }, - { - title: "Smart Notifications", - description: "Intelligent reminders for expiring items and customizable notification settings", - icon: - } -]; - -const technicalChallenges = [ - { - title: "Multi-Input Integration", - description: "Creating seamless integration between voice, barcode, and manual input methods", - icon: - }, - { - title: "Real-time Synchronization", - description: "Ensuring instant list sharing and updates across multiple family members", - icon: - }, - { - title: "Inventory Intelligence", - description: "Building smart expiration tracking and predictive restocking algorithms", - icon: - }, - { - title: "Cross-platform Consistency", - description: "Maintaining identical user experience across iOS, Android, and web admin", - icon: - } -]; - -const developmentPhases = [ - { - phase: "Research & Planning", - duration: "4 weeks", - description: "User research, market analysis, feature prioritization, and technical architecture", - icon: - }, - { - phase: "UI/UX Design", - duration: "2 weeks", - description: "User interface design, prototyping, and user experience optimization", - icon: - }, - { - phase: "Core Development", - duration: "6 weeks", - description: "Mobile app development, authentication, list builder, and basic inventory", - icon: - }, - { - phase: "Advanced Features", - duration: "2 weeks", - description: "Voice integration, barcode scanning, collaboration features, and notifications", - icon: - }, - { - phase: "Testing & QA", - duration: "1 week", - description: "Comprehensive testing, bug fixes, and performance optimization", - icon: - } -]; - -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" + 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" } ], - 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"] + 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." }, - { - phase: "Phase 3", - features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery and eCommerce platforms"] - } -]; + 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: + }, + { + title: "Inventory Tracking", + description: "Track home inventory, expiry dates, and get automated restocking alerts", + icon: + }, + { + title: "Real-time Collaboration", + description: "Share lists with family members and sync updates instantly across devices", + icon: + }, + { + title: "Voice Integration", + description: "Add items hands-free with voice commands and smart speech recognition", + icon: + }, + { + title: "Barcode Scanner", + description: "Scan product barcodes for instant item recognition and inventory management", + icon: + }, + { + title: "Smart Notifications", + description: "Intelligent reminders for expiring items and customizable notification settings", + icon: + } + ], + developmentPhases: [ + { + phase: "Research & Planning", + duration: "4 weeks", + description: "User research, market analysis, feature prioritization, and technical architecture", + icon: + }, + { + phase: "UI/UX Design", + duration: "2 weeks", + description: "User interface design, prototyping, and user experience optimization", + icon: + }, + { + phase: "Core Development", + duration: "6 weeks", + description: "Mobile app development, authentication, list builder, and basic inventory", + icon: + }, + { + phase: "Advanced Features", + duration: "2 weeks", + description: "Voice integration, barcode scanning, collaboration features, and notifications", + icon: + }, + { + phase: "Testing & QA", + duration: "1 week", + description: "Comprehensive testing, bug fixes, and performance optimization", + icon: + } + ], + 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 (

- {/* */} {/* Section 1: Hero with Heading, Subheading, and Image */} -
- - -
- {/* Back Button */} - - - - -
- {/* Content - Left Aligned */} - -
- - Case Study - -
- -

- {projectDetails.title} -

- -

- {projectDetails.subtitle} -

- - - {/* Project Image */} - -
- -
- -
-
-
+ {/* Section 2: Project Details */} -
- {/* Background Elements */} -
-
-
- -
-
- - {/* Section Header */} - -

- Project Details -

-

- RanOutOf is a smart, AI-powered grocery management app designed for households, featuring voice input, reminders, and collaborative list sharing. This case study highlights WDI’s expertise in crafting an intuitive, family-friendly solution that simplifies grocery planning and boosts efficiency. -

- - - {/* Project Meta Information Grid */} - - {/* Technologies & Industries Card */} -
-
- {/* Technologies */} -
-
-
- -
-

Technologies

-
-
- {projectDetails.technologies.map((tech) => ( - - {getTechIcon(tech)} - {tech} - - ))} -
-
- - {/* Industries */} -
-
-
- -
-

Industries

-
-
- {projectDetails.industries.map((industry) => ( - - {industry} - - ))} -
-
-
-
- - {/* Timeline & Team Card */} -
-
- {/* Duration */} -
-
-
- -
-

Project Timeline

-
-

{projectDetails.duration}

-
- - {/* Team */} -
-
-
- -
-

Team Composition

-
-

{projectDetails.teamSize}

-
- - {/* Platforms */} -
-
-
- -
-

Target Platforms

-
-
- {projectDetails.platforms.map((platform) => ( - - {platform} - - ))} -
-
-
-
- - - {/* Key Achievements Section */} - -
-

- Key Impact & Results -

-

- Measurable outcomes that demonstrate RanOutOf's success in transforming household grocery management -

-
- -
- {keyAchievements.map((achievement, index) => ( - - {/* Card Background Gradient */} -
- - {/* Content */} -
- {/* Value */} -
- {achievement.value} -
- - {/* Label */} -
- {achievement.label} -
- - {/* Description */} -
- {achievement.description} -
-
- - {/* Hover Effect Line */} -
- - ))} -
- -
-
-
+ {/* Executive Summary */} -
-
- -

- Executive Summary -

-

- 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. By helping users maintain control over their groceries, RanOutOf reduces the risk of stockouts and minimizes food waste, making everyday shopping easier and more efficient. -

- -
-
+ {/* Project Overview */}
-
- -

- Project Overview -

- +
+

+ Project Overview +

+
-
- {/* Background & Context */} - - {/* Glassmorphism Icon Container */} - -
- -
- -

Background & Context

-

- 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. -

- +
+ } + title="Background & Context" + description="Frequent grocery stockouts, duplicate purchases, and poor inventory tracking are common problems..." + borderColor="border-accent/20" + hoverColor="accent" + /> - {/* Target Audience */} - - {/* Glassmorphism Icon Container */} - -
- -
- -

Target Audience

-

- Tech-savvy individuals and families (age 15–65) who want to simplify their grocery management and improve household planning through mobile convenience. -

- + } + 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" + /> - {/* Business Objectives */} - - {/* Glassmorphism Icon Container */} - -
- -
- -

Business Objectives

-
- {businessObjectives.map((objective, index) => ( -
- - {objective} -
- ))} -
- -
+ } + title="Business Objectives" + points={projectData.businessObjectives} + borderColor="border-green-400/20" + hoverColor="green-400" + />
{/* Core Features */} -
-
- -
-

- Core Features & Functionality -

-

- A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration. -

-
- -
- {coreFeatures.map((feature, index) => ( - - - -
- {feature.icon} -
-

- {feature.title} -

-

- {feature.description} -

- - - - ))} -
- -
-
+ {/* Challenges & Solution Architecture */} -
-
-
-
- {/* Challenges */} - -

- Challenges & Constraints -

-
- {technicalChallenges.map((challenge, index) => ( - -
-
- {challenge.icon} -
-
-

- {challenge.title} -

-

- {challenge.description} -

-
-
- - ))} -
- - - {/* Solution Architecture */} - -

- Solution Architecture -

-
-
-
-

Technology Stack

-
-
- - Frontend: React Native -
-
- - Backend: Node.js -
-
- - Database: MySQL -
-
- - Cloud: AWS -
-
-
- -
-

Key Highlights

-
-
- - Voice recognition with multi-language support -
-
- - Real-time synchronization with conflict resolution -
-
- - Smart inventory tracking with expiry prediction -
-
- - Comprehensive admin panel for content management -
-
-
-
-
- -
-
-
-
+ , + title: "Multi-Input Integration", + description: "Creating seamless integration between voice, barcode, and manual input methods." + }, + { + icon: , + title: "Real-time Synchronization", + description: "Real-time grocery list sharing and updates with family members." + }, + { + icon: , + title: "Inventory Intelligence", + description: "Building smart expiration tracking and predictive restocking algorithms." + }, + { + icon: , + title: "Cross-platform Consistency", + description: "Maintaining identical user experience across iOS, Android, and web admin." + } + ]} + technologyStack={[ + { icon: , label: "Frontend: React Native" }, + { icon: , label: "Backend: Node.js" }, + { icon: , label: "Database: MySQL" }, + { icon: , 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 */} -
-
- -
-

- Development Process & Methodology -

-

- RanOutOf follows an Agile development approach with milestone-based delivery. This ensures timely completion while maintaining high quality through iterative progress and continuous feedback. -

-
- -
- {developmentPhases.map((phase, index) => ( - -
-
- {phase.icon} -
-

- {phase.phase} -

-
- {phase.duration} -
-

- {phase.description} -

-
- - {/* Connector Line */} - {index < developmentPhases.length - 1 && ( -
- )} - - ))} -
- -
-
+ {/* Results & Impact */} -
-
- -
-

- Results & Impact -

-

- 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, demonstrating real value to users. -

-
- -
- {resultsMetrics.map((metric, index) => ( - -
- {metric.value} -
-
- {metric.label} -
-
- {metric.description} -
- - ))} -
- - -

- Technical Achievements -

-
- {technicalAchievements.map((achievement, index) => ( -
- - {achievement} -
- ))} -
- - -
-
+ {/* Lessons Learned */} -
-
-
- -

- Lessons Learned -

-

- Key insights and learnings from the RanOutOf development journey. -

- - -
- {/* What Worked */} - -

- - What Worked Well -

-
- {lessonsLearned.worked.map((lesson, index) => ( -
-
- {lesson} -
- ))} -
- - - {/* What Could Improve */} - -

- - Areas for Improvement -

-
- {lessonsLearned.improve.map((lesson, index) => ( -
-
- {lesson} -
- ))} -
- -
-
-
-
+ } + 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={} + 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 */} -
-
- -
-

- Future Roadmap -

-

- Planned enhancements and features to further revolutionize grocery management apps. -

-
- -
- {futureRoadmap.map((roadmap, index) => ( - -

- {roadmap.phase} -

-
- {roadmap.features.map((feature, featureIndex) => ( -
- - {feature} -
- ))} -
- - ))} -
- -
-
+ } + /> {/* Client Testimonial */} -
-
- -
-
- -
- -
-
- {[...Array(5)].map((_, i) => ( - - ))} -
-
- -
- "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." -
- -
-
- Rishabh Jain -
-
- Director, Global Ease Solutions Pty. Ltd. -
-
-
- -
-
+ {/* CTA Section */}
@@ -1083,7 +365,6 @@ export const RanOutOfProject = () => {
- {/*