v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: hero section

Browse source
This commit is contained in:
VizoleLabs 2024-04-02 06:40:46 +00:00
parent 26fb506ba7
commit c7d54abcae
2 changed files with 16 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

24
components/Slider/Slider.tsx
View file

@ -12,21 +12,23 @@ import {
} from "@radix-ui/react-icons"; } from "@radix-ui/react-icons";
const LOGOS = [ const LOGOS = [
<FigmaLogoIcon width={50} height={50} className="text-white" />, <FigmaLogoIcon width={50} height={50} className="text-slate-400" />,
<FramerLogoIcon width={50} height={50} className="text-white" />, <FramerLogoIcon width={50} height={50} className="text-slate-400" />,
<SketchLogoIcon width={50} height={50} className=" text-white" />, <SketchLogoIcon width={50} height={50} className=" text-slate-400" />,
<TwitterLogoIcon width={50} height={50} className="text-white" />, <TwitterLogoIcon width={50} height={50} className="text-slate-400" />,
<GitHubLogoIcon width={50} height={50} className="text-white" />, <GitHubLogoIcon width={50} height={50} className="text-slate-400" />,
<VercelLogoIcon width={50} height={50} className="text-white" />, <VercelLogoIcon width={50} height={50} className="text-slate-400" />,
<NotionLogoIcon width={50} height={50} className="text-white" />, <NotionLogoIcon width={50} height={50} className="text-slate-400" />,
<DiscordLogoIcon width={50} height={50} className="text-white" />, <DiscordLogoIcon width={50} height={50} className="text-slate-400" />,
<InstagramLogoIcon width={50} height={50} className="text-white" />, <InstagramLogoIcon width={50} height={50} className="text-slate-400" />,
<LinkedInLogoIcon width={50} height={50} className="text-white" />, <LinkedInLogoIcon width={50} height={50} className="text-slate-400" />,
]; ];
export const InfiniteSlider = () => { export const InfiniteSlider = () => {
return ( return (
<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%,rgba(255,255,255,0)_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%,rgba(0,0,0,120)_100%)] after:content-['']"> // 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="relative m-auto w-full overflow-hidden bg-homeBg before:absolute before:opacity 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,black,transparent)] bg-blend-screen after:content-['']">
<div className="animate-infinite-slider flex w-[calc(250px*10)]"> <div className="animate-infinite-slider flex w-[calc(250px*10)]">
{LOGOS.map((logo, index) => ( {LOGOS.map((logo, index) => (
<div <div

5
tailwind.config.js
View file

@ -32,7 +32,8 @@ module.exports = {
vizoleG1: "#F0B37D", vizoleG1: "#F0B37D",
vizoleG2: "#F5887A", vizoleG2: "#F5887A",
vizoleG3: "#F5887A", vizoleG3: "#F5887A",
homeBg: "#0f172a" homeBg: "#0f172a",
homeBg2: "#0c1324"
}, },
fontFamily: { fontFamily: {
body: [ body: [
@ -92,7 +93,7 @@ module.exports = {
infiniteSlider: { infiniteSlider: {
"0%": { transform: "translateX(0)" }, "0%": { transform: "translateX(0)" },
"100%": { "100%": {
transform: "translateX(calc(-250px * 2))", transform: "translateX(calc(-250px * 5))",
}, },
}, },
}, },