about us section

This commit is contained in:
VizoleLabs 2024-04-04 04:40:20 +00:00
parent 71c97cd281
commit 41f2797651
12 changed files with 425 additions and 61 deletions

View file

@ -12,32 +12,27 @@ import {
} from "@radix-ui/react-icons"
const LOGOS = [
<FigmaLogoIcon width={50} height={50} className="text-slate-400" />,
<FramerLogoIcon width={50} height={50} className="text-slate-400" />,
<SketchLogoIcon width={50} height={50} className=" text-slate-400" />,
<TwitterLogoIcon width={50} height={50} className="text-slate-400" />,
<GitHubLogoIcon width={50} height={50} className="text-slate-400" />,
<VercelLogoIcon width={50} height={50} className="text-slate-400" />,
<NotionLogoIcon width={50} height={50} className="text-slate-400" />,
<DiscordLogoIcon width={50} height={50} className="text-slate-400" />,
<InstagramLogoIcon width={50} height={50} className="text-slate-400" />,
<LinkedInLogoIcon width={50} height={50} className="text-slate-400" />,
"/images/Amazon_Web_Services-Logo.wine.svg",
"/images/Cisco_Systems-Logo.wine.svg",
"/images/Oracle_Database-Logo.wine.svg",
"/images/ids.svg",
"/images/yanolja-icon.svg",
]
export const InfiniteSlider = () => {
return (
// bg-gradient-to-r from-black to-transparent
// <div className="relative m-auto w-full overflow-hidden bg-transparent before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,homeBg_0%,homeBg_100%)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,homeBg_0%,transparent)] after:content-['']">
<div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,homeBg2,transparent)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,bg-[#0f172a],transparent)] after:content-['']">
<div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,#0f172a,transparent)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,#0f172a,transparent)] after:content-['']">
<div className="flex w-[calc(250px*10)] animate-infinite-slider">
{LOGOS.map((logo, index) => (
<div className="slide flex w-[125px] items-center justify-center" key={index}>
{logo}
<div className="slide px-4 flex w-[125px] items-center justify-center" key={index}>
<img src={logo} />
</div>
))}
{LOGOS.map((logo, index) => (
<div className="slide flex w-[125px] items-center justify-center" key={index}>
{logo}
<div className="slide flex px-4 w-[125px] items-center justify-center" key={index}>
<img src={logo} />
</div>
))}
</div>