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

feat: AboutUs Section

Browse source
This commit is contained in:
VizoleLabs 2024-04-02 09:49:23 +00:00
parent c7d54abcae
commit 9b14637e39
10 changed files with 179 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/Button/Button.tsx
View file

@ -17,12 +17,13 @@ const button = cva(
intent: {
primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
secondary: ["bg-transparent", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"],
hero1:["text-white", "bg-gradient-to-br", "from-vizoleG1", "via-vizole-G2", "to-vizoleG3", "hover:bg-gradient-to-bl", "focus:ring-4", "focus:outline-none", "focus:ring-green-200", "dark:focus:ring-green-800", "font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2"]
hero1: ["text-black", "bg-white", "font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2", "border-solid", "border-2", "border-slate-100"],
aboutUs: ["bg-transparent", "w-1/4", "hover:bg-blue-500", "text-blue-700", "font-semibold", "hover:text-white", "pt-5", "py-2", "px-4", "border", "border-blue-500", "hover:border-transparent", "rounded"]
},
size: {
sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
hero1:["min-w-15", "h-full", "min-h-5" , "text-sm","px-5", "py-2"]
hero1: ["min-w-15", "h-full", "min-h-5", "text-sm", "px-5", "py-2"]
},
underline: { true: ["underline"], false: [] },
},

88
components/Slider/Slider.tsx
View file

@ -1,52 +1,46 @@
import {
FigmaLogoIcon,
FramerLogoIcon,
SketchLogoIcon,
TwitterLogoIcon,
GitHubLogoIcon,
VercelLogoIcon,
NotionLogoIcon,
DiscordLogoIcon,
InstagramLogoIcon,
LinkedInLogoIcon,
} from "@radix-ui/react-icons";
FigmaLogoIcon,
FramerLogoIcon,
SketchLogoIcon,
TwitterLogoIcon,
GitHubLogoIcon,
VercelLogoIcon,
NotionLogoIcon,
DiscordLogoIcon,
InstagramLogoIcon,
LinkedInLogoIcon,
} 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" />,
];
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" />,
]
export const InfiniteSlider = () => {
return (
// bg-gradient-to-r from-black to-transparent
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="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)]">
{LOGOS.map((logo, index) => (
<div
className="slide flex w-[125px] items-center justify-center"
key={index}
>
{logo}
</div>
))}
{LOGOS.map((logo, index) => (
<div
className="slide flex w-[125px] items-center justify-center"
key={index}
>
{logo}
</div>
))}
</div>
<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="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>
))}
{LOGOS.map((logo, index) => (
<div className="slide flex w-[125px] items-center justify-center" key={index}>
{logo}
</div>
))}
</div>
);
};
</div>
)
}