WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

worked on on the pages

Browse Source
This commit is contained in:
Parth Ramani
2026-03-27 11:13:52 +05:30
parent 3a1446ab28
commit 56b0828033
9 changed files with 423 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/amoz.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/vib360.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

203
components/ClientLogos.tsx
View File

@@ -1,5 +1,6 @@
import { motion } from "framer-motion";
import { GridPattern } from "./GridPattern";
import Flag from 'react-world-flags';
const companyLogos = [
{ name: "TechFlow Solutions", logo: null, width: "140" },
@@ -38,90 +39,97 @@ const companyLogos = [
{ name: "InnovateLab", logo: null, width: "120" }
];
const countryFlags = [
{
name: "United States",
alt: "United States flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="18" fill="#B22234"/>
<rect width="24" height="1.38" y="1.38" fill="white"/>
<rect width="24" height="1.38" y="4.15" fill="white"/>
<rect width="24" height="1.38" y="6.92" fill="white"/>
<rect width="24" height="1.38" y="9.69" fill="white"/>
<rect width="24" height="1.38" y="12.46" fill="white"/>
<rect width="24" height="1.38" y="15.23" fill="white"/>
<rect width="9.6" height="9.69" fill="#3C3B6E"/>
</svg>
)
},
{
name: "United Kingdom",
alt: "United Kingdom flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="18" fill="#012169"/>
<path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
<path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
<path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
<path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
</svg>
)
},
{
name: "India",
alt: "India flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="6" fill="#FF9933"/>
<rect width="24" height="6" y="6" fill="white"/>
<rect width="24" height="6" y="12" fill="#138808"/>
<circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
<g transform="translate(12,9)">
{Array.from({length: 24}, (_, i) => (
<line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
))}
</g>
</svg>
)
},
{
name: "Canada",
alt: "Canada flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="6" height="18" fill="#FF0000"/>
<rect width="12" height="18" x="6" fill="white"/>
<rect width="6" height="18" x="18" fill="#FF0000"/>
<path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
</svg>
)
},
{
name: "Australia",
alt: "Australia flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="18" fill="#012169"/>
<g transform="scale(0.5)">
<rect width="24" height="9" fill="#012169"/>
<path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
<path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
<path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
<path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
</g>
<g fill="white">
<circle cx="18" cy="6" r="0.5"/>
<circle cx="20" cy="8" r="0.3"/>
<circle cx="19" cy="10" r="0.4"/>
<circle cx="21" cy="12" r="0.3"/>
<circle cx="18" cy="14" r="0.5"/>
</g>
</svg>
)
}
];
// const countryFlags = [
// {
// name: "United States",
// alt: "United States flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="24" height="18" fill="#B22234"/>
// <rect width="24" height="1.38" y="1.38" fill="white"/>
// <rect width="24" height="1.38" y="4.15" fill="white"/>
// <rect width="24" height="1.38" y="6.92" fill="white"/>
// <rect width="24" height="1.38" y="9.69" fill="white"/>
// <rect width="24" height="1.38" y="12.46" fill="white"/>
// <rect width="24" height="1.38" y="15.23" fill="white"/>
// <rect width="9.6" height="9.69" fill="#3C3B6E"/>
// </svg>
// )
// },
// {
// name: "United Kingdom",
// alt: "United Kingdom flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="24" height="18" fill="#012169"/>
// <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
// <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
// <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
// <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
// </svg>
// )
// },
// {
// name: "India",
// alt: "India flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="24" height="6" fill="#FF9933"/>
// <rect width="24" height="6" y="6" fill="white"/>
// <rect width="24" height="6" y="12" fill="#138808"/>
// <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
// <g transform="translate(12,9)">
// {Array.from({length: 24}, (_, i) => (
// <line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
// ))}
// </g>
// </svg>
// )
// },
// {
// name: "Canada",
// alt: "Canada flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="6" height="18" fill="#FF0000"/>
// <rect width="12" height="18" x="6" fill="white"/>
// <rect width="6" height="18" x="18" fill="#FF0000"/>
// <path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
// </svg>
// )
// },
// {
// name: "Australia",
// alt: "Australia flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="24" height="18" fill="#012169"/>
// <g transform="scale(0.5)">
// <rect width="24" height="9" fill="#012169"/>
// <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
// <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
// <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
// <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
// </g>
// <g fill="white">
// <circle cx="18" cy="6" r="0.5"/>
// <circle cx="20" cy="8" r="0.3"/>
// <circle cx="19" cy="10" r="0.4"/>
// <circle cx="21" cy="12" r="0.3"/>
// <circle cx="18" cy="14" r="0.5"/>
// </g>
// </svg>
// )
// }
// ];
const countryFlags = [
{ name: "United States", code: "US", alt: "United States flag" },
{ name: "United Kingdom", code: "GB", alt: "United Kingdom flag" },
{ name: "India", code: "IN", alt: "India flag" },
{ name: "Canada", code: "CA", alt: "Canada flag" },
{ name: "Australia", code: "AU", alt: "Australia flag" }
];
const ProjectImageCircles = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -136,15 +144,15 @@ const ProjectImageCircles = () => (
key={index}
initial={{ opacity: 0, scale: 0 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.5,
transition={{
duration: 0.5,
delay: 0.5 + (index * 0.1),
type: "spring",
stiffness: 200
stiffness: 200
}}
viewport={{ once: true }}
whileHover={{
scale: 1.1,
whileHover={{
scale: 1.1,
zIndex: 10,
transition: { duration: 0.2 }
}}
@@ -154,19 +162,20 @@ const ProjectImageCircles = () => (
zIndex: countryFlags.length - index
}}
>
{/* Circular container */}
<div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl">
<div
<div
className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110"
role="img"
role="img"
aria-label={flag.alt}
>
{flag.flagSvg}
<Flag code={flag.code} style={{ width: '40px', height: '30px' }} />
</div>
</div>
{/* Subtle glow effect */}
<div className="absolute inset-0 w-16 h-16 transition-opacity duration-300 rounded-full opacity-0 bg-gradient-to-br from-accent/10 to-transparent group-hover:opacity-100"></div>
{/* Tooltip */}
<div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg border border-white/10 z-50">
<div className="text-center">
@@ -181,7 +190,7 @@ const ProjectImageCircles = () => (
);
const LogoCard = ({ name, width }: { name: string; width: string }) => (
<div
<div
className="flex items-center justify-center h-16 px-6 transition-all duration-300 border shadow-lg bg-white/8 rounded-xl border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 backdrop-blur-sm group"
style={{ minWidth: `${width}px` }}
>
@@ -219,7 +228,7 @@ export const ClientLogos = () => {
return (
<section className="relative py-20 bg-[#121212] border-y border-white/5 overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="container relative z-10 px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -232,10 +241,10 @@ export const ClientLogos = () => {
Trusted by Founders and CTOs Across 15+ Countries
</h2>
</motion.div>
{/* Project Image Circles */}
<ProjectImageCircles />
{/* Company Logos Ticker */}
<div className="overflow-hidden">
<MarqueeRow logos={companyLogos} />

2
components/HeroSection.tsx
View File

@@ -71,7 +71,7 @@ export function HeroSection() {
transition={{ duration: 0.8, delay: 0.3 }}
>
{/* Architecting Digital Success for Startups &amp; Enterprises */}
AI mobile application developers for Startups &amp; Enterprises
Mobile application developers for Startups &amp; Enterprises
</motion.h1>
<motion.p

261
package-lock.json generated
View File

@@ -56,6 +56,7 @@
"react-responsive-masonry": "^2.7.1",
"react-router-dom": "^7.6.3",
"react-slick": "^0.30.3",
"react-world-flags": "^1.6.0",
"recharts": "^2.15.4",
"slick-carousel": "^1.8.1",
"sonner": "^2.0.3",
@@ -142,7 +143,6 @@
"integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
@@ -3172,7 +3172,6 @@
"integrity": "sha512-Qm9OYVOFHFYg3wJoTSrz80hoec5Lia/dPp84do3X7dZvLikQvM1YpmvTBEdIr/e+U8HTkFjLHLnl78K/qjf+jQ==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~7.8.0"
}
@@ -3190,7 +3189,6 @@
"integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -3202,7 +3200,6 @@
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
"devOptional": true,
"license": "MIT",
"peer": true,
"peerDependencies": {
"@types/react": "^18.0.0"
}
@@ -3295,7 +3292,6 @@
"integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
"dev": true,
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "6.21.0",
"@typescript-eslint/types": "6.21.0",
@@ -3486,7 +3482,6 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -3647,6 +3642,12 @@
"integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
"license": "MIT"
},
"node_modules/boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
"license": "ISC"
},
"node_modules/brace-expansion": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -3690,7 +3691,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"caniuse-lite": "^1.0.30001726",
"electron-to-chromium": "^1.5.173",
@@ -4071,6 +4071,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"license": "MIT",
"engines": {
"node": ">= 10"
}
},
"node_modules/concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4116,6 +4125,80 @@
"node": ">= 8"
}
},
"node_modules/css-select": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
"integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
"license": "BSD-2-Clause",
"dependencies": {
"boolbase": "^1.0.0",
"css-what": "^6.1.0",
"domhandler": "^5.0.2",
"domutils": "^3.0.1",
"nth-check": "^2.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/css-tree": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
"license": "MIT",
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
}
},
"node_modules/css-what": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
"integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
"license": "BSD-2-Clause",
"engines": {
"node": ">= 6"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/csso": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
"license": "MIT",
"dependencies": {
"css-tree": "~2.2.0"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
"npm": ">=7.0.0"
}
},
"node_modules/csso/node_modules/css-tree": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
"license": "MIT",
"dependencies": {
"mdn-data": "2.0.28",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
"npm": ">=7.0.0"
}
},
"node_modules/csso/node_modules/mdn-data": {
"version": "2.0.28",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
"license": "CC0-1.0"
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4366,6 +4449,61 @@
"csstype": "^3.0.2"
}
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"license": "MIT",
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"license": "BSD-2-Clause"
},
"node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"license": "BSD-2-Clause",
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/domutils": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
"integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
"license": "BSD-2-Clause",
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/electron-to-chromium": {
"version": "1.5.182",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.182.tgz",
@@ -4377,8 +4515,7 @@
"version": "8.6.0",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/embla-carousel-react": {
"version": "8.6.0",
@@ -4421,6 +4558,18 @@
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==",
"license": "MIT"
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/esbuild": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -4489,7 +4638,6 @@
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
@@ -5599,6 +5747,12 @@
"dev": true,
"license": "ISC"
},
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
"license": "CC0-1.0"
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5749,6 +5903,18 @@
"node": ">=0.10.0"
}
},
"node_modules/nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
"license": "BSD-2-Clause",
"dependencies": {
"boolbase": "^1.0.0"
},
"funding": {
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
"node_modules/object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5763,6 +5929,7 @@
"resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
"integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
"license": "MIT",
"peer": true,
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
@@ -5921,7 +6088,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -6001,7 +6167,6 @@
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -6067,7 +6232,6 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
@@ -6133,7 +6297,6 @@
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0"
@@ -6333,6 +6496,20 @@
"react-dom": ">=16.6.0"
}
},
"node_modules/react-world-flags": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.6.0.tgz",
"integrity": "sha512-eutSeAy5YKoVh14js/JUCSlA6EBk1n4k+bDaV+NkNB50VhnG+f4QDTpYycnTUTsZ5cqw/saPmk0Z4Fa0VVZ1Iw==",
"license": "MIT",
"dependencies": {
"svg-country-flags": "^1.2.10",
"svgo": "^3.0.2",
"world-countries": "^5.0.0"
},
"peerDependencies": {
"react": ">=0.14"
}
},
"node_modules/recharts": {
"version": "2.15.4",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
@@ -6375,8 +6552,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/redux-thunk": {
"version": "3.1.0",
@@ -6500,6 +6676,15 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/sax": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
"integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=11.0.0"
}
},
"node_modules/scheduler": {
"version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -6526,7 +6711,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
@@ -6646,6 +6832,37 @@
"node": ">=8"
}
},
"node_modules/svg-country-flags": {
"version": "1.2.10",
"resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz",
"integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw==",
"license": "PD"
},
"node_modules/svgo": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
"integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
"license": "MIT",
"dependencies": {
"commander": "^7.2.0",
"css-select": "^5.1.0",
"css-tree": "^2.3.1",
"css-what": "^6.1.0",
"csso": "^5.0.5",
"picocolors": "^1.0.0",
"sax": "^1.5.0"
},
"bin": {
"svgo": "bin/svgo"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/svgo"
}
},
"node_modules/tailwind-merge": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
@@ -6660,8 +6877,7 @@
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",
@@ -6846,7 +7062,6 @@
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -7002,7 +7217,6 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
"integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
@@ -7083,6 +7297,11 @@
"node": ">=0.10.0"
}
},
"node_modules/world-countries": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/world-countries/-/world-countries-5.1.0.tgz",
"integrity": "sha512-CXR6EBvTbArDlDDIWU3gfKb7Qk0ck2WNZ234b/A0vuecPzIfzzxH+O6Ejnvg1sT8XuiZjVlzOH0h08ZtaO7g0w=="
},
"node_modules/wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

1
package.json
View File

@@ -58,6 +58,7 @@
"react-responsive-masonry": "^2.7.1",
"react-router-dom": "^7.6.3",
"react-slick": "^0.30.3",
"react-world-flags": "^1.6.0",
"recharts": "^2.15.4",
"slick-carousel": "^1.8.1",
"sonner": "^2.0.3",

74
pages/AmozProject.tsx
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"

2
pages/Homepage.tsx
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>

61
pages/VIB360Project.tsx
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"