worked on on the pages

This commit is contained in:
2026-03-27 11:13:52 +05:30
parent 3a1446ab28
commit 56b0828033
9 changed files with 423 additions and 181 deletions

View File

@@ -3,6 +3,7 @@ import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import amozImg from "../assets/amoz.jpg"
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
@@ -13,7 +14,7 @@ export const AmozProject = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
@@ -26,11 +27,11 @@ export const AmozProject = () => {
AI Social Commerce Case Study
</Badge>
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
Amoz Platform
</h1>
<p className="text-xl text-muted-foreground mb-8 font-manrope">
AI-Powered Social Commerce Platform - Merging social networking and e-commerce with AI-driven recommendations and influencer monetization capabilities
</p>
@@ -56,10 +57,21 @@ export const AmozProject = () => {
<div className="text-lg font-bold text-white font-manrope">8 experts</div>
<div className="text-xs text-muted-foreground font-manrope">Team Size</div>
</div>
<div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
{/* <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
<Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
<div className="text-lg font-bold text-white font-manrope">iOS/Android/Web</div>
<div className="text-xs text-muted-foreground font-manrope">Platforms</div>
</div> */}
<div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
<Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
<div className="text-lg font-bold text-white font-manrope break-words">
iOS/Android/Web
</div>
<div className="text-xs text-muted-foreground font-manrope">
Platforms
</div>
</div>
<div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
<DollarSign className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
@@ -86,7 +98,7 @@ export const AmozProject = () => {
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -94,7 +106,7 @@ export const AmozProject = () => {
Build Your AI Commerce Platform
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -107,8 +119,8 @@ export const AmozProject = () => {
<div className="relative">
<div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
<ImageWithFallback
src="/images/amoz-platform-mockup.jpg"
<ImageWithFallback
src={amozImg}
alt="Amoz AI-Powered Social Commerce Platform"
className="w-full h-full object-cover rounded-lg"
/>
@@ -138,7 +150,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
<div className="grid md:grid-cols-3 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -179,7 +191,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
<div className="grid md:grid-cols-2 gap-12">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
@@ -227,7 +239,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
<div className="grid md:grid-cols-2 gap-12 mb-16">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
@@ -312,43 +324,43 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
<div className="mb-12">
<div className="text-center mb-8">
<p className="text-lg text-muted-foreground font-manrope">
<strong>Agile</strong> (2-week sprints) with feature prioritization with merchant and influencer input, weekly demos for stakeholders, continuous integration with automated deployments to staging
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
phase: "Discovery & Planning",
{
phase: "Discovery & Planning",
duration: "3 weeks",
description: "Market analysis of social commerce trends, AI recommendation system design, payment integration planning"
},
{
phase: "Design & Prototyping",
{
phase: "Design & Prototyping",
duration: "5 weeks",
description: "Wireframes for influencer storefronts & live shopping pages, AI model training on sample product datasets"
},
{
phase: "Core Development",
{
phase: "Core Development",
duration: "10 weeks",
description: "Social feed & product catalog integration, influencer tools & storefronts, recommendation engine integration"
},
{
phase: "Live Shopping & Messaging",
{
phase: "Live Shopping & Messaging",
duration: "5 weeks",
description: "Real-time video streaming module, in-app chat and engagement features"
},
{
phase: "Testing & Optimization",
{
phase: "Testing & Optimization",
duration: "3 weeks",
description: "Load & stress testing for peak events, AI accuracy tuning"
},
{
phase: "Launch & Scaling",
{
phase: "Launch & Scaling",
duration: "2 weeks",
description: "Beta rollout to select merchants & influencers, marketing support and onboarding sessions"
}
@@ -379,7 +391,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{[
{
@@ -431,7 +443,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
{[
{ label: "Merchant Onboarding", value: "5,000+", icon: Users, desc: "first 2 months" },
@@ -492,7 +504,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -557,7 +569,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -608,7 +620,7 @@ export const AmozProject = () => {
Create innovative social commerce solutions that merge AI-powered recommendations with seamless shopping experiences for the next generation of consumers.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -616,7 +628,7 @@ export const AmozProject = () => {
Start Your Project
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"

View File

@@ -186,7 +186,7 @@ export const Homepage = () => {
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
We are the ai app development company, End-to-end solutions for every stage of your product lifecycle.
We are the AI app development company, End-to-end solutions for every stage of your product lifecycle.
</p>
</div>
</motion.div>

View File

@@ -4,6 +4,7 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import vib360 from "../assets/vib360.jpg"
import { ArrowRight, Calendar, Users, Smartphone, Globe, Monitor, Check, Star, TrendingUp, Factory, Shield, Zap, Settings, Target, AlertCircle, Clock, Database, Wifi, BarChart3, Bell, Activity, Wrench, Brain } from "lucide-react";
import { useNavigate } from "react-router-dom";
// import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png";
@@ -15,7 +16,7 @@ export const VIB360Project = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
@@ -28,11 +29,11 @@ export const VIB360Project = () => {
Industrial IoT Case Study
</Badge>
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
VIB360 Platform
</h1>
<p className="text-xl text-muted-foreground mb-8 font-manrope">
Industrial IoT Vibration Monitoring & Predictive Maintenance Platform - AI-enabled solution for real-time monitoring and operational efficiency
</p>
@@ -88,7 +89,7 @@ export const VIB360Project = () => {
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -96,7 +97,7 @@ export const VIB360Project = () => {
Build Your IoT Platform
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -109,8 +110,8 @@ export const VIB360Project = () => {
<div className="relative">
<div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
<img
src={vib360Image}
<img
src={vib360Image}
alt="VIB360 Industrial IoT Vibration Monitoring Platform"
className="w-full h-full object-cover rounded-lg"
/>
@@ -140,7 +141,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
<div className="grid md:grid-cols-3 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -181,7 +182,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
<div className="grid md:grid-cols-2 gap-12">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
@@ -229,7 +230,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
<div className="grid md:grid-cols-2 gap-12 mb-16">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
@@ -315,43 +316,43 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
<div className="mb-12">
<div className="text-center mb-8">
<p className="text-lg text-muted-foreground font-manrope">
<strong>Agile</strong> (2-week sprints) with sprint reviews with hardware + software teams, field testing after each major release, iterative model retraining with new sensor data
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
phase: "Discovery & Planning",
{
phase: "Discovery & Planning",
duration: "3 weeks",
description: "Hardware-software integration feasibility, AI model baseline setup"
},
{
phase: "Design & Prototyping",
{
phase: "Design & Prototyping",
duration: "5 weeks",
description: "Sensor data visualization mockups, mobile UI/UX for technician workflows"
},
{
phase: "Core Platform Development",
{
phase: "Core Platform Development",
duration: "12 weeks",
description: "Sensor connectivity modules, time-series data ingestion pipeline, web dashboard core features"
},
{
phase: "AI & Analytics Module",
{
phase: "AI & Analytics Module",
duration: "6 weeks",
description: "Model training & tuning, predictive maintenance alerts"
},
{
phase: "Integration & Testing",
{
phase: "Integration & Testing",
duration: "5 weeks",
description: "SCADA/ERP integration APIs, field testing in pilot plants"
},
{
phase: "Deployment & Training",
{
phase: "Deployment & Training",
duration: "3 weeks",
description: "Rollout to initial sites, staff training & documentation"
}
@@ -382,7 +383,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{[
{
@@ -434,7 +435,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
{[
{ label: "Site Deployments", value: "15", icon: Factory, desc: "industrial sites" },
@@ -495,7 +496,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -560,7 +561,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -611,7 +612,7 @@ export const VIB360Project = () => {
Create advanced predictive maintenance platforms with AI-enabled vibration monitoring and real-time analytics for industrial excellence.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -619,7 +620,7 @@ export const VIB360Project = () => {
Start Your Project
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"