worked on on the pages
This commit is contained in:
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user