mob layout
This commit is contained in:
parent
b774861815
commit
b550cd332b
|
|
@ -34,7 +34,7 @@ export const HomeActions: FC<Props> = ({ className }) => {
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div className="grid grid-cols-3 gap-6">
|
<div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-6">
|
||||||
{items.map((item, i) =>
|
{items.map((item, i) =>
|
||||||
!item.dropdown ? (
|
!item.dropdown ? (
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -45,7 +45,7 @@ export const HomeActions: FC<Props> = ({ className }) => {
|
||||||
<Button
|
<Button
|
||||||
variant={"teritary"}
|
variant={"teritary"}
|
||||||
size={"lg"}
|
size={"lg"}
|
||||||
className="w-full drop-shadow-sm shadow-md text-xl bg-teritary text-on_teritary hover:bg-teritary/90"
|
className="w-full drop-shadow-sm shadow-md md:text-xl text-lg bg-teritary text-on_teritary hover:bg-teritary/90"
|
||||||
>
|
>
|
||||||
{item.text}
|
{item.text}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -65,7 +65,7 @@ export const HomeActions: FC<Props> = ({ className }) => {
|
||||||
<Button
|
<Button
|
||||||
size={"lg"}
|
size={"lg"}
|
||||||
variant={"teritary"}
|
variant={"teritary"}
|
||||||
className="w-full drop-shadow-sm shadow-md text-xl bg-teritary text-on_teritary hover:bg-teritary/90"
|
className="w-full drop-shadow-sm shadow-md md:text-xl text-lg bg-teritary text-on_teritary hover:bg-teritary/90"
|
||||||
>
|
>
|
||||||
{item.text}
|
{item.text}
|
||||||
<Chevron w={"40"} h={"40"} color="white" />
|
<Chevron w={"40"} h={"40"} color="white" />
|
||||||
|
|
|
||||||
|
|
@ -8,22 +8,22 @@ export const TimerItem = ({
|
||||||
prevValue: string;
|
prevValue: string;
|
||||||
}) => (
|
}) => (
|
||||||
<div className="timer-item flex flex-col items-center">
|
<div className="timer-item flex flex-col items-center">
|
||||||
<div className="relative h-14 w-16 overflow-hidden font-bold">
|
<div className="relative sm:h-14 h-10 w-16 overflow-hidden font-bold">
|
||||||
<span
|
<span
|
||||||
className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text text-5xl leading-none transition-all duration-300 ${
|
className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text sm:text-5xl text-3xl leading-none transition-all duration-300 ${
|
||||||
prevValue !== value ? " opacity-0" : " opacity-100"
|
prevValue !== value ? " opacity-0" : " opacity-100"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{prevValue}
|
{prevValue}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text text-5xl leading-none transition-all duration-300 ${
|
className={`absolute left-1/2 -translate-x-1/2 black bg-gradient-to-t from-[#F38835] to-[#F1700D] text-transparent bg-clip-text sm:text-5xl text-3xl leading-none transition-all duration-300 ${
|
||||||
prevValue !== value ? "opacity-100" : "opacity-0"
|
prevValue !== value ? "opacity-100" : "opacity-0"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{value}
|
{value}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="label normal uppercase text-xl">{label}</div>
|
<div className="label normal uppercase sm:text-xl text-base">{label}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue