feat: AboutUs Section

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

View file

@ -3,49 +3,76 @@ import { Button } from "components/Button/Button"
import { InfiniteSlider } from "components/Slider/Slider"; import { InfiniteSlider } from "components/Slider/Slider";
import Navbar from "components/Navbar/Navbar" import Navbar from "components/Navbar/Navbar"
import { LP_GRID_ITEMS } from "lp-items" import { LP_GRID_ITEMS } from "lp-items"
import { FaArrowRight } from "react-icons/fa"; import { FaArrowRight, FaFileCsv } from "react-icons/fa";
import '../styles/custom.css'
export default function Web() { export default function Web() {
return ( return (
<section className="bg-[#0f172a] pl-[15%] pr-[15%] h-[100vh] " > <div>
<div className=" rounded-[3rem] h-[60%] pt-[10%]" style={{ <section className="bg-[#0f172a] pl-[15%] pr-[15%] h-[60%] " >
backgroundImage: `url('/images/glow-bottom.svg')`, <div className=" rounded-[3rem] h-[80%] pt-[10%]" style={{
backgroundSize: 'cover', backgroundImage: `url('/images/glow-bottom.svg')`,
backgroundPosition: 'center', backgroundSize: 'cover',
backgroundRepeat: 'no-repeat' backgroundPosition: 'center',
}}> backgroundRepeat: 'no-repeat'
<div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16"> }}>
<div className="mx-auto place-self-center"> <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
<h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-5xl xl:text-6xl"> <div className="mx-auto place-self-center">
Experience the next dimension <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-5xl xl:text-6xl">
</h1> Experience the next dimension
<p className="mb-6 max-w-2xl font-light text-slate-100 text-gray-200 md:text-lg lg:mb-8 lg:text-xl"> </h1>
Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions powered by AI. <p className="mb-6 max-w-2xl font-light text-slate-100 text-gray-200 md:text-lg lg:mb-8 lg:text-xl">
</p> Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions powered by AI.
<Button href="https://github.com/Blazity/next-enterprise" className="mr-3" intent="hero1" size="hero1"> </p>
Get started <Button href="https://github.com/Blazity/next-enterprise" className="mr-3" intent="hero1" size="hero1">
<div className="ml-2"> <span>Get started</span>
<FaArrowRight /> <div className="ml-2">
</div> <FaArrowRight />
</Button> </div>
<Button </Button>
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise" <Button
intent="secondary" size="hero1" href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
> intent="secondary" size="hero1"
Deploy Now >
Deploy Now
</Button>
</div>
</Button>
</div> </div>
</div> </div>
</div> <div className="p-10">
<div className="pt-20"> <InfiniteSlider />
<InfiniteSlider/> </div>
</div> </section>
</section>
<section className="bg-[#0f172a] pl-[15%] pr-[15%] h-[100vh] ">
<div className=" rounded-[3rem] h-[60%]" style={{
backgroundImage: `url('/images/glow-top.svg')`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
}}>
<div>
<div className="mx-auto max-w-screen-xl px-4 py-8 lg:py-16">
<div className="mx-auto text-white text-left">
<h4 className="bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 text-transparent bg-clip-text pt-20 font-bold ">About VizoleLabs</h4>
<div className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
<h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 text-transparent bg-clip-text" >Our Mission in Motion</h2>
</div>
<h3 className="mr-90 text-slate-300">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, totam culpa officia ad esse</h3>
<div className="grid-col-1 p-20">
<Button href="" intent="aboutUs" size="hero1" className="grid pt-2">Section 01</Button>
<Button href="" intent="aboutUs" size="hero1" className="grid pt-2">Section 01</Button>
<Button href="" intent="aboutUs" size="hero1" className="grid pt-2">Section 01</Button>
</div>
</div>
</div>
</div>
</div>
</section >
</div >
) )
} }

View file

@ -17,12 +17,13 @@ const button = cva(
intent: { intent: {
primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"], 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"], 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: { size: {
sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"], 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"], 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: [] }, underline: { true: ["underline"], false: [] },
}, },

View file

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

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" xml:space="preserve" y="0" x="0" id="Layer_1" version="1.1" viewBox="-45.10065 -44.95 390.8723 269.7"><style id="style1855" type="text/css">.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#f90}</style><g transform="translate(-1.668 -1.1)" id="g1865"><path id="path1857" d="M86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3L83.2 92c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2-4.9-4.8-7.4-11.2-7.4-19.2 0-8.5 3-15.4 9.1-20.6 6.1-5.2 14.2-7.8 24.5-7.8 3.4 0 6.9.3 10.6.8 3.7.5 7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3-3.7.9-7.3 2-10.8 3.4-1.6.7-2.8 1.1-3.5 1.3-.7.2-1.2.3-1.6.3-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5.5-.7 1.4-1.4 2.8-2.1 3.5-1.8 7.7-3.3 12.6-4.5C41 1.9 46.2 1.3 51.7 1.3c11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zM45.8 81.6c3.3 0 6.7-.6 10.3-1.8 3.6-1.2 6.8-3.4 9.5-6.4 1.6-1.9 2.8-4 3.4-6.4.6-2.4 1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7-3.2-.4-6.3-.6-9.4-.6-6.7 0-11.6 1.3-14.9 4-3.3 2.7-4.9 6.5-4.9 11.5 0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9L96.7 10.2c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9.8-.6 2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6-.1.6-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9-.8.6-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1-.8-.7-1.5-2-1.9-4L156 23l-15.4 64.4c-.5 2-1.1 3.3-1.9 4-.8.7-2.2 1-4 1zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8-5-1.2-8.9-2.5-11.5-4-1.6-.9-2.7-1.9-3.1-2.8-.4-.9-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3.6.2 1.5.6 2.5 1 3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3 3.4-2.2 5.2-5.4 5.2-9.5 0-2.8-.9-5.1-2.7-7-1.8-1.9-5.2-3.6-10.1-5.2L246 52c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1 1.8-3.2 4.2-6 7.2-8.2 3-2.3 6.4-4 10.4-5.2 4-1.2 8.2-1.7 12.6-1.7 2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6 1.8.6 3.2 1.2 4.2 1.8 1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8-3.1 1.9-4.7 4.8-4.7 8.9 0 2.8 1 5.2 3 7.1 2 1.9 5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6 3.1 4.1 4.6 8.8 4.6 14 0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z" fill="#252f3e"/><g id="g1863"><path id="path1859" d="M273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z" class="st1"/><path id="path1861" d="M287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z" class="st1"/></g></g></svg>

After

Width:  |  Height:  |  Size: 3 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="800" width="1200" fill="#049fd9" viewBox="-32.4 -28.46125 280.8 170.7675"><path d="M106.48 76.164c-.282-.077-4.621-1.196-9.232-1.196-8.73 0-13.986 4.714-13.986 11.734 0 6.214 4.397 9.313 9.674 10.98.585.193 1.447.463 2.021.653 2.349.739 4.224 1.837 4.224 3.739 0 2.127-2.167 3.504-6.878 3.504-4.14 0-8.109-1.184-8.945-1.395v8.637c.466.099 5.183 1.025 10.222 1.025 7.248 0 15.539-3.167 15.539-12.595 0-4.573-2.8-8.783-8.947-10.737l-2.613-.832c-1.559-.492-4.342-1.289-4.342-3.574 0-1.805 2.062-3.076 5.859-3.076 3.276 0 7.263 1.101 7.404 1.145zm80.041 18.243c0 5.461-4.183 9.879-9.796 9.879-5.619 0-9.791-4.418-9.791-9.879 0-5.45 4.172-9.87 9.791-9.87 5.613 0 9.796 4.42 9.796 9.87m-9.796-19.427c-11.544 0-19.823 8.707-19.823 19.427 0 10.737 8.279 19.438 19.823 19.438 11.543 0 19.834-8.701 19.834-19.438 0-10.72-8.291-19.427-19.834-19.427M70.561 113.177h-9.472V75.645h9.472"/><path id="a" d="M48.07 76.325c-.89-.264-4.18-1.345-8.636-1.345-11.526 0-19.987 8.218-19.987 19.427 0 12.093 9.34 19.438 19.987 19.438 4.23 0 7.459-1.002 8.636-1.336v-10.075c-.407.226-3.503 1.992-7.957 1.992-6.31 0-10.38-4.441-10.38-10.019 0-5.748 4.246-10.011 10.38-10.011 4.53 0 7.576 1.805 7.957 2.004"/><use height="100%" width="100%" transform="translate(98.86)" xlink:href="#a"/><g transform="translate(0 -.074)" id="c"><path id="b" d="M61.061 4.759c0-2.587-2.113-4.685-4.703-4.685-2.589 0-4.702 2.098-4.702 4.685v49.84a4.701 4.701 0 004.702 4.699 4.701 4.701 0 004.703-4.699zM35.232 22.451c0-2.586-2.112-4.687-4.702-4.687s-4.702 2.101-4.702 4.687v22.785a4.701 4.701 0 004.702 4.699 4.701 4.701 0 004.702-4.699zM9.404 35.383c0-2.587-2.112-4.684-4.702-4.684C2.115 30.699 0 32.796 0 35.383v9.853a4.703 4.703 0 009.404 0"/><use height="100%" width="100%" transform="matrix(-1 0 0 1 112.717 0)" xlink:href="#b"/></g><use height="100%" width="100%" transform="matrix(-1 0 0 1 216 0)" xlink:href="#c"/></svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" version="1.0" viewBox="-95.705205 -19.9941 829.44511 119.9646"><path d="M265.5913 52.032h40.652L284.748 17.4495l-39.4513 62.527h-17.955l47.986-75.1083C277.414 1.8334 280.8911 0 284.748 0c3.7298 0 7.207 1.7702 9.2302 4.7417l48.1755 75.2347h-17.955l-8.4719-13.9722h-41.158zm186.5063 13.9722V.7587H436.861v71.631c0 1.96.7588 3.8566 2.2128 5.3107 1.454 1.4541 3.414 2.276 5.5635 2.276h69.4816l8.9775-13.9722zm-252.068-11.6961c14.7943 0 26.8066-11.949 26.8066-26.7431 0-14.794-12.0123-26.8063-26.8065-26.8063H133.374v79.2177h15.2306V14.7308h50.4135c7.0811 0 12.771 5.7532 12.771 12.8342 0 7.0809-5.6899 12.8342-12.771 12.8342l-42.9532-.0633 45.482 39.6404h22.1281L193.0754 54.308zM39.6157 79.9764C17.7465 79.9764 0 62.274 0 40.3992 0 18.5242 17.7467.7587 39.6155.7587h46.0446c21.875 0 39.609 17.7655 39.609 39.6405 0 21.8749-17.734 39.5772-39.609 39.5772zM84.636 66.0042c14.1684 0 25.6433-11.4433 25.6433-25.605 0-14.1619-11.4749-25.6684-25.6433-25.6684H40.6332c-14.1618 0-25.6433 11.5065-25.6433 25.6684 0 14.1617 11.4815 25.605 25.6433 25.605zm289.3186 13.9722c-21.875 0-39.6403-17.7023-39.6403-39.5772 0-21.875 17.7653-39.6405 39.6403-39.6405h54.6874l-8.9143 13.9721h-44.7615c-14.1619 0-25.668 11.5065-25.668 25.6684 0 14.1617 11.5061 25.605 25.668 25.605h54.9401l-8.9774 13.9722zm186.3167-13.9722c-11.6963 0-21.6222-7.8396-24.657-18.6506h65.1193l8.9775-13.9722h-74.0968c3.0348-10.7478 12.9607-18.6506 24.657-18.6506h44.6983L614.0102.7587h-54.7506c-21.875 0-39.6403 17.7655-39.6403 39.6405 0 21.8749 17.7653 39.5772 39.6403 39.5772h46.9743l8.9774-13.9722h-54.94m61.8948-56.8369a6.9341 6.9341 0 016.9543-6.9545c3.92 0 7.0175 3.0979 7.0175 6.9545 0 3.9197-3.0975 7.0176-7.0175 7.0176-3.8568 0-6.9543-3.0979-6.9543-7.0176zm6.9543 8.9775c4.9311 0 8.9143-3.983 8.9143-8.9143 0-4.9314-3.9832-8.9144-8.9143-8.9144-4.8684 0-8.851 3.983-8.851 8.9144 0 4.9313 3.9826 8.9143 8.851 8.9143zm-.822-14.225c1.3908 0 1.96.0632 2.5924.316 1.77.5691 1.9595 2.1496 1.9595 2.7819 0 .1264 0 .4425-.1264.8218-.063.3794-.3159 1.138-1.201 1.707-.1265.0633-.1897.1265-.4425.253l2.276 4.1094h-2.2128l-2.0232-3.7933h-1.3907v3.7933h-1.96V3.9198zm.6956 4.552c.632-.0632 1.2644-.0632 1.6436-.6323.1895-.2528.2532-.5057.2532-.885 0-.5058-.3164-.9484-.7588-1.2013-.4428-.1896-.8852-.1896-1.8336-.1896h-.5687v2.9082h1.2643" fill="#f80000"/></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2146" height="744"><defs><linearGradient id="d" x1="43.176%" x2="50%" y1="12.436%" y2="97.744%"><stop offset="0%" stop-color="#A855F7"/><stop offset="100%" stop-color="#6366F1"/></linearGradient><linearGradient id="f" x1="19.609%" x2="50%" y1="14.544%" y2="100%"><stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#6366F1" stop-opacity="0"/></linearGradient><filter id="e" width="145.2%" height="187%" x="-22.6%" y="-43.5%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter><filter id="g" width="165.1%" height="170.3%" x="-32.5%" y="-35.1%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="50"/></filter><radialGradient id="c" cx="50%" cy="100%" r="77.678%" fx="50%" fy="100%" gradientTransform="matrix(0 -1 .37746 0 .123 1.5)"><stop offset="0%" stop-color="#E9D5FF"/><stop offset="22.35%" stop-color="#A855F7"/><stop offset="100%" stop-color="#0F172A" stop-opacity="0"/></radialGradient><path id="a" d="M0 0h2440v921H0z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(-140 -177)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path fill="url(#c)" d="M0 0h2440v921H0z"/><path fill="url(#d)" fill-rule="nonzero" d="M1975.72 781.763c-3.682-3-8.757-3.61-13.042-1.568a12.323 12.323 0 0 0-7.014 11.129v98.57h-430.368c-6.79 0-12.296 5.516-12.296 12.321v98.57c0 6.805 5.505 12.321 12.296 12.321h430.368v98.57a12.323 12.323 0 0 0 7.014 11.129 12.276 12.276 0 0 0 13.042-1.568l196.74-160.176a12.33 12.33 0 0 0 4.54-9.561 12.33 12.33 0 0 0-4.54-9.561l-196.74-160.176Z" filter="url(#e)"/><path fill="url(#f)" d="m913 274 461 369-284 58z" filter="url(#g)"/></g></g></svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2146" height="744">
<defs>
<linearGradient id="d" x1="43.176%" x2="50%" y1="12.436%" y2="97.744%">
<stop offset="0%" stop-color="#C37EB6" />
<stop offset="100%" stop-color="#F5887A" />
</linearGradient>
<linearGradient id="f" x1="19.609%" x2="50%" y1="14.544%" y2="100%">
<stop offset="0%" stop-color="#F5887A" />
<stop offset="100%" stop-color="#F5887A" stop-opacity="0" />
</linearGradient>
<filter id="e" width="145.2%" height="187%" x="-22.6%" y="-43.5%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="50" />
</filter>
<filter id="g" width="165.1%" height="170.3%" x="-32.5%" y="-35.1%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="50" />
</filter>
<radialGradient id="c" cx="50%" cy="100%" r="77.678%" fx="50%" fy="100%"
gradientTransform="matrix(0 -1 .37746 0 .123 1.5)">
<stop offset="0%" stop-color="#F0B37D" />
<stop offset="22.35%" stop-color="#F5887A" />
<stop offset="100%" stop-color="#0F172A" stop-opacity="0" />
</radialGradient>
<path id="a" d="M0 0h2440v921H0z" />
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-140 -177)">
<mask id="b" fill="#fff">
<use xlink:href="#a" />
</mask>
<g mask="url(#b)">
<path fill="url(#c)" d="M0 0h2440v921H0z" />
<path fill="url(#d)" fill-rule="nonzero"
d="M1975.72 781.763c-3.682-3-8.757-3.61-13.042-1.568a12.323 12.323 0 0 0-7.014 11.129v98.57h-430.368c-6.79 0-12.296 5.516-12.296 12.321v98.57c0 6.805 5.505 12.321 12.296 12.321h430.368v98.57a12.323 12.323 0 0 0 7.014 11.129 12.276 12.276 0 0 0 13.042-1.568l196.74-160.176a12.33 12.33 0 0 0 4.54-9.561 12.33 12.33 0 0 0-4.54-9.561l-196.74-160.176Z"
filter="url(#e)" />
<path fill="url(#f)" d="m913 274 461 369-284 58z" filter="url(#g)" />
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before After
Before After

View file

@ -0,0 +1,26 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1404" height="658">
<defs>
<path id="a" d="M0 0h2324v658H0z" />
<path id="b" d="M0 0h2324v658H0z" />
<radialGradient id="c" cx="50%" cy="0%" r="106.751%" fx="50%" fy="0%"
gradientTransform="matrix(0 1 -.28313 0 .5 -.5)">
<stop offset="0%" stop-color="#C37EB6" />
<stop offset="22.35%" stop-color="#F5887A" stop-opacity=".64" />
<stop offset="100%" stop-color="#0F172A" stop-opacity="0" />
</radialGradient>
<linearGradient id="d" x1="19.609%" x2="50%" y1="14.544%" y2="100%">
<stop offset="0%" stop-color="#FFF" />
<stop offset="100%" stop-color="#FFF" stop-opacity="0" />
</linearGradient>
<filter id="e" width="165.1%" height="170.3%" x="-32.5%" y="-35.1%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="50" />
</filter>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(-460)">
<mask id="f" fill="#fff">
<use xlink:href="#b" />
</mask>
<use xlink:href="#b" fill="url(#c)" />
<path fill="url(#d)" d="m629-216 461 369-284 58z" filter="url(#e)" mask="url(#f)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -1,4 +1,8 @@
.bg-illustration { .bg-illustration {
background-image: url('/images/glow-bottom.svg'); background-image: url('/images/glow-bottom.svg');
} }
.hover-pl-5pct:hover {
padding-left: calc(100% + 5%);
}

View file

@ -16,6 +16,7 @@ module.exports = {
], ],
theme: { theme: {
extend: { extend: {
colors: { colors: {
primary: { primary: {
50: "#eff6ff", 50: "#eff6ff",