114 lines
3.3 KiB
TypeScript
114 lines
3.3 KiB
TypeScript
"use client";
|
|
import React, { } from "react";
|
|
import { motion } from "framer-motion";
|
|
import AnimatedSection from "./Animated";
|
|
import { home } from "@/services/Constants";
|
|
|
|
|
|
|
|
|
|
// Company Logos Slider
|
|
const CompanySlider = () => {
|
|
return (
|
|
<section className="py-16 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<AnimatedSection>
|
|
<p className="text-center text-gray-600 font-semibold mb-12">
|
|
TRUSTED BY LEADING COMPANIES WORLDWIDE
|
|
</p>
|
|
</AnimatedSection>
|
|
|
|
<div className="relative overflow-hidden">
|
|
<motion.div
|
|
animate={{ x: ["0%", "-50%"] }}
|
|
transition={{
|
|
duration: 30,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
className="flex gap-12 items-center"
|
|
>
|
|
{[...home.companies, ...home.companies].map(
|
|
(company, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex items-center gap-3 px-6 py-4 bg-gray-50 rounded-xl min-w-fit hover:bg-gray-100 transition-colors"
|
|
>
|
|
<span className="text-4xl">{company.logo}</span>
|
|
<span className="text-xl font-bold text-gray-800 whitespace-nowrap">
|
|
{company.name}
|
|
</span>
|
|
</div>
|
|
)
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CompanySlider
|
|
|
|
|
|
/*"use client";
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import AnimatedSection from "./Animated";
|
|
import { home } from "@/services/Constants";
|
|
|
|
// Company Logos Slider
|
|
const CompanySlider = () => {
|
|
return (
|
|
<section className="py-16 bg-[#0d0d0d]">
|
|
<div className="max-w-7xl mx-auto px-4">
|
|
<AnimatedSection>
|
|
<p className="text-center text-[#c3dbe0] font-semibold mb-12 tracking-wider">
|
|
TRUSTED BY LEADING COMPANIES WORLDWIDE
|
|
</p>
|
|
</AnimatedSection>
|
|
|
|
<div className="relative overflow-hidden">
|
|
<motion.div
|
|
animate={{ x: ["0%", "-50%"] }}
|
|
transition={{
|
|
duration: 30,
|
|
repeat: Infinity,
|
|
ease: "linear",
|
|
}}
|
|
className="flex gap-12 items-center"
|
|
>
|
|
{[...home.companies, ...home.companies].map(
|
|
(company, index) => (
|
|
<div
|
|
key={index}
|
|
className="
|
|
flex items-center gap-3
|
|
px-6 py-4
|
|
bg-[#c3dbe0]/10
|
|
border border-[#c3dbe0]/20
|
|
rounded-xl
|
|
min-w-fit
|
|
transition-all duration-300
|
|
hover:bg-[#13afdc]
|
|
hover:shadow-lg
|
|
hover:scale-105
|
|
"
|
|
>
|
|
<span className="text-4xl text-[#13afdc]">
|
|
{company.logo}
|
|
</span>
|
|
<span className="text-xl font-bold text-[#c3dbe0] whitespace-nowrap group-hover:text-white">
|
|
{company.name}
|
|
</span>
|
|
</div>
|
|
)
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CompanySlider; */ |