From 2a034866a6a218c2e039bfeae000568e6d3a8b14 Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Wed, 30 Jul 2025 18:42:19 +0530 Subject: [PATCH] adding case study and increase line height of h1 --- index.html | 6 + pages/CaseStudies.tsx | 2 +- pages/GoodTimesProject.tsx | 1210 ++++++++++++++++++----- pages/RanOutOfProject.tsx | 1322 +++++++++++++++++++------- pages/TradersCircuitProject.tsx | 1220 ++++++++++++++++++------ src/images/good-times-logo.webp | Bin 0 -> 4486 bytes src/images/ranoutof-logo.webp | Bin 0 -> 103114 bytes src/images/traders-circuit-logo.webp | Bin 0 -> 35154 bytes styles/globals.css | 4 + 9 files changed, 2866 insertions(+), 898 deletions(-) create mode 100644 src/images/good-times-logo.webp create mode 100644 src/images/ranoutof-logo.webp create mode 100644 src/images/traders-circuit-logo.webp diff --git a/index.html b/index.html index 7437f88..291f006 100644 --- a/index.html +++ b/index.html @@ -147,6 +147,12 @@ + + + + + + diff --git a/pages/CaseStudies.tsx b/pages/CaseStudies.tsx index 218fd06..8a33a08 100644 --- a/pages/CaseStudies.tsx +++ b/pages/CaseStudies.tsx @@ -302,7 +302,7 @@ export const CaseStudies = () => { Our Success Stories

- Case Studies That + Portfolios That Define Excellence

diff --git a/pages/GoodTimesProject.tsx b/pages/GoodTimesProject.tsx index 8d87522..e5b23cf 100644 --- a/pages/GoodTimesProject.tsx +++ b/pages/GoodTimesProject.tsx @@ -1,102 +1,203 @@ import { motion } from "framer-motion"; -import { ArrowLeft, ExternalLink, Calendar, MapPin, Users, Clock, Zap, Shield, Settings, Rocket, Target, Activity, Smartphone, Globe, Star, Ticket } from "lucide-react"; +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 { navigateTo } from "../App"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; +import goodTimesLogo from "../src/images/good-times-logo.webp"; -const projectMetrics = [ - { - icon: , - label: "Event Discovery", - value: "250%", - description: "Increase in event discovery" +// 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: }, - { - icon: , - label: "User Engagement", - value: "180%", - description: "Growth in user engagement" + { + title: "Referral + Wallet Engine", + description: "Share QR/referral codes and track earnings with integrated wallet system", + icon: }, - { - icon: , - label: "Bookings Made", - value: "50K+", - description: "Successful event bookings" + { + 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 keyFeatures = [ +const technicalChallenges = [ { - title: "Effortless Event Discovery", - description: "Browse through a curated selection of local events with smart filtering and personalized recommendations based on your interests and location." + title: "Dynamic Referral Logic", + description: "Complex subscription rules with lockouts and wallet freeze mechanisms", + icon: }, { - title: "Seamless Booking Experience", - description: "One-click booking system with secure payment processing and instant confirmation for all types of events and celebrations." + title: "Multi-role Architecture", + description: "Individual logic layers for customers, planners, and admin with secure access", + icon: }, { - title: "Real-time Event Updates", - description: "Get instant notifications about event changes, new listings, and personalized recommendations based on your preferences." + title: "Calendar Performance", + description: "Optimizing calendar-level performance for large event datasets", + icon: }, { - title: "Social Event Planning", - description: "Invite friends, create groups, and coordinate event attendance with built-in social features and group booking capabilities." - }, - { - title: "Location-Based Recommendations", - description: "Discover events happening near you with intelligent location-based suggestions and interactive maps." - }, - { - title: "Event History & Reviews", - description: "Track your event history, leave reviews, and discover new events based on your past preferences and ratings." + title: "Wallet System Security", + description: "Flexible yet secure wallet system with payment thresholds and fraud prevention", + icon: } ]; -const processPhases = [ +const developmentPhases = [ { - phase: "Phase 1", - title: "Event Market Research & User Analysis", - icon: , - description: "Comprehensive analysis of local event markets and user behavior patterns for event discovery.", - details: "Studied event discovery trends, user preferences for different event types, and analyzed booking patterns across various demographics. Identified key pain points in existing event platforms and opportunities for improvement." + phase: "Discovery & Planning", + duration: "2 weeks", + description: "User journeys, event lifecycle modeling, tech recommendations", + icon: }, { - phase: "Phase 2", - title: "Event-Centric UX Design", - icon: , - description: "Designed intuitive interfaces optimized for event browsing and booking experiences.", - details: "Created user-friendly designs focusing on visual event discovery, streamlined booking flows, and social features. Developed prototypes with emphasis on event imagery, clear information hierarchy, and effortless navigation." + phase: "UI/UX Design", + duration: "3 weeks", + description: "Wireframing, onboarding flow mockups, calendar UX design", + icon: }, { - phase: "Phase 3", - title: "Platform Development & Integration", - icon: , - description: "Built scalable event platform with booking systems, payment processing, and real-time features.", - details: "Developed robust architecture supporting event listings, booking management, payment integration, and real-time notifications. Implemented search algorithms, recommendation engines, and social features for group planning." + phase: "Core Development", + duration: "8 weeks", + description: "Flutter builds, backend API, wallet logic, event management system", + icon: }, { - phase: "Phase 4", - title: "Security & Payment Integration", - icon: , - description: "Implemented secure payment processing and data protection for user transactions.", - details: "Integrated secure payment gateways, implemented booking confirmation systems, and ensured data protection compliance. Added fraud prevention measures and secure user authentication systems." + phase: "Testing & QA", + duration: "3 weeks", + description: "Multi-role testing, referral validation, UI regression testing", + icon: }, { - phase: "Phase 5", - title: "Performance & Mobile Optimization", - icon: , - description: "Optimized platform performance for fast event discovery and seamless mobile experience.", - details: "Fine-tuned application performance for quick event loading, efficient search results, and smooth mobile interactions. Implemented caching strategies and optimized image delivery for event listings." + 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" + ], + 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"] }, { - phase: "Phase 6", - title: "Launch & Community Building", - icon: , - description: "Successfully launched platform and built active community of event organizers and attendees.", - details: "Executed comprehensive launch strategy, onboarded event organizers, and established user community. Implemented feedback systems and iterative improvements based on user behavior and preferences." + phase: "12 Months Vision", + features: ["Marketplace for ticket sales", "User-level badges and community forums", "Event sponsor promotions", "Multi-language support for EU expansion"] } ]; @@ -105,62 +206,49 @@ export const GoodTimesProject = () => {

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

- Find Top Local Events with{" "} - Good Times +
+ + Case Study + +
+ +

+ {projectDetails.title}

-

- Find events for any event, any time, effortless +

+ {projectDetails.subtitle}

- -

- From casual hangouts to special celebrations, Good Times makes browsing and booking a breeze, so you never miss out. -

- -
- - +250% Event Discovery - - - Events - - - Booking - - - Lifestyle - -
{/* Project Image */} @@ -168,220 +256,820 @@ export const GoodTimesProject = () => { initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }} - className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2" + className="lg:col-span-5" > - +
+ +
- {/* Metrics Section */} -
-
+ {/* 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 */} +
+
- {projectMetrics.map((metric, index) => ( - -
- {metric.icon} -
-
- {metric.value} -
-
- {metric.label} -
-
- {metric.description} -
-
- ))} +

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

- {/* Main Content Section */} -
-
-
+ {/* Project Overview */} +
+
+
-

- Revolutionizing how you discover events with Good Times +

+ Project Overview

-

- Positioned Good Times as the go-to platform for event discovery, creating an intuitive experience that connects people with memorable experiences. -

- - {/* Key Features */} - -

- Key Features & Capabilities -

-
- {keyFeatures.map((feature, index) => ( - -

- {feature.title} -

-

- {feature.description} -

-
- ))} -
-
- - {/* Project Delivery Process */} - -

- Project Delivery Lifecycle -

-
- {/* Continuous background line */} -
- {/* Animated line overlay */} - + {/* Background & Context */} + + {/* Glassmorphism Icon Container */} + - -
- {processPhases.map((phase, index) => ( + className="flex justify-start mb-6" + > +
+ +
+ +

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

+ + + {/* 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. +

+
+ + {/* Business Objectives */} + + {/* Glassmorphism Icon Container */} + +
+ +
+
+

Business Objectives

+
+ {businessObjectives.map((objective, index) => ( +
+ + {objective} +
+ ))} +
+
+
+
+
+
+ + {/* 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) => ( - {/* Mobile connection line */} - {index < processPhases.length - 1 && ( -
- )} - -
- {/* Phase indicator with fixed width container */} -
- {/* Icon with background to mask the line */} -
-
-
- {phase.icon} -
-
- {/* Icon glow effect */} -
- {/* Connection dot for timeline */} -
-
-
-
- - {index + 1} - - {phase.phase} -
-
- {phase.title} -
-
+
+
+ {challenge.icon}
- - {/* Content with consistent left alignment */} -
-

- {phase.description} -

- -

- {phase.details} +

+

+ {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 +
+
+
+
+
+
+
- {/* CTA Section */} -
-
+ {/* Development Process */} +
+
-

- Ready to Build Your Next Event Platform? -

-

- Let's create an exceptional event discovery platform together. From concept to launch, we'll help you build a platform that connects people with unforgettable experiences. -

-
-
+ + {/* 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 */} + - Start Your Project +

+ + What Worked Well +

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

+ + Areas for Improvement +

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

+ Want to Build the 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. +

+ +
+ -
diff --git a/pages/RanOutOfProject.tsx b/pages/RanOutOfProject.tsx index 8d2baaa..fba8ee5 100644 --- a/pages/RanOutOfProject.tsx +++ b/pages/RanOutOfProject.tsx @@ -1,136 +1,215 @@ +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; import { motion } from "framer-motion"; import { - ArrowLeft, - ExternalLink, - Scan, - Mic, - Smartphone, - Globe, - ShoppingCart, - Package, - Target, Activity, + ArrowLeft, + ArrowRight, + Bell, + Brain, + Calendar, + CheckCircle, + Cloud, + Code, + Database, + ExternalLink, + Globe, + Home, + Layers, + List, + Mic, + Monitor, + Palette, + RefreshCw, + Scan, + Server, + Share2, + ShoppingCart, + Smartphone, Star, - BarChart3, + Target, + Users, + Wrench, + Zap } 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 { navigateTo } from "../App"; -import ranOutOfImage from "../src/images/ranoutof.webp"; +import { Footer } from "../components/Footer"; +import { GridPattern } from "../components/GridPattern"; +import { Navigation } from "../components/Navigation"; +import { ImageWithFallback } from "../components/figma/ImageWithFallback"; +import { Button } from "../components/ui/button"; +import ranoutofLogo from "../src/images/ranoutof-logo.webp"; -const projectMetrics = [ - { - icon: , - label: "Shopping Efficiency", - value: "75%", - description: "Improvement in shopping time", - }, - { - icon: , - label: "Inventory Accuracy", - value: "95%", - description: "Accurate product tracking", - }, - { - icon: , - label: "User Satisfaction", - value: "4.8/5", - description: "App store rating", - }, +// 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": + }; + + return techIconMap[tech] || ; +}; + +const projectDetails = { + title: "RanOutOf – Smart Grocery List & Inventory Management App", + subtitle: "A voice-enabled, reminder-rich, and collaborative grocery management app designed to simplify household planning and eliminate stockouts", + technologies: ["React Native", "Laravel", "Node.js", "MySQL", "Firebase"], + industries: ["Consumer Tech", "Retail Technology", "Productivity"], + duration: "15 weeks, October 2024 – January 2025", + teamSize: "4 developers, 2 designers, 1 QA, 1 PM", + platforms: ["Android", "iOS", "Admin Web Portal"] +}; + +const keyAchievements = [ + { label: "Product Categories", value: "200+", description: "Comprehensive grocery taxonomy" }, + { label: "List Sharing", value: "100%", description: "Real-time collaborative features" }, + { label: "Smart Alerts", value: "24/7", description: "Inventory expiry reminders" } ]; - -const keyFeatures = [ - { - title: "Smart Barcode Scanning", - description: - "Advanced barcode recognition technology that instantly identifies products, adds them to shopping lists, and tracks inventory levels in real-time.", - }, - { - title: "Voice Command Integration", - description: - "Hands-free shopping list management with natural language processing, allowing users to add, remove, or modify items using voice commands.", - }, - { - title: "Intelligent Reminders", - description: - "AI-powered reminder system that learns user patterns and suggests optimal shopping times, product restocking, and deals based on consumption habits.", - }, - { - title: "Web-based Admin CMS", - description: - "Comprehensive content management system for Global Ease Solutions to manage product databases, user accounts, and analytics dashboards.", - }, - { - title: "Smart Shopping Lists", - description: - "Collaborative shopping lists with real-time synchronization across devices, smart categorization, and store layout optimization for efficient shopping.", - }, - { - title: "Pantry Management", - description: - "Digital inventory tracking with expiration date monitoring, automatic reorder suggestions, and waste reduction recommendations.", - }, +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 processPhases = [ +const coreFeatures = [ { - phase: "Phase 1", - title: "Market Research & User Analysis", - icon: , - description: - "Comprehensive analysis of grocery shopping behaviors and pain points identification.", - details: - "Conducted extensive user research to understand shopping patterns, pain points in traditional grocery management, and opportunities for digital innovation. Analyzed competitor apps, studied barcode scanning technologies, and identified key features that would revolutionize the grocery shopping experience.", + 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: + } +]; + +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" + ], + 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", - title: "Smart UX Design & Prototyping", - icon: , - description: - "Designed intuitive interfaces optimized for quick grocery management and scanning workflows.", - details: - "Created user-centric design system focusing on speed and efficiency. Developed prototypes for barcode scanning flows, voice command interfaces, and list management. Emphasized accessibility and ease of use for diverse user demographics including elderly users and busy families.", + features: ["AI-powered shopping list suggestions", "Store discount tracking integration", "Recipe-based automatic list generation"] }, { - phase: "Phase 3", - title: "App Development & Scanning Integration", - icon: , - description: - "Built native mobile app with advanced barcode scanning and voice recognition capabilities.", - details: - "Developed cross-platform mobile application with optimized barcode scanning engine, integrated voice recognition APIs, and real-time synchronization. Implemented offline functionality, smart caching, and efficient data processing for smooth user experience even in poor network conditions.", - }, - { - phase: "Phase 4", - title: "Web CMS Development", - icon: , - description: - "Created comprehensive web-based admin system for Global Ease Solutions management.", - details: - "Built robust content management system with role-based access control, analytics dashboards, product database management, and user account administration. Integrated reporting tools, automated backups, and scalable architecture to support growing user base.", - }, - { - phase: "Phase 5", - title: "AI & Voice Integration", - icon: , - description: - "Implemented intelligent voice commands and AI-powered shopping assistance features.", - details: - "Integrated natural language processing for voice commands, developed AI algorithms for shopping pattern recognition, and implemented smart reminder systems. Added predictive analytics for inventory management and personalized shopping recommendations.", - }, - { - phase: "Phase 6", - title: "Testing & Launch Optimization", - icon: , - description: - "Comprehensive testing, optimization, and successful app store launch.", - details: - "Conducted extensive QA testing including barcode accuracy tests, voice recognition validation, and performance optimization. Managed app store submissions, implemented analytics tracking, and established customer support systems for post-launch success.", - }, + phase: "Phase 3", + features: ["Voice command grocery planning with smart assistants", "Household budget tracking and spend reports", "Integration with grocery delivery services"] + } ]; export const RanOutOfProject = () => { @@ -138,62 +217,49 @@ export const RanOutOfProject = () => {
- {/* Hero Section */} -
+ {/* Section 1: Hero with Heading, Subheading, and Image */} +
-
+
{/* Back Button */} -
- {/* Content */} +
+ {/* Content - Left Aligned */} -

- Grocery Shopping Done{" "} - Right +
+ + Case Study + +
+ +

+ {projectDetails.title}

-

- Smart grocery planning with intelligent automation +

+ {projectDetails.subtitle}

- -

- WDI developed a smart grocery planning app with barcode scanning, voice commands, reminders, and a web-based admin CMS for Global Ease Solutions. -

- -
- - +75% Shopping Efficiency - - - Mobile App - - - Barcode Scanning - - - Voice AI - -
{/* Project Image */} @@ -201,194 +267,741 @@ export const RanOutOfProject = () => { initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }} - className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2" + className="lg:col-span-5" > - +
+ +
- {/* Metrics Section */} -
-
+ {/* Section 2: Project Details */} +
+ {/* Background Elements */} +
+
+
+ +
+
+ + {/* Section Header */} + +

+ Project Details +

+

+ Comprehensive overview of technologies, timeline, and key achievements that revolutionized household grocery management +

+
+ + {/* 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 */} +
+
- {projectMetrics.map((metric, index) => ( - -
- {metric.icon} -
-
- {metric.value} -
-
- {metric.label} -
-
- {metric.description} -
-
- ))} +

+ Executive Summary +

+

+ RanOutOf is a mobile-first solution tailored for modern households that frequently forget or mismanage their grocery shopping. The app simplifies list-making, enables shared household planning, and manages pantry inventory using reminders, barcodes, and smart grouping features to eliminate stockouts and reduce food waste. +

- {/* Main Content Section */} -
-
-
+ {/* Project Overview */} +
+
+
-

- Revolutionizing Grocery Management with Smart Technology +

+ Project Overview

-

- Built RanOutOf as an intelligent grocery planning solution that combines barcode scanning, voice commands, and AI-powered reminders to transform how families manage their shopping and pantry inventory. The platform empowers users to shop smarter, waste less, and save time through innovative automation. -

- - {/* Key Features */} - -

- Smart Features & Capabilities -

-
- {keyFeatures.map((feature, index) => ( - -

- {feature.title} -

-

- {feature.description} -

-
- ))} -
-
- - {/* Project Delivery Process */} - -

- Development Journey & Process -

-
- {/* Continuous background line */} -
- {/* Animated line overlay */} - + {/* Background & Context */} + + {/* Glassmorphism Icon Container */} + - -
- {processPhases.map((phase, index) => ( + className="flex justify-start mb-6" + > +
+ +
+ +

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

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

Target Audience

+

+ Tech-savvy individuals and families (age 25–45) who want to simplify their grocery management and improve household planning through mobile convenience and collaborative features. +

+
+ + {/* Business Objectives */} + + {/* Glassmorphism Icon Container */} + +
+ +
+
+

Business Objectives

+
+ {businessObjectives.map((objective, index) => ( +
+ + {objective} +
+ ))} +
+
+
+
+
+
+ + {/* 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) => ( - {/* Mobile connection line */} - {index < processPhases.length - 1 && ( -
- )} - -
- {/* Phase indicator with fixed width container */} -
- {/* Icon with background to mask the line */} -
-
-
- {phase.icon} -
-
- {/* Icon glow effect */} -
- {/* Connection dot for timeline */} -
-
-
-
- - {index + 1} - - {phase.phase} -
-
- {phase.title} -
-
+
+
+ {challenge.icon}
- - {/* Content with consistent left alignment */} -
-

- {phase.description} -

- -

- {phase.details} +

+

+ {challenge.title} +

+

+ {challenge.description}

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

+ Solution Architecture +

+
+
+
+

Technology Stack

+
+
+ + Frontend: React Native +
+
+ + Backend: Laravel & Node.js +
+
+ + Database: MySQL +
+
+ + Cloud: Firebase Services +
+
+
+ +
+

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 +
+
+
+
+
+
+
- {/* Technical Innovation Section */} -
-
+ {/* Development Process */} +
+
+ +
+

+ Development Process & Methodology +

+

+ Agile development approach with milestone-based delivery ensuring quality and timely completion. +

+
+ +
+ {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 RanOutOf's success in transforming household grocery management. +

+
+ +
+ {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} +
+ ))} +
+ +
+
+
+
+ + {/* Future Roadmap */} +
+
+ +
+

+ Future Roadmap +

+

+ Planned enhancements and features to further revolutionize grocery management. +

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

+ {roadmap.phase} +

+
+ {roadmap.features.map((feature, featureIndex) => ( +
+ + {feature} +
+ ))} +
+
+ ))} +
+
+
+
+ + {/* Client Testimonial */} +
+
{ viewport={{ once: true }} className="max-w-4xl mx-auto text-center" > -

- Technical Innovation & Architecture -

-

- Built with cutting-edge barcode recognition technology, advanced voice processing APIs, and intelligent AI algorithms for pattern recognition and predictive shopping recommendations. -

- -
- - -

- Advanced Scanning Engine -

-

- High-accuracy barcode recognition with offline capability and instant product identification from comprehensive databases. -

-
+
+
+ +
- - -

- Natural Language Processing -

-

- Sophisticated voice recognition with context awareness for intuitive hands-free shopping list management. -

-
+
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+
- - -

- Predictive Analytics -

-

- AI-powered consumption pattern analysis for intelligent restocking suggestions and waste reduction insights. -

-
+
+ "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 */} -
-
+
+
-

- Ready to Build Your Smart Consumer App? -

-

- Let's create an innovative consumer application together. From barcode scanning to voice AI integration, we'll help you build an app that transforms everyday experiences through smart technology. +

+ Want to build a smart, collaborative lifestyle app? +

+

+ Partner with WDI to design solutions that streamline daily life with precision tech and intuitive design.

+
- -
diff --git a/pages/TradersCircuitProject.tsx b/pages/TradersCircuitProject.tsx index 3e77c3e..46cf508 100644 --- a/pages/TradersCircuitProject.tsx +++ b/pages/TradersCircuitProject.tsx @@ -1,103 +1,204 @@ +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; import { motion } from "framer-motion"; -import { ArrowLeft, ExternalLink, TrendingUp, DollarSign, BarChart3, Search, Figma, Zap, Shield, Settings, Rocket, Target, Activity, Users, Smartphone, Globe } 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 { Activity, ArrowLeft, ArrowRight, BarChart3, Brain, Building2, Calendar, CheckCircle, Clock, Cloud, Code, Database, ExternalLink, Globe, Layers, Monitor, RefreshCw, Server, Shield, Smartphone, Star, Target, TrendingUp, Users, Wrench, Zap } from "lucide-react"; import { navigateTo } from "../App"; -import tradersCircuitImage from "../src/images/traders-circuit.webp"; +import { Footer } from "../components/Footer"; +import { GridPattern } from "../components/GridPattern"; +import { Navigation } from "../components/Navigation"; +import { ImageWithFallback } from "../components/figma/ImageWithFallback"; +import { Button } from "../components/ui/button"; +import tradersCircuitLogo from "../src/images/traders-circuit-logo.webp"; -const projectMetrics = [ - { - icon: , - label: "User Base Growth", - value: "+300%", - description: "Rapid growth in active users" +// Technology to icon mapping +const getTechIcon = (tech: string) => { + const techIconMap: { [key: string]: React.ReactNode } = { + "Flutter": , + "React Native": , + "React": , + "Node.js": , + "MongoDB": , + "Firebase": , + "WebSocket": , + "Redux": , + "TypeScript": , + "JavaScript": , + "AWS": , + "Google Cloud": , + "Azure": , + "PostgreSQL": , + "MySQL": , + "Python": , + "Java": , + "Swift": , + "Kotlin": , + "Docker": , + "Kubernetes": , + "GraphQL": , + "REST API": , + "Express": , + "Vue.js": , + "Angular": + }; + + return techIconMap[tech] || ; +}; + +const projectDetails = { + title: "Traders Circuit – Stock Advisory & Trade Companion App", + subtitle: "A mobile-first advisory platform offering curated trade calls, real-time updates, and portfolio tracking to empower everyday traders", + technologies: ["Flutter", "Firebase", "Node.js"], + industries: ["Fintech", "Stock Market", "Retail Investment"], + duration: "6 months, February 2024 – August 2024", + teamSize: "5 developers, 2 designers, 1 PM", + platforms: ["Android", "iOS"] +}; + +const keyAchievements = [ + { label: "Early Access Traders", value: "10K+", description: "Onboarded successfully" }, + { label: "App Store Compliance", value: "100%", description: "First submission success" }, + { label: "Screen Load Time", value: "<2s", description: "Across all devices" } +]; + +const businessObjectives = [ + "Create a real-time, intuitive stock advisory experience", + "Enable tracking of trade performance and history", + "Launch with 90% feature parity within 6 months", + "Ensure <3s load time and 99.9% uptime for live market hours" +]; + +const coreFeatures = [ + { + title: "Curated Trade Calls", + description: "Expert-curated 'Swing Trades' & 'Cash Trades' call cards with real-time updates", + icon: }, - { - icon: , - label: "App Downloads", - value: "500K+", - description: "Downloads across India" + { + title: "Performance Tracking", + description: "Real-time trade updates & exited positions tracking with performance metrics", + icon: }, - { - icon: , - label: "Investment Volume", - value: "₹100Cr+", - description: "Monthly trading volume" + { + title: "Educational Content", + description: "Market bytes, learnings, and educational content in read sections", + icon: + }, + { + title: "Smart Notifications", + description: "Intelligent notification system for trade alerts and market updates", + icon: + }, + { + title: "Admin Panel", + description: "Comprehensive admin panel for call management and content updates", + icon: + }, + { + title: "Secure Authentication", + description: "User onboarding and login with Firebase authentication", + icon: } ]; -const keyFeatures = [ +const technicalChallenges = [ { - title: "Ultra-personalized Financial Planning", - description: "AI-driven personalized investment recommendations tailored specifically for Indian millennials and Gen Z investors." + title: "Real-time Performance", + description: "Optimizing data load and UI responsiveness for real-time market conditions", + icon: }, { - title: "Seamless Investment Experience", - description: "Intuitive interface designed for India's mobile-first generation with simplified investment processes." + title: "Notification Delivery", + description: "Managing push notifications and ensuring timely delivery for trade alerts", + icon: }, { - title: "Real-time Market Analytics", - description: "Live Indian stock market data and analytics with personalized insights for smarter investment decisions." + title: "Data Security", + description: "Securing user data while keeping login friction low", + icon: }, { - title: "Social Investment Community", - description: "Connect with fellow investors, share strategies, and learn from India's growing investment community." - }, - { - title: "Multi-language Support", - description: "Available in multiple Indian languages to make investing accessible to diverse demographics." - }, - { - title: "Educational Investment Content", - description: "Comprehensive learning modules specifically designed for Indian market conditions and investment opportunities." + title: "Timeline Management", + description: "Tight 6-month timeline from design to launch", + icon: } ]; -const processPhases = [ +const developmentPhases = [ { - phase: "Phase 1", - title: "Indian Market Research & Analysis", - icon: , - description: "Deep dive into Indian investment behaviors and preferences of millennials and Gen Z.", - details: "Analyzed Indian market trends, regulatory requirements, and investment patterns. Studied user demographics, financial literacy levels, and mobile-first preferences of young Indian investors." + phase: "Discovery & Planning", + duration: "3 weeks", + description: "Market research, competitor benchmarking, feature roadmap", + icon: }, + { + phase: "Design & Prototyping", + duration: "4 weeks", + description: "Branding, UI mockups, user testing feedback loop", + icon: + }, + { + phase: "Core Development", + duration: "6 weeks", + description: "App architecture, authentication, splash, trade sections", + icon: + }, + { + phase: "Content & Trade Modules", + duration: "5 weeks", + description: "Read section, exited trades, date-wise grouping, notifications", + icon: + }, + { + phase: "Admin CMS & Analytics", + duration: "3 weeks", + description: "Role-based access for call publishing and stats tracking", + icon: + }, + { + phase: "Testing & Deployment", + duration: "3 weeks", + description: "App store compliance, staging testing, final release", + icon: + } +]; + +const resultsMetrics = [ + { label: "App Installs", value: "10K+", description: "In beta with 4.6★ rating" }, + { label: "Daily Active Usage", value: "70%", description: "During market hours" }, + { label: "App Load Time", value: "1.8s", description: "Average load time" }, + { label: "Crash Rate", value: "<0.3%", description: "Industry leading" }, + { label: "Trader Retention", value: "68%", description: "After 30 days" }, + { label: "UI/UX Rating", value: "90%", description: "Rated as 'Excellent'" } +]; + +const technicalAchievements = [ + "Real-time exited call update system", + "Date-wise trade grouping with auto-archival logic", + "100% crash-free sessions on launch week", + "Firebase-based CMS requiring no custom infra" +]; + +const lessonsLearned = { + worked: [ + "Weekly design-dev syncs prevented misalignments", + "Animations added micro-interactions users loved", + "Modular Flutter setup enabled easy refactoring" + ], + improve: [ + "Content logic complexity was underestimated", + "Future projects should prototype admin CMS earlier", + "More onboarding tutorials needed for first-time users" + ] +}; + +const futureRoadmap = [ { phase: "Phase 2", - title: "India-Centric UX Design", - icon: , - description: "Created culturally relevant and intuitive interfaces tailored for Indian users.", - details: "Designed user experiences considering Indian financial behaviors, language preferences, and mobile usage patterns. Created prototypes with simplified onboarding and educational elements." + features: ["Personalized dashboards", "Premium tier with exclusive trade rooms", "WhatsApp-like alert groups for power users"] }, { - phase: "Phase 3", - title: "Platform Development & Integration", - icon: , - description: "Built scalable trading platform with Indian market integrations and real-time data feeds.", - details: "Developed robust architecture with Indian stock exchange integrations, payment gateway connections, and real-time market data processing. Implemented AI-driven recommendation engines." - }, - { - phase: "Phase 4", - title: "Compliance & Security", - icon: , - description: "Ensured full compliance with SEBI regulations and Indian financial security standards.", - details: "Implemented comprehensive security measures following Indian regulatory guidelines. Ensured KYC compliance, data protection, and secure transaction processing as per Indian standards." - }, - { - phase: "Phase 5", - title: "Performance Optimization", - icon: , - description: "Optimized platform performance for Indian network conditions and device capabilities.", - details: "Fine-tuned application performance for varying Indian network speeds and diverse device specifications. Implemented efficient caching and data compression strategies." - }, - { - phase: "Phase 6", - title: "Market Launch & Growth", - icon: , - description: "Successfully launched and scaled across Indian markets with rapid user adoption.", - details: "Executed targeted launch strategy across major Indian cities. Implemented growth marketing campaigns and established customer support infrastructure for pan-India operations." + phase: "Phase 3", + features: ["Web version of dashboard", "Trade performance insights and leaderboards", "Community forum with expert sessions"] } ]; @@ -106,62 +207,49 @@ export const TradersCircuitProject = () => {
- {/* Hero Section */} -
+ {/* Section 1: Hero with Heading, Subheading, and Image */} +
-
+
{/* Back Button */} -
- {/* Content */} +
+ {/* Content - Left Aligned */} -

- Empower India's Millennials & Gen Z with{" "} - Smarter Investments +
+ + Case Study + +
+ +

+ {projectDetails.title}

-

- Seamless Investment, Ultra-personalized Financial Planning +

+ {projectDetails.subtitle}

- -

- Unlock a new dimension of investment decisions in the booming Indian market. With every move handcrafted for your unique needs, Trader Circuit ensures every step is nailed to your financial future. -

- -
- - +300% User Growth - - - FinTech - - - Trading Platform - - - Indian Market - -
{/* Project Image */} @@ -169,217 +257,807 @@ export const TradersCircuitProject = () => { initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.2 }} - className="relative aspect-[4/3] overflow-hidden bg-muted/30 rounded-[10px] px-2" + className="lg:col-span-5" > - +
+ +
- {/* Metrics Section */} -
-
+ {/* Section 2: Project Details */} +
+ {/* Background Elements */} +
+
+
+ +
+
+ + {/* Section Header */} + +

+ Project Details +

+

+ Comprehensive overview of technologies, timeline, and key achievements that drove this project'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 project's success and value delivered to stakeholders +

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

+ Executive Summary +

+

+ Traders Circuit is a mobile stock advisory platform designed to help Indian retail traders make informed, timely decisions based on high-quality research and structured trade insights. The app streamlines trade discovery, execution tracking, and performance analytics in a sleek, intuitive interface built with speed and user experience in mind. +

- {/* Main Content Section */} -
-
-
+ {/* Project Overview */} +
+
+
-

- World-Class App Development, Delivered with Excellence +

+ Project Overview

-

- Positioned Trader Circuit as a leader, and seeing the user base grow rapidly. -

- - {/* Key Features */} - -

- Key Features & Capabilities -

-
- {keyFeatures.map((feature, index) => ( - -

- {feature.title} -

-

- {feature.description} -

-
- ))} -
-
- - {/* Project Delivery Process */} - -

- Project Delivery Lifecycle -

-
- {/* Continuous background line */} -
- {/* Animated line overlay */} - + {/* Background & Context */} + + {/* Glassmorphism Icon Container */} + - -
- {processPhases.map((phase, index) => ( + className="flex justify-start mb-6" + > +
+ +
+ +

Background & Context

+

+ Retail trading in India has seen exponential growth, but quality advisory platforms are often expensive, inaccessible, or overly complex. Traders Circuit bridges this gap by offering simplified, actionable insights for cash and swing trades curated by domain experts. +

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

Target Audience

+

+ Retail stock market traders in India (Age 22–45), interested in short- to mid-term equity investments and looking for expert-curated stock strategies. +

+
+ + {/* Business Objectives */} + + {/* Glassmorphism Icon Container */} + +
+ +
+
+

Business Objectives

+
+ {businessObjectives.map((objective, index) => ( +
+ + {objective} +
+ ))} +
+
+
+
+
+
+ + {/* Core Features */} +
+
+ +
+

+ Core Features & Functionality +

+

+ A comprehensive suite of tools designed to empower retail traders with expert insights and real-time market intelligence. +

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

+ {feature.title} +

+

+ {feature.description} +

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

+ Challenges & Constraints +

+
+ {technicalChallenges.map((challenge, index) => ( - {/* Mobile connection line */} - {index < processPhases.length - 1 && ( -
- )} - -
- {/* Phase indicator with fixed width container */} -
- {/* Icon with background to mask the line */} -
-
-
- {phase.icon} -
-
- {/* Icon glow effect */} -
- {/* Connection dot for timeline */} -
-
-
-
- - {index + 1} - - {phase.phase} -
-
- {phase.title} -
-
+
+
+ {challenge.icon}
- - {/* Content with consistent left alignment */} -
-

- {phase.description} -

- -

- {phase.details} +

+

+ {challenge.title} +

+

+ {challenge.description}

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

+ Solution Architecture +

+
+
+
+

Technology Stack

+
+
+ + Frontend: Flutter +
+
+ + Backend: Node.js +
+
+ + Database: Firebase Firestore +
+
+ + Hosting: Firebase Hosting +
+
+
+ +
+

Key Highlights

+
+
+ + Modular screen-wise Flutter components +
+
+ + Firestore structure with efficient indexing +
+
+ + Secure API gateways for admin and user segregation +
+
+ + Realtime listener-based updates for active trades +
+
+
+
+
+
+
- {/* CTA Section */} -
-
+ {/* Development Timeline */} +
+
+
+ +

+ Development Timeline +

+

+ A structured 6-month development journey from concept to launch +

+
+ +
+ {developmentPhases.map((phase, index) => ( + + {/* Timeline connector */} + {index < developmentPhases.length - 1 && ( +
+ )} + +
+
+ {phase.icon} +
+
+ +
+
+

+ {phase.phase} +

+ + {phase.duration} + +
+

+ {phase.description} +

+
+
+ ))} +
+
+
+
+ + {/* Results & Impact */} +
+
-

- Ready to Build Your Next Investment Platform? -

-

- Let's create a revolutionary trading platform together. From concept to launch, we'll help you build a platform that empowers the next generation of investors. -

-
-
+
+ + {/* Technical Achievements & Lessons */} +
+
+
+
+ {/* Technical Achievements */} + - Start Your Project +

+ Technical Achievements +

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

+ Lessons Learned +

+
+
+

What Worked

+
+ {lessonsLearned.worked.map((lesson, index) => ( +
+ + {lesson} +
+ ))} +
+
+ +
+

What Could Improve

+
+ {lessonsLearned.improve.map((lesson, index) => ( +
+ + {lesson} +
+ ))} +
+
+
+
+
+
+
+
+ + {/* Future Roadmap - ORIGINAL SIMPLE VERSION */} +
+
+
+ +

+ Future Roadmap +

+

+ Planned enhancements to expand platform capabilities and user engagement +

+
+ +
+ {futureRoadmap.map((roadmapPhase, index) => ( + +

+ {roadmapPhase.phase} +

+
+ {roadmapPhase.features.map((feature, featureIndex) => ( +
+ + {feature} +
+ ))} +
+
+ ))} +
+
+
+
+ + {/* Client Testimonial - WITH TRADERS CIRCUIT LOGO */} +
+
+ +
+ {/* Traders Circuit Logo */} + +
+ Traders Circuit Logo +
+
+ + {/* Stars */} +
+ {[1, 2, 3, 4, 5].map((star) => ( + + ))} +
+ +
+ "WDI has helped us bring our vision to life with a sleek, reliable, and user-loved app. Their understanding of the trading space and mobile-first design thinking really made a difference." +
+ +
+
+
Aashiq Gowda
+
Director, Traders Circuit Pvt Ltd.
+
+
+
+
+
+
+ + {/* CTA Section */} +
+
+ +

+ Ready to Build Your Next Fintech Platform? +

+

+ Partner with WDI to transform your fintech vision into a powerful, user-loved application that drives real business results. +

+ +
+