feat: upgrade tailwind to v4 (4) nsui components
This commit is contained in:
parent
6a3be051e4
commit
b2dd3d1694
@ -17,12 +17,12 @@ export default function CallToAction3() {
|
||||
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
|
||||
|
||||
<form action="" className="mx-auto mt-10 max-w-sm lg:mt-12">
|
||||
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
|
||||
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow-sm shadow-zinc-950/5 has-[input:focus]:ring-2">
|
||||
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
|
||||
|
||||
<input
|
||||
placeholder="Your mail address"
|
||||
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
|
||||
className="h-14 w-full bg-transparent pl-12 focus:outline-hidden"
|
||||
type="email"
|
||||
/>
|
||||
|
||||
|
@ -63,7 +63,7 @@ export default function Content2() {
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/charts-light.png"
|
||||
className="rounded-[12px] shadow dark:hidden"
|
||||
className="rounded-[12px] shadow-sm dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={1207}
|
||||
height={929}
|
||||
|
@ -24,7 +24,7 @@ export default function Content() {
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/payments-light.png"
|
||||
className="rounded-[15px] shadow dark:hidden"
|
||||
className="rounded-[15px] shadow-sm dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={1207}
|
||||
height={929}
|
||||
|
@ -51,7 +51,7 @@ export default function Features5() {
|
||||
/>
|
||||
<Image
|
||||
src="/images/blocks/payments-light.png"
|
||||
className="rounded-[15px] shadow dark:hidden"
|
||||
className="rounded-[15px] shadow-sm dark:hidden"
|
||||
alt="payments illustration light"
|
||||
width={1207}
|
||||
height={929}
|
||||
|
@ -279,7 +279,7 @@ export default function Features8() {
|
||||
<div className="before:bg-(--color-border) relative mt-6 before:absolute before:inset-0 before:mx-auto before:w-px sm:-my-6 sm:-mr-6">
|
||||
<div className="relative flex h-full flex-col justify-center space-y-6 py-6">
|
||||
<div className="relative flex w-[calc(50%+0.875rem)] items-center justify-end gap-2">
|
||||
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
|
||||
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-xs">
|
||||
Likeur
|
||||
</span>
|
||||
<div className="ring-background size-7 ring-4">
|
||||
@ -298,12 +298,12 @@ export default function Features8() {
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
|
||||
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-xs">
|
||||
M. Irung
|
||||
</span>
|
||||
</div>
|
||||
<div className="relative flex w-[calc(50%+0.875rem)] items-center justify-end gap-2">
|
||||
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
|
||||
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-xs">
|
||||
B. Ng
|
||||
</span>
|
||||
<div className="ring-background size-7 ring-4">
|
||||
|
@ -48,12 +48,12 @@ export default function HeroSection2() {
|
||||
action=""
|
||||
className="mx-auto my-10 max-w-sm lg:my-12 lg:ml-0 lg:mr-auto"
|
||||
>
|
||||
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
|
||||
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow-sm shadow-zinc-950/5 has-[input:focus]:ring-2">
|
||||
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
|
||||
|
||||
<input
|
||||
placeholder="Your mail address"
|
||||
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
|
||||
className="h-14 w-full bg-transparent pl-12 focus:outline-hidden"
|
||||
type="email"
|
||||
/>
|
||||
|
||||
|
@ -65,8 +65,8 @@ export default function HeroSection3() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="x-auto relative mx-auto mt-8 max-w-lg sm:mt-12">
|
||||
<div className="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 [background-image:linear-gradient(to_bottom,transparent_98%,theme(colors.gray.200/75%)_98%),linear-gradient(to_right,transparent_94%,_theme(colors.gray.200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)] dark:opacity-10"></div>
|
||||
<div className="absolute inset-x-0 top-12 -z-[1] mx-auto h-1/3 w-2/3 rounded-full bg-blue-300 blur-3xl dark:bg-white/20"></div>
|
||||
<div className="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 [background-image:linear-gradient(to_bottom,transparent_98%,--theme(--color-gray-200/75%)_98%),linear-gradient(to_right,transparent_94%,--theme(--color-gray-200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)] dark:opacity-10"></div>
|
||||
<div className="absolute inset-x-0 top-12 -z-1 mx-auto h-1/3 w-2/3 rounded-full bg-blue-300 blur-3xl dark:bg-white/20"></div>
|
||||
|
||||
<Swiper
|
||||
slidesPerView={1}
|
||||
|
@ -65,7 +65,7 @@ export default function HeroSection() {
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="from-background z-11 absolute inset-0 bg-gradient-to-l"
|
||||
className="from-background z-11 absolute inset-0 bg-linear-to-l"
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
|
Loading…
Reference in New Issue
Block a user