diwali banner, portfolio content changes, and some hero text changes and slider add on homepage
This commit is contained in:
priyanshuvish
@@ -123,7 +123,7 @@ const CustomWebAppHeroWithCTA = () => {
|
||||
{/* Main Heading */}
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||
Custom Web Application Development
|
||||
Build What Your Business Needs — Fast
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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 */}
|
||||
<section className="bg-background">
|
||||
<HeroSection />
|
||||
<DiwaliHeroSection />
|
||||
</section>
|
||||
{/* <section className="bg-background">
|
||||
<HeroSection />
|
||||
</section> */}
|
||||
|
||||
{/* Client Logos - Dark background */}
|
||||
<section className="bg-background">
|
||||
@@ -164,8 +171,8 @@ export const Homepage = () => {
|
||||
|
||||
{/* Services Grid - Dark background */}
|
||||
{/* <section className="bg-background">
|
||||
<ServicesSection />
|
||||
</section> */}
|
||||
<ServicesSection />
|
||||
</section> */}
|
||||
<section className="py-20 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<motion.div
|
||||
@@ -251,7 +258,14 @@ export const Homepage = () => {
|
||||
|
||||
{/* Case Studies - Dark background */}
|
||||
<section className="bg-background">
|
||||
<PackagesSection />
|
||||
</section>
|
||||
{/* <section className="bg-background">
|
||||
<CaseStudyHighlight />
|
||||
</section> */}
|
||||
|
||||
<section className="bg-background">
|
||||
<CaseStudySlider autoPlay autoPlayInterval={6000} />
|
||||
</section>
|
||||
|
||||
{/* Inline CTA - Dark background */}
|
||||
|
||||
@@ -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 */}
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||
MVP & Startup Launch Packages
|
||||
Launch Faster. <br /> Learn Sooner. <br /> Scale Smarter.
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
@@ -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`}
|
||||
>
|
||||
<div
|
||||
className={`flex-1 ${
|
||||
isEven ? "lg:text-right" : "lg:text-left"
|
||||
} text-center lg:text-left`}
|
||||
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
||||
} text-center lg:text-left`}
|
||||
>
|
||||
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||||
@@ -1430,6 +1430,9 @@ export const MVPStartupLaunchPackages = () => {
|
||||
<MVPStartupLaunchPackagesHero />
|
||||
</section>
|
||||
|
||||
{/* VibeProgrammingPackages */}
|
||||
<VibeProgrammingPackages />
|
||||
|
||||
{/* Challenge */}
|
||||
<section className="bg-background">
|
||||
<MVPStartupChallenge />
|
||||
@@ -1440,6 +1443,9 @@ export const MVPStartupLaunchPackages = () => {
|
||||
<MVPStartupIncludes />
|
||||
</section>
|
||||
|
||||
{/* DedicatedTeamPricing */}
|
||||
<DedicatedTeamPricing />
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="bg-background">
|
||||
<MVPStartupBenefits />
|
||||
|
||||
@@ -116,9 +116,9 @@ const HeroWithCTA = () => {
|
||||
className="space-y-6"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
|
||||
<span className="text-white">Expert </span>
|
||||
<span className="text-[#E5195E]">Mobile App Development</span>
|
||||
<span className="text-white"> Services</span>
|
||||
<span className="text-white">From concept to </span>
|
||||
<span className="text-[#E5195E]">App Store</span>
|
||||
<span className="text-white"> in just 6 weeks.</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,397 +1,344 @@
|
||||
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, Users, Globe, TrendingUp, Search, Figma, Zap, Shield, Settings, Rocket, ShoppingBag, Recycle, Tag } 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 seezunImage from "../src/images/seezun.webp";
|
||||
import { AlertTriangle, ArrowRight, Bell, Calendar, CheckCircle, Cloud, Code, Cpu, Database, ExternalLink, Globe, Home, Image, Leaf, List, Mic, Palette, Repeat, Ruler, Scan, Server, Share2, ShieldCheck, ShoppingBag, Smartphone, Sparkles, Split, Star, Target, TestTube, Users, Zap } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "../components/ui/button";
|
||||
import seezunImage from "../src/images/seezun.webp";
|
||||
import seezunLogo from "../src/images/seezun-logo.png";
|
||||
|
||||
const projectMetrics = [
|
||||
{
|
||||
icon: <ShoppingBag className="w-8 h-8" />,
|
||||
label: "Active Users",
|
||||
value: "50K+",
|
||||
description: "Fashion enthusiasts connected"
|
||||
const projectData = {
|
||||
hero: {
|
||||
title: "Seezun: Your Seasonal Fashion & Lifestyle Hub",
|
||||
subtitle: "Rent, Buy, or Sell South Asian Clothing",
|
||||
subtitleTwo: "Discover a new way to update your wardrobe, rent, buy, or sell both new and preloved South Asian outfits on Seezun. Enjoy simple, seamless exchanges for every style and every occasion.",
|
||||
imageUrl: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&h=600&fit=crop&crop=center",
|
||||
imageAlt: "Seezun App Showcase"
|
||||
},
|
||||
{
|
||||
icon: <Recycle className="w-8 h-8" />,
|
||||
label: "Sustainability Impact",
|
||||
value: "+85%",
|
||||
description: "Reduction in fashion waste"
|
||||
details: {
|
||||
technologies: [
|
||||
{ name: "React Native", icon: <Smartphone className="w-4 h-4" /> },
|
||||
{ name: "ReactJs", icon: <Globe className="w-4 h-4" /> },
|
||||
{ name: "Laravel", icon: <Server className="w-4 h-4" /> },
|
||||
{ name: "MySQL", icon: <Database className="w-4 h-4" /> },
|
||||
{ name: "AWS", icon: <Cloud className="w-4 h-4" /> }
|
||||
],
|
||||
industries: ["Eccomerce", "Retail Technology", "Fashion & Lifestyle"],
|
||||
duration: "7 Months, Aug 2023 – Feb 2024",
|
||||
teamSize: "4 developers, 2 designers, 1 QA, 1 PM",
|
||||
platforms: ["Android", "iOS", "Admin Web Portal"]
|
||||
},
|
||||
{
|
||||
icon: <Tag className="w-8 h-8" />,
|
||||
label: "Transaction Growth",
|
||||
value: "+200%",
|
||||
description: "Monthly marketplace activity"
|
||||
}
|
||||
];
|
||||
achievements: [
|
||||
{ label: "Active Users", value: "50K+", description: "Fashion enthusiasts connected" },
|
||||
{ label: "Sustainability Impact", value: "+85%", description: "Reduction in fashion waste" },
|
||||
{ label: "Transaction Growth", value: "+200%", description: "Monthly marketplace activity" }
|
||||
],
|
||||
executiveSummary: {
|
||||
content: "Seezun reimagines the South Asian clothing market with a customer-driven platform connecting buyers, sellers, and renters. By analyzing preferences, trends, and inventory, Seezun offers a seamless, tailored shopping experience, making fashion accessible, sustainable, and affordable."
|
||||
},
|
||||
businessObjectives: [
|
||||
"Launch seasonal style collections curated by fashion experts for every occasion",
|
||||
"Build a diverse vendor marketplace with trusted sellers, secure checkout, and live order tracking",
|
||||
"Develop a vendor self-service hub with easy onboarding, tagging, and detailed sales insights",
|
||||
"Deliver a seamless shopping experience combining tradition, convenience, and community trust"
|
||||
],
|
||||
|
||||
const keyFeatures = [
|
||||
{
|
||||
title: "Rental Marketplace",
|
||||
description: "Rent South Asian clothing for special occasions, making premium fashion accessible and affordable."
|
||||
},
|
||||
{
|
||||
title: "Buy & Sell Platform",
|
||||
description: "Purchase new and pre-loved clothing from verified sellers with secure payment processing."
|
||||
},
|
||||
{
|
||||
title: "Sustainable Fashion Focus",
|
||||
description: "Promote circular fashion economy by encouraging reuse and extending garment lifecycles."
|
||||
},
|
||||
{
|
||||
title: "Authentic South Asian Styles",
|
||||
description: "Curated collection of traditional and contemporary South Asian clothing and accessories."
|
||||
},
|
||||
{
|
||||
title: "Size & Fit Matching",
|
||||
description: "Advanced size recommendation system ensuring perfect fit for every customer."
|
||||
},
|
||||
{
|
||||
title: "Community Reviews",
|
||||
description: "Trusted rating system with detailed reviews from verified customers and renters."
|
||||
}
|
||||
];
|
||||
|
||||
const processPhases = [
|
||||
{
|
||||
phase: "Phase 1",
|
||||
title: "Discovery & Market Research",
|
||||
icon: <Search className="w-6 h-6" />,
|
||||
description: "Conducted extensive research into South Asian fashion market trends and customer behavior patterns.",
|
||||
details: "Analyzed competitor landscape, identified key pain points in traditional clothing shopping, and defined unique value propositions for rent-buy-sell model. Developed comprehensive user personas and market positioning strategy."
|
||||
},
|
||||
{
|
||||
phase: "Phase 2",
|
||||
title: "UX Design & Prototyping",
|
||||
icon: <Figma className="w-6 h-6" />,
|
||||
description: "Created intuitive user journeys for browsing, renting, buying, and selling South Asian clothing.",
|
||||
details: "Designed mobile-first interface with cultural sensitivity and accessibility in mind. Built interactive prototypes for user testing and stakeholder validation. Established visual design system reflecting South Asian aesthetic preferences."
|
||||
},
|
||||
{
|
||||
phase: "Phase 3",
|
||||
title: "Marketplace Development",
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
description: "Built robust marketplace platform with rental management, inventory tracking, and payment processing.",
|
||||
details: "Implemented agile development methodology with weekly sprints. Developed custom rental calendar system, automated pricing algorithms, and multi-vendor management tools. Integrated secure payment gateways and shipping logistics."
|
||||
},
|
||||
{
|
||||
phase: "Phase 4",
|
||||
title: "Quality Assurance & Testing",
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
description: "Comprehensive testing across all user flows, payment systems, and rental management features.",
|
||||
details: "Performed extensive functional testing, security audits, and performance optimization. Conducted user acceptance testing with beta customers. Implemented fraud detection and content moderation systems for marketplace safety."
|
||||
},
|
||||
{
|
||||
phase: "Phase 5",
|
||||
title: "Platform Deployment",
|
||||
icon: <Settings className="w-6 h-6" />,
|
||||
description: "Deployed scalable cloud infrastructure with automated deployment pipelines and monitoring systems.",
|
||||
details: "Set up containerized microservices architecture for optimal scalability. Implemented automated backup systems, real-time monitoring, and performance analytics. Established robust CI/CD pipeline for continuous feature delivery."
|
||||
},
|
||||
{
|
||||
phase: "Phase 6",
|
||||
title: "Launch & Growth",
|
||||
icon: <Rocket className="w-6 h-6" />,
|
||||
description: "Executed successful market launch with comprehensive marketing strategy and customer onboarding.",
|
||||
details: "Coordinated launch campaign targeting South Asian communities globally. Implemented customer acquisition strategies, vendor onboarding programs, and community building initiatives. Established ongoing support and feature enhancement roadmap."
|
||||
}
|
||||
];
|
||||
coreFeatures: [
|
||||
{
|
||||
title: "Rental Marketplace",
|
||||
description:
|
||||
"Rent premium South Asian clothing for special occasions, making high-quality fashion both accessible and affordable.",
|
||||
icon: <ShoppingBag className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
title: "Buy & Sell Platform",
|
||||
description:
|
||||
"Shop new and pre-loved clothing from trusted sellers, with secure payment processing for a safe experience.",
|
||||
icon: <Repeat className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
title: "Sustainable Fashion Focus",
|
||||
description:
|
||||
"Champion circular fashion by encouraging garment reuse and extending lifespan within the community.",
|
||||
icon: <Leaf className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
title: "Authentic South Asian Styles",
|
||||
description:
|
||||
"Discover curated collections blending traditional and contemporary South Asian clothing and accessories.",
|
||||
icon: <Sparkles className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
title: "Size & Fit Matching",
|
||||
description:
|
||||
"Advanced size recommendation system that helps customers find the perfect fit effortlessly.",
|
||||
icon: <Ruler className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
title: "Community Reviews",
|
||||
description:
|
||||
"Reliable ratings and detailed feedback from verified buyers and renters, fostering trust and informed choices.",
|
||||
icon: <Star className="w-6 h-6" />
|
||||
}
|
||||
],
|
||||
developmentPhases: [
|
||||
{
|
||||
phase: "Approach",
|
||||
duration: "Ongoing",
|
||||
description: "Agile methodology with 2-week sprints ensuring flexibility and rapid iteration.",
|
||||
icon: <Repeat className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
phase: "Collaboration",
|
||||
duration: "Throughout project",
|
||||
description: "Seamless teamwork using Slack, Jira, and Figma for communication and design collaboration.",
|
||||
icon: <Users className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
phase: "Testing",
|
||||
duration: "Parallel with development",
|
||||
description: "Automated unit and integration testing, with cross-device verification via Firebase Test Lab.",
|
||||
icon: <TestTube className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
phase: "Security",
|
||||
duration: "Continuous",
|
||||
description: "Payment PCI DSS compliance and end-to-end encryption for sensitive data handling.",
|
||||
icon: <ShieldCheck className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
phase: "Testing & QA",
|
||||
duration: "1 week",
|
||||
description: "Comprehensive testing, bug fixes, and performance optimization",
|
||||
icon: <CheckCircle className="w-5 h-5" />
|
||||
}
|
||||
],
|
||||
resultsMetrics: [
|
||||
{ label: "App Downloads", value: "12K+", description: "Within 3 months of launch" },
|
||||
{ label: "Conversion Rate", value: "68%", description: "From lookbook view to product page" },
|
||||
{ label: "Repeat Purchases", value: "40%", description: "Within first 60 days" },
|
||||
{ label: "Session Duration", value: "7.5 min", description: "Average time per session" },
|
||||
{ label: "Vendor Satisfaction", value: "4.6/5", description: "Average vendor rating" },
|
||||
],
|
||||
technicalAchievements: [
|
||||
"Built seasonal tagging & curation system for automated campaigns",
|
||||
"Reduced image load time by 53% using AWS CloudFront caching",
|
||||
"Payment gateway integration with automatic vendor revenue split",
|
||||
],
|
||||
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 SeezunProject = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 bg-background overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
|
||||
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
||||
{/* Back Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/case-studies')}
|
||||
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Case Studies
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-6 leading-tight">
|
||||
<span className="text-accent">Seezun:</span>{" "}
|
||||
Your Seasonal Fashion & Lifestyle Hub
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-6 leading-relaxed">
|
||||
Rent, Buy, or Sell South Asian Clothing
|
||||
</p>
|
||||
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||||
<PortfolioHero
|
||||
title={projectData.hero.title}
|
||||
subtitle={projectData.hero.subtitle}
|
||||
subtitleTwo={projectData.hero.subtitleTwo}
|
||||
imageUrl={seezunImage}
|
||||
imageAlt={projectData.hero.imageAlt}
|
||||
/>
|
||||
|
||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
||||
Discover a new way to update your wardrobe, rent, buy, or sell both new and preloved South Asian outfits on Seezun. Enjoy simple, seamless exchanges for every style and every occasion.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
|
||||
South Asian Style
|
||||
</span>
|
||||
<span className="px-3 py-2 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
||||
E-commerce
|
||||
</span>
|
||||
<span className="px-3 py-2 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
||||
Marketplace
|
||||
</span>
|
||||
<span className="px-3 py-2 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
||||
Fashion
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
{/* Section 2: Project Details */}
|
||||
<PortfolioProjectDetails
|
||||
details={projectData.details}
|
||||
achievements={projectData.achievements}
|
||||
/>
|
||||
|
||||
{/* Project Image */}
|
||||
<motion.div
|
||||
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"
|
||||
>
|
||||
<ImageWithFallback
|
||||
src={seezunImage}
|
||||
alt="Seezun mobile app showcasing South Asian clothing rental marketplace with woman in traditional red saree"
|
||||
className="w-full h-full object-contain object-center rounded-[10px]"
|
||||
/>
|
||||
</motion.div>
|
||||
{/* Executive Summary */}
|
||||
<PortfolioExecutiveSummary
|
||||
content={projectData.executiveSummary.content}
|
||||
/>
|
||||
|
||||
{/* Project Overview */}
|
||||
<section className="py-24 bg-background">
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
<div className="max-w-6xl mx-auto text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
Project Overview
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-12">
|
||||
<PortfolioProjectOverview
|
||||
icon={<Globe className="w-8 h-8 text-accent" />}
|
||||
title="Background & Context"
|
||||
description="Access to premium South Asian fashion is often limited by high costs, low availability, and the lack of trusted rental or resale options. This platform bridges that gap by making luxury ethnic wear accessible, affordable, and sustainable for all."
|
||||
borderColor="border-accent/20"
|
||||
hoverColor="accent"
|
||||
/>
|
||||
|
||||
<PortfolioProjectOverview
|
||||
icon={<Users className="w-8 h-8 text-blue-400" />}
|
||||
title="Target Audience"
|
||||
description="Fashion-conscious individuals and South Asian communities seeking affordable access to premium traditional and contemporary clothing through renting, buying, or selling."
|
||||
borderColor="border-blue-400/20"
|
||||
hoverColor="blue-400"
|
||||
/>
|
||||
|
||||
<PortfolioProjectOverview
|
||||
icon={<Target className="w-8 h-8 text-green-400" />}
|
||||
title="Business Objectives"
|
||||
points={projectData.businessObjectives}
|
||||
borderColor="border-green-400/20"
|
||||
hoverColor="green-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Metrics Section */}
|
||||
<section className="py-16 bg-card/30">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="grid md:grid-cols-3 gap-8"
|
||||
>
|
||||
{projectMetrics.map((metric, index) => (
|
||||
<motion.div
|
||||
key={metric.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="flex justify-center mb-4 text-accent">
|
||||
{metric.icon}
|
||||
</div>
|
||||
<div className="text-3xl font-semibold text-foreground mb-2">
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-lg font-medium text-foreground mb-1">
|
||||
{metric.label}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{metric.description}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Core Features */}
|
||||
<PortfolioCoreFeatures
|
||||
title="Core Features & Functionality"
|
||||
subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
|
||||
features={projectData.coreFeatures}
|
||||
/>
|
||||
|
||||
{/* Main Content Section */}
|
||||
<section className="py-20 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
|
||||
Transfigured the South Asian Clothing Market in Seezun
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.
|
||||
</p>
|
||||
</motion.div>
|
||||
{/* Challenges & Solution Architecture */}
|
||||
<PortfolioChallengeSolution
|
||||
challenges={[
|
||||
{
|
||||
icon: <Cpu className="w-6 h-6" />,
|
||||
title: "Technical Challenges",
|
||||
description: "Building a real-time AI recommendation engine within MVP timelines, implementing split-payment workflows across multiple vendors, and optimizing media-heavy seasonal lookbooks for mobile.",
|
||||
},
|
||||
{
|
||||
icon: <Split className="w-6 h-6" />,
|
||||
title: "Project Management Challenges",
|
||||
description: "Coordinating between fashion consultants, AI developers, and backend engineers, while managing seasonal content updates without downtime.",
|
||||
},
|
||||
]}
|
||||
|
||||
{/* Key Features */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-20"
|
||||
>
|
||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
||||
Key Features & Capabilities
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{keyFeatures.map((feature, index) => (
|
||||
<motion.div
|
||||
key={feature.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-card/50 rounded-[10px] p-6 border border-border/50"
|
||||
>
|
||||
<h4 className="text-lg font-semibold text-foreground mb-3">
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
technologyStack={[
|
||||
{ icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: React native (mobile), React.js (Webapp)" },
|
||||
{ icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Laravel (PHP) with modular microservices" },
|
||||
{ icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MySQL" },
|
||||
{ icon: <Cloud className="w-5 h-5 text-accent" />, label: "Cloud: AWS EC2, CloudFront, S3 (for media)" },
|
||||
]}
|
||||
highlights={[
|
||||
{ text: "Premium South Asian clothing rentals for every occasion" },
|
||||
{ text: "Secure buy & sell platform for new and pre-loved fashion" },
|
||||
{ text: "Sustainable circular fashion promoting garment reuse" },
|
||||
{ text: "Advanced size matching with authentic community reviews" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Project Delivery Process */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
||||
Project Delivery Lifecycle
|
||||
</h3>
|
||||
<div className="relative">
|
||||
{/* Continuous background line */}
|
||||
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/30 via-accent/20 to-accent/30 hidden lg:block" />
|
||||
{/* Animated line overlay */}
|
||||
<motion.div
|
||||
initial={{ scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
transition={{ duration: 1.5, delay: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/50 via-accent/30 to-accent/50 hidden lg:block origin-top"
|
||||
/>
|
||||
|
||||
<div className="space-y-8 lg:space-y-10">
|
||||
{processPhases.map((phase, index) => (
|
||||
<motion.div
|
||||
key={phase.phase}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
{/* Mobile connection line */}
|
||||
{index < processPhases.length - 1 && (
|
||||
<div className="absolute left-6 top-16 w-0.5 h-16 bg-gradient-to-b from-accent/40 to-accent/20 lg:hidden" />
|
||||
)}
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Phase indicator with fixed width container */}
|
||||
<div className="flex items-center gap-4 lg:w-[220px] lg:flex-shrink-0">
|
||||
{/* Icon with background to mask the line */}
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-center w-12 h-12 bg-background border-2 border-accent/50 rounded-full flex-shrink-0 shadow-lg">
|
||||
<div className="text-accent">
|
||||
{phase.icon}
|
||||
</div>
|
||||
</div>
|
||||
{/* Icon glow effect */}
|
||||
<div className="absolute inset-0 flex items-center justify-center w-12 h-12 bg-accent/10 rounded-full -z-10 animate-pulse" />
|
||||
{/* Connection dot for timeline */}
|
||||
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-accent rounded-full -z-20 hidden lg:block" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 lg:flex-initial">
|
||||
<div className="text-sm font-medium text-accent mb-1 flex items-center gap-2">
|
||||
<span className="w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center text-xs text-accent font-bold">
|
||||
{index + 1}
|
||||
</span>
|
||||
{phase.phase}
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-foreground leading-tight">
|
||||
{phase.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content with consistent left alignment */}
|
||||
<div className="flex-1 bg-card/30 rounded-[10px] p-6 border border-border/30 lg:ml-0">
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
{phase.description}
|
||||
</p>
|
||||
|
||||
<p className="text-muted-foreground/80 leading-relaxed text-sm">
|
||||
{phase.details}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Development Process */}
|
||||
<PortfolioDevelopmentProcess
|
||||
title="Development Process & Methodology"
|
||||
subtitle=""
|
||||
phases={projectData.developmentPhases}
|
||||
/>
|
||||
|
||||
{/* Results & Impact */}
|
||||
<PortfolioResultsImpact
|
||||
title="Results & Business Impact"
|
||||
subtitle="The platform has revolutionized access to South Asian fashion by driving higher rental engagement, boosting resale transactions, expanding vendor participation, and promoting sustainable wardrobe practices across the community."
|
||||
metrics={projectData.resultsMetrics}
|
||||
achievements={projectData.technicalAchievements}
|
||||
/>
|
||||
|
||||
{/* Lessons Learned */}
|
||||
<PortfolioLessonsSection
|
||||
title="Lessons Learned"
|
||||
description="Key insights and learnings from the RanOutOf development journey."
|
||||
workedTitle="What Worked Well"
|
||||
workedIcon={<CheckCircle className="w-6 h-6" />}
|
||||
workedColor="#22c55e" // Tailwind green-500
|
||||
workedLessons={[
|
||||
"Seamless Rentals and Bargaining Feature",
|
||||
"Seasonal lookbooks increased browsing time and purchase intent",
|
||||
"Vendor self-management tools reduced admin workload",
|
||||
]}
|
||||
improveTitle="Areas for Improvement"
|
||||
improveIcon={<ArrowRight className="w-6 h-6" />}
|
||||
improveColor="#eab308" // Tailwind yellow-500
|
||||
improveLessons={[
|
||||
"More robust A/B testing for recommendation algorithms",
|
||||
"Expand seasonal tagging into hyperlocal weather-based recommendations",
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Future Roadmap */}
|
||||
<PortfolioRoadmapSection
|
||||
title="Future Roadmap"
|
||||
description="Planned enhancements and features to further revolutionize grocery management apps."
|
||||
roadmapItems={projectData.futureRoadmap}
|
||||
icon={<ArrowRight className="w-5 h-5" />}
|
||||
/>
|
||||
|
||||
{/* Client Testimonial */}
|
||||
<PortfolioTestimonial
|
||||
logo={seezunLogo}
|
||||
alt="Seezun Logo"
|
||||
rating={5}
|
||||
testimonial="“WDI delivered a cutting-edge, scalable platform that exceeded expectations. Their AI integration and vendor management tools gave us a strong advantage in the fashion-tech market. Their expertise and responsiveness made them a trusted partner throughout the project.”"
|
||||
clientName="Urmila"
|
||||
clientRole=" Product Manager, Seezun"
|
||||
/>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-card/30">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<section className="py-24 bg-background">
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center max-w-3xl mx-auto"
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-6">
|
||||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||
Ready to Transform Your Fashion Marketplace?
|
||||
</h3>
|
||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
|
||||
Let's create a sustainable fashion platform together. From concept to launch, we'll help you build a marketplace that revolutionizes how people shop, rent, and sell clothing.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
|
||||
onClick={() => navigate('/start-a-project')}
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={() => navigate('/contact-us')}
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground"
|
||||
>
|
||||
Start Your Project <ExternalLink className="w-4 h-4 ml-2" />
|
||||
Start Your Project
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
<Button
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-border hover:bg-muted px-8 py-3 rounded-[10px]"
|
||||
onClick={() => navigate('/case-studies')}
|
||||
className="border-accent/30 text-accent hover:bg-accent/10"
|
||||
>
|
||||
View More Case Studies
|
||||
<ExternalLink className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,397 +1,413 @@
|
||||
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, Users, BookOpen, TrendingUp, Search, Figma, Zap, Shield, Settings, Rocket, PlayCircle, Heart, Star } 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 wokaImage from "../src/images/woka-side-award.webp"
|
||||
import {
|
||||
Activity,
|
||||
AlertTriangle,
|
||||
ArrowRight,
|
||||
BarChart,
|
||||
Bell,
|
||||
Brain,
|
||||
CheckCircle,
|
||||
Cloud,
|
||||
CloudCog,
|
||||
Code,
|
||||
Cpu,
|
||||
Database,
|
||||
ExternalLink,
|
||||
Film,
|
||||
Gamepad,
|
||||
Globe,
|
||||
Home,
|
||||
List,
|
||||
Mic,
|
||||
Palette,
|
||||
PlayCircle,
|
||||
RefreshCcw,
|
||||
Repeat,
|
||||
Scan,
|
||||
Server,
|
||||
Share2,
|
||||
ShieldCheck,
|
||||
Smartphone,
|
||||
Split,
|
||||
Target,
|
||||
TestTube,
|
||||
Users,
|
||||
Zap
|
||||
} from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Button } from "../components/ui/button";
|
||||
import wokaImage from "../src/images/woka-side-award.webp";
|
||||
import wokaLogo from "../src/images/woka-logo.png";
|
||||
|
||||
// Project data
|
||||
|
||||
const projectMetrics = [
|
||||
{
|
||||
icon: <PlayCircle className="w-8 h-8" />,
|
||||
label: "Active Young Learners",
|
||||
value: "100K+",
|
||||
description: "Kids engaged in learning activities"
|
||||
const projectData = {
|
||||
hero: {
|
||||
title: "Woka - Changing the Way Kids Learn and Play",
|
||||
subtitle: "Animated Shows, Video Games, and Web Series for Kids",
|
||||
subtitleTwo: "Transform learning into an exciting adventure. Offering a wide range of animated content, interactive video games, and engaging web series, every feature is crafted to inspire and educate children through playful experiences.",
|
||||
imageUrl: wokaImage,
|
||||
imageAlt: "Woka App Showcase"
|
||||
},
|
||||
{
|
||||
icon: <Heart className="w-8 h-8" />,
|
||||
label: "User Retention",
|
||||
value: "+300%",
|
||||
description: "Increase in daily active users"
|
||||
details: {
|
||||
technologies: [
|
||||
{ name: "Swift (iOS)", icon: <Smartphone className="w-4 h-4" /> },
|
||||
{ name: "Kotlin (Android)", icon: <Smartphone className="w-4 h-4" /> },
|
||||
{ name: "Node.js", icon: <Server className="w-4 h-4" /> },
|
||||
{ name: "MongoDB", icon: <Database className="w-4 h-4" /> },
|
||||
{ name: "AWS", icon: <Cloud className="w-4 h-4" /> },
|
||||
{ name: "Firebase Analytics", icon: <BarChart className="w-4 h-4" /> }
|
||||
],
|
||||
industries: ["Edtech", "Entertainment"],
|
||||
duration: "6 months, November 2023 – April 2024",
|
||||
teamSize: "4 Mobile Developers, 1 Backend Developer, 1 Designer, 1 QA Engineer, 1 PM",
|
||||
platforms: ["iOS", "Android"]
|
||||
},
|
||||
{
|
||||
icon: <Star className="w-8 h-8" />,
|
||||
label: "Parent Satisfaction",
|
||||
value: "95%",
|
||||
description: "Parents recommend Woka"
|
||||
}
|
||||
];
|
||||
|
||||
const keyFeatures = [
|
||||
{
|
||||
title: "Animated Learning Content",
|
||||
description: "Engaging animated shows that make learning fun and memorable for kids of all ages."
|
||||
achievements: [
|
||||
{
|
||||
label: "Reduced App Load Time",
|
||||
value: "47%",
|
||||
description: "Faster startup enhancing user experience",
|
||||
},
|
||||
{
|
||||
label: "Crash-Free Sessions",
|
||||
value: "99.8%",
|
||||
description: "Ensured app stability and reliability",
|
||||
},
|
||||
{
|
||||
label: "Active Young Learners",
|
||||
value: "100K+",
|
||||
description: "Kids engaged in learning activities",
|
||||
},
|
||||
{
|
||||
label: "User Retention",
|
||||
value: "+300%",
|
||||
description: "Increase in daily active users",
|
||||
},
|
||||
{
|
||||
label: "Parent Satisfaction",
|
||||
value: "95%",
|
||||
description: "Parents recommend Woka",
|
||||
},
|
||||
],
|
||||
executiveSummary: {
|
||||
content: "Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly."
|
||||
},
|
||||
{
|
||||
title: "Interactive Video Games",
|
||||
description: "Educational games that combine entertainment with learning objectives and skill development."
|
||||
},
|
||||
{
|
||||
title: "Educational Web Series",
|
||||
description: "Structured learning content delivered through engaging episodic format."
|
||||
},
|
||||
{
|
||||
title: "Safe Learning Environment",
|
||||
description: "Child-friendly platform with robust safety measures and parental controls."
|
||||
},
|
||||
{
|
||||
title: "Progress Tracking",
|
||||
description: "Comprehensive analytics for parents and educators to monitor learning progress."
|
||||
},
|
||||
{
|
||||
title: "Multi-Device Compatibility",
|
||||
description: "Seamless experience across tablets, smartphones, and computers."
|
||||
}
|
||||
];
|
||||
businessObjectives: [
|
||||
"Redevelop app natively for optimized performance",
|
||||
"Update UI/UX to match modern design standards",
|
||||
"Ensure backend stability and reduce downtime",
|
||||
"Implement monitoring & analytics for continuous improvement"
|
||||
],
|
||||
coreFeatures: [
|
||||
{
|
||||
title: "Animated Learning Content",
|
||||
description: "Engaging animated shows that make learning fun and memorable for kids of all ages.",
|
||||
icon: <Film className="w-6 h-6" /> // 🎬 Animated shows icon
|
||||
},
|
||||
{
|
||||
title: "Interactive Video Games",
|
||||
description: "Educational games that combine entertainment with learning objectives and skill development.",
|
||||
icon: <Gamepad className="w-6 h-6" /> // 🎮 Game icon
|
||||
},
|
||||
{
|
||||
title: "Educational Web Series",
|
||||
description: "Structured learning content delivered through engaging episodic format.",
|
||||
icon: <PlayCircle className="w-6 h-6" /> // ▶️ Video/Web series icon
|
||||
},
|
||||
{
|
||||
title: "Safe Learning Environment",
|
||||
description: "Child-friendly platform with robust safety measures and parental controls.",
|
||||
icon: <ShieldCheck className="w-6 h-6" /> // 🛡️ Safety icon
|
||||
},
|
||||
{
|
||||
title: "Progress Tracking",
|
||||
description: "Comprehensive analytics for parents and educators to monitor learning progress.",
|
||||
icon: <BarChart className="w-6 h-6" /> // 📊 Analytics icon
|
||||
},
|
||||
{
|
||||
title: "Multi-Device Compatibility",
|
||||
description: "Seamless experience across tablets, smartphones, and computers.",
|
||||
icon: <Smartphone className="w-6 h-6" /> // 📱 Devices icon
|
||||
}
|
||||
],
|
||||
developmentPhases: [
|
||||
{
|
||||
phase: "Approach & Planning",
|
||||
duration: "Ongoing",
|
||||
description: "Agile methodology with phased module redevelopment to ensure smooth migration and feature parity.",
|
||||
icon: <Repeat className="w-5 h-5" /> // 🔁 Agile / iterative process
|
||||
},
|
||||
{
|
||||
phase: "Sprints",
|
||||
duration: "2-week cycles",
|
||||
description: "Feature parity milestones achieved in each sprint to maintain continuity and user experience.",
|
||||
icon: <Activity className="w-5 h-5" /> // ⚡ Sprint cycles icon
|
||||
},
|
||||
{
|
||||
phase: "Testing",
|
||||
duration: "Throughout development",
|
||||
description: "Unit, integration, and device lab testing to ensure stability and performance across all modules.",
|
||||
icon: <TestTube className="w-5 h-5" /> // 🧪 Testing icon
|
||||
},
|
||||
{
|
||||
phase: "Deployment",
|
||||
duration: "Phased release",
|
||||
description: "App Store & Play Store releases with feature toggles for controlled rollout.",
|
||||
icon: <CloudCog className="w-5 h-5" /> // ☁️ Deployment icon
|
||||
},
|
||||
{
|
||||
phase: "Testing & QA",
|
||||
duration: "1 week",
|
||||
description: "Comprehensive testing, bug fixes, and performance optimization",
|
||||
icon: <CheckCircle className="w-5 h-5" />
|
||||
}
|
||||
],
|
||||
resultsMetrics: [
|
||||
{ label: "Load Time", value: "<1.5s", description: "95% of screens load quickly" },
|
||||
{ label: "Crash-free Sessions", value: "99.9%", description: "Industry-leading stability" },
|
||||
{ label: "Feature Adoption", value: "70%", description: "Users adopt recurring lists" },
|
||||
{ label: "User Satisfaction", value: "4.8/5", description: "Average app store rating" },
|
||||
{ label: "Daily Active Users", value: "85%", description: "Strong user engagement" },
|
||||
{ label: "Learning Progress Accuracy", value: "92%", description: "Smart tracking precision" }
|
||||
],
|
||||
technicalAchievements: [
|
||||
"Migrated from hybrid to native with zero data loss",
|
||||
"Implemented CDN-based media delivery for faster load times",
|
||||
"Added modular codebase for easier maintenance and feature rollout",
|
||||
],
|
||||
futureRoadmap: [
|
||||
{
|
||||
phase: "Next 6 Months",
|
||||
features: [
|
||||
"Dark mode support",
|
||||
"Advanced search & filters for events",
|
||||
"In-app community chat"
|
||||
]
|
||||
},
|
||||
{
|
||||
phase: "Next 12 Months",
|
||||
features: [
|
||||
"AI-powered event recommendations",
|
||||
"Multi-language support",
|
||||
"Gamification with rewards system"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const processPhases = [
|
||||
{
|
||||
phase: "Phase 1",
|
||||
title: "Educational Research & Analysis",
|
||||
icon: <Search className="w-6 h-6" />,
|
||||
description: "Conducted comprehensive research on educational methodologies and children's learning patterns.",
|
||||
details: "Analyzed current edutainment market, identified learning gaps, and collaborated with educational experts to define age-appropriate content strategies. Developed comprehensive understanding of child psychology and learning preferences."
|
||||
},
|
||||
{
|
||||
phase: "Phase 2",
|
||||
title: "Child-Centric Design",
|
||||
icon: <Figma className="w-6 h-6" />,
|
||||
description: "Created intuitive, colorful, and engaging user interfaces specifically designed for children.",
|
||||
details: "Developed interactive prototypes with focus on accessibility and ease of use. Implemented child-friendly navigation patterns, vibrant color schemes, and engaging visual elements that stimulate learning and exploration."
|
||||
},
|
||||
{
|
||||
phase: "Phase 3",
|
||||
title: "Platform Development",
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
description: "Built robust learning platform with streaming capabilities, game engines, and content management systems.",
|
||||
details: "Implemented scalable architecture supporting high-quality video streaming, interactive games, and real-time progress tracking. Developed content delivery systems optimized for various devices and network conditions."
|
||||
},
|
||||
{
|
||||
phase: "Phase 4",
|
||||
title: "Safety & Security Testing",
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
description: "Implemented comprehensive child safety measures and parental control systems.",
|
||||
details: "Conducted thorough security audits focusing on child protection protocols. Implemented content filtering, screen time management, and robust privacy controls. Ensured compliance with children's online safety regulations."
|
||||
},
|
||||
{
|
||||
phase: "Phase 5",
|
||||
title: "Content Management & Analytics",
|
||||
icon: <Settings className="w-6 h-6" />,
|
||||
description: "Deployed content management systems with real-time analytics and performance monitoring.",
|
||||
details: "Established automated content delivery pipelines and learning analytics dashboard. Implemented real-time monitoring for content performance, user engagement, and learning outcomes measurement."
|
||||
},
|
||||
{
|
||||
phase: "Phase 6",
|
||||
title: "Launch & Community Building",
|
||||
icon: <Rocket className="w-6 h-6" />,
|
||||
description: "Executed successful launch strategy with focus on educational community engagement.",
|
||||
details: "Coordinated launch campaign targeting parents, educators, and schools. Established partnerships with educational institutions and content creators. Implemented feedback systems for continuous improvement and community building."
|
||||
}
|
||||
];
|
||||
|
||||
export const WokaProject = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
{/* <Navigation /> */}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-24 pb-16 bg-background overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
|
||||
<div className="relative z-10 container mx-auto px-6 lg:px-8">
|
||||
{/* Back Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigate('/')}
|
||||
className="text-muted-foreground hover:text-foreground flex items-center gap-2 px-0"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Case Studies
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h1 className="text-4xl lg:text-6xl font-semibold text-foreground mb-6 leading-tight">
|
||||
Change the Way Kids Learn and Play with{" "}
|
||||
<span className="text-accent">Woka</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-6 leading-relaxed">
|
||||
Animated Shows, Video Games, and Web Series for Kids
|
||||
</p>
|
||||
{/* Section 1: Hero with Heading, Subheading, and Image */}
|
||||
<PortfolioHero
|
||||
title={projectData.hero.title}
|
||||
subtitle={projectData.hero.subtitle}
|
||||
subtitleTwo={projectData.hero.subtitleTwo}
|
||||
imageUrl={projectData.hero.imageUrl}
|
||||
imageAlt={projectData.hero.imageAlt}
|
||||
/>
|
||||
|
||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
||||
Woka makes learning a fun and exciting experience. From animated content to interactive video games and engaging web series, every feature is designed to inspire kids while playing.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
|
||||
+300% User Retention
|
||||
</span>
|
||||
<span className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
||||
Education
|
||||
</span>
|
||||
<span className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
||||
Learning Platform
|
||||
</span>
|
||||
<span className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]">
|
||||
Kids
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
{/* Section 2: Project Details */}
|
||||
<PortfolioProjectDetails
|
||||
details={projectData.details}
|
||||
achievements={projectData.achievements}
|
||||
/>
|
||||
|
||||
{/* Project Image */}
|
||||
<motion.div
|
||||
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"
|
||||
>
|
||||
<ImageWithFallback
|
||||
src={wokaImage}
|
||||
alt="Woka educational platform mobile app interface showing interactive learning features and Bharat Gaurav Award recognition"
|
||||
className="w-full h-full object-contain object-center rounded-[10px]"
|
||||
/>
|
||||
</motion.div>
|
||||
{/* Executive Summary */}
|
||||
<PortfolioExecutiveSummary
|
||||
content={projectData.executiveSummary.content}
|
||||
/>
|
||||
|
||||
{/* Project Overview */}
|
||||
<section className="py-24 bg-background">
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
<div className="max-w-6xl mx-auto text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||
Project Overview
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground leading-relaxed">
|
||||
Woka, an education-focused platform, faced stability issues, outdated components, and limitations in scaling. WDI was engaged to rebuild the app natively for iOS and Android, enhance backend systems, and implement a sustainable maintenance framework.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-12">
|
||||
<PortfolioProjectOverview
|
||||
icon={<Globe className="w-8 h-8 text-accent" />}
|
||||
title="Background & Context"
|
||||
description="Access to engaging educational content for children is often limited or inconsistent. Woka was created to provide a safe, interactive, and mobile-first learning platform, combining animated shows, educational games, and structured lessons to enhance learning outcomes and parent engagement."
|
||||
borderColor="border-accent/20"
|
||||
hoverColor="accent"
|
||||
/>
|
||||
|
||||
<PortfolioProjectOverview
|
||||
icon={<Users className="w-8 h-8 text-blue-400" />}
|
||||
title="Target Audience"
|
||||
description="Learners, parents, and educators seeking accessible educational content and resources. Users actively engage with interactive lessons, school activities, and collaborative learning communities. A mobile-first audience that values seamless performance, personalized learning, and real-time progress tracking."
|
||||
borderColor="border-blue-400/20"
|
||||
hoverColor="blue-400"
|
||||
/>
|
||||
|
||||
<PortfolioProjectOverview
|
||||
icon={<Target className="w-8 h-8 text-green-400" />}
|
||||
title="Business Objectives"
|
||||
points={projectData.businessObjectives}
|
||||
borderColor="border-green-400/20"
|
||||
hoverColor="green-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Metrics Section */}
|
||||
<section className="py-16 bg-card/30">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="grid md:grid-cols-3 gap-8"
|
||||
>
|
||||
{projectMetrics.map((metric, index) => (
|
||||
<motion.div
|
||||
key={metric.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="flex justify-center mb-4 text-accent">
|
||||
{metric.icon}
|
||||
</div>
|
||||
<div className="text-3xl font-semibold text-foreground mb-2">
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-lg font-medium text-foreground mb-1">
|
||||
{metric.label}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{metric.description}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
{/* Core Features */}
|
||||
<PortfolioCoreFeatures
|
||||
title="Core Features & Functionality"
|
||||
subtitle="A comprehensive suite of tools designed to revolutionize household grocery management with smart automation and collaboration."
|
||||
features={projectData.coreFeatures}
|
||||
/>
|
||||
|
||||
{/* Main Content Section */}
|
||||
<section className="py-20 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6">
|
||||
Redefining Edutainment with Woka
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed">
|
||||
Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly.
|
||||
</p>
|
||||
</motion.div>
|
||||
{/* Challenges & Solution Architecture */}
|
||||
<PortfolioChallengeSolution
|
||||
challenges={[
|
||||
{
|
||||
icon: <Cpu className="w-6 h-6 text-accent" />,
|
||||
title: "Technical Challenges",
|
||||
description: "Migrating from hybrid codebase to fully native apps without disrupting user base, retaining existing user data and preferences, and optimizing image-heavy event feed for mobile performance."
|
||||
},
|
||||
{
|
||||
icon: <Split className="w-6 h-6 text-accent" />,
|
||||
title: "Project Management Challenges",
|
||||
description: "Coordinating phased rollout to avoid downtime and maintaining feature parity across platforms."
|
||||
}
|
||||
]}
|
||||
|
||||
{/* Key Features */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-20"
|
||||
>
|
||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
||||
Key Features & Capabilities
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{keyFeatures.map((feature, index) => (
|
||||
<motion.div
|
||||
key={feature.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-card/50 rounded-[10px] p-6 border border-border/50"
|
||||
>
|
||||
<h4 className="text-lg font-semibold text-foreground mb-3">
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
technologyStack={[
|
||||
{ icon: <Smartphone className="w-5 h-5 text-accent" />, label: "Frontend: Native Swift (iOS), Kotlin (Android)" },
|
||||
{ icon: <Server className="w-5 h-5 text-accent" />, label: "Backend: Node.js, Express" },
|
||||
{ icon: <Database className="w-5 h-5 text-accent" />, label: "Database: MongoDB" },
|
||||
{ icon: <Cloud className="w-5 h-5 text-accent" />, label: "Hosting: AWS EC2 + S3" },
|
||||
{ icon: <Activity className="w-5 h-5 text-accent" />, label: "Monitoring: Firebase, AWS CloudWatch" }
|
||||
]}
|
||||
|
||||
{/* Project Delivery Process */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-8">
|
||||
Project Delivery Lifecycle
|
||||
</h3>
|
||||
<div className="relative">
|
||||
{/* Continuous background line */}
|
||||
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/30 via-accent/20 to-accent/30 hidden lg:block" />
|
||||
{/* Animated line overlay */}
|
||||
<motion.div
|
||||
initial={{ scaleY: 0 }}
|
||||
whileInView={{ scaleY: 1 }}
|
||||
transition={{ duration: 1.5, delay: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute left-6 top-6 bottom-6 w-0.5 bg-gradient-to-b from-accent/50 via-accent/30 to-accent/50 hidden lg:block origin-top"
|
||||
/>
|
||||
|
||||
<div className="space-y-8 lg:space-y-10">
|
||||
{processPhases.map((phase, index) => (
|
||||
<motion.div
|
||||
key={phase.phase}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.01 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative"
|
||||
>
|
||||
{/* Mobile connection line */}
|
||||
{index < processPhases.length - 1 && (
|
||||
<div className="absolute left-6 top-16 w-0.5 h-16 bg-gradient-to-b from-accent/40 to-accent/20 lg:hidden" />
|
||||
)}
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Phase indicator with fixed width container */}
|
||||
<div className="flex items-center gap-4 lg:w-[220px] lg:flex-shrink-0">
|
||||
{/* Icon with background to mask the line */}
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-center w-12 h-12 bg-background border-2 border-accent/50 rounded-full flex-shrink-0 shadow-lg">
|
||||
<div className="text-accent">
|
||||
{phase.icon}
|
||||
</div>
|
||||
</div>
|
||||
{/* Icon glow effect */}
|
||||
<div className="absolute inset-0 flex items-center justify-center w-12 h-12 bg-accent/10 rounded-full -z-10 animate-pulse" />
|
||||
{/* Connection dot for timeline */}
|
||||
<div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-accent rounded-full -z-20 hidden lg:block" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 lg:flex-initial">
|
||||
<div className="text-sm font-medium text-accent mb-1 flex items-center gap-2">
|
||||
<span className="w-5 h-5 bg-accent/20 rounded-full flex items-center justify-center text-xs text-accent font-bold">
|
||||
{index + 1}
|
||||
</span>
|
||||
{phase.phase}
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-foreground leading-tight">
|
||||
{phase.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content with consistent left alignment */}
|
||||
<div className="flex-1 bg-card/30 rounded-[10px] p-6 border border-border/30 lg:ml-0">
|
||||
<p className="text-muted-foreground leading-relaxed mb-4">
|
||||
{phase.description}
|
||||
</p>
|
||||
|
||||
<p className="text-muted-foreground/80 leading-relaxed text-sm">
|
||||
{phase.details}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
highlights={[
|
||||
{ text: "Performance Boost: Reduced API latency, improved app loading speed by 47%, crash-free sessions up to 99.8%." },
|
||||
{ text: "Modern UI Experience: Introduced updated design components, typography, and improved navigation flow." },
|
||||
{ text: "Real-Time Updates: Instant event & feed updates using socket connections." },
|
||||
{ text: "Monitoring & Analytics: Integrated Firebase for crash reporting, user behavior tracking, and retention analysis." }
|
||||
]}
|
||||
|
||||
|
||||
/>
|
||||
|
||||
{/* Development Process */}
|
||||
<PortfolioDevelopmentProcess
|
||||
title="Development Process & Methodology"
|
||||
subtitle="Woka follows an Agile development methodology with phased module redevelopment, 2-week sprints, and iterative testing, ensuring smooth migration, feature parity, and high-quality user experience."
|
||||
phases={projectData.developmentPhases}
|
||||
/>
|
||||
|
||||
{/* Results & Impact */}
|
||||
<PortfolioResultsImpact
|
||||
title="Results & Impact"
|
||||
subtitle="Woka demonstrates significant improvements in performance, user engagement, and learning outcomes. Key indicators include faster app load times, high crash-free sessions, strong feature adoption, and increased user satisfaction." metrics={projectData.resultsMetrics}
|
||||
achievements={projectData.technicalAchievements}
|
||||
/>
|
||||
|
||||
{/* Lessons Learned */}
|
||||
<PortfolioLessonsSection
|
||||
title="Lessons Learned"
|
||||
description="Key insights and learnings from the Woka development journey."
|
||||
workedTitle="What Worked Well"
|
||||
workedIcon={<CheckCircle className="w-6 h-6" />}
|
||||
workedColor="#22c55e" // Tailwind green-500
|
||||
workedLessons={[
|
||||
"Phased rollout reduced risk and allowed faster feedback cycles",
|
||||
"Incremental feature release helped identify issues early",
|
||||
"Continuous collaboration between teams accelerated development speed",
|
||||
]}
|
||||
improveTitle="Areas for Improvement"
|
||||
improveIcon={<ArrowRight className="w-6 h-6" />}
|
||||
improveColor="#eab308" // Tailwind yellow-500
|
||||
improveLessons={[
|
||||
"Earlier user beta testing to fine-tune event feed experience",
|
||||
"More structured feedback channels for faster iteration",
|
||||
"Enhanced onboarding tutorials to reduce user confusion",
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Future Roadmap */}
|
||||
<PortfolioRoadmapSection
|
||||
title="Future Roadmap"
|
||||
description="Planned enhancements and features to further revolutionize grocery management apps."
|
||||
roadmapItems={projectData.futureRoadmap}
|
||||
icon={<ArrowRight className="w-5 h-5" />}
|
||||
/>
|
||||
|
||||
{/* Client Testimonial */}
|
||||
<PortfolioTestimonial
|
||||
logo={wokaLogo}
|
||||
alt="RanOutOf Logo"
|
||||
rating={5}
|
||||
testimonial="“The WDI team transformed our app from slow and outdated to fast, reliable, and modern. Our users love the new experience, and the performance gains have been tremendous.”"
|
||||
clientName="Akarsh K Hebbar"
|
||||
clientRole="CEO, Woka"
|
||||
/>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-card/30">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<section className="py-24 bg-background">
|
||||
<div className="container mx-auto px-4 lg:px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center max-w-3xl mx-auto"
|
||||
className="max-w-4xl mx-auto text-center"
|
||||
>
|
||||
<h3 className="text-2xl lg:text-3xl font-semibold text-foreground mb-6">
|
||||
<h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||
Ready to Transform Children's Learning Experience?
|
||||
</h3>
|
||||
<p className="text-lg text-muted-foreground mb-8 leading-relaxed">
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground mb-12 max-w-3xl mx-auto">
|
||||
Let's create an educational platform that makes learning fun and engaging. From concept to launch, we'll help you build a platform that inspires children to learn and grow.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
|
||||
onClick={() => navigate('/start-a-project')}
|
||||
<Button
|
||||
size="lg"
|
||||
onClick={() => navigate('/contact-us')}
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground"
|
||||
>
|
||||
Start Your Project <ExternalLink className="w-4 h-4 ml-2" />
|
||||
Start Your Project
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
<Button
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-border hover:bg-muted px-8 py-3 rounded-[10px]"
|
||||
onClick={() => navigate('/case-studies')}
|
||||
className="border-accent/30 text-accent hover:bg-accent/10"
|
||||
>
|
||||
View More Case Studies
|
||||
<ExternalLink className="w-5 h-5 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* <Footer /> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user