CodeCow/typebot.io
1
0
Fork 0
mirror of https://github.com/baptisteArno/typebot.io.git synced 2026-06-19 21:04:33 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix(landing-page): adjust marquee gap and animation duration

Browse Source
This commit is contained in:
Baptiste Arnaud 2025-01-24 11:35:17 +01:00
parent db8dcf9052
commit fcbfbb08b8
No known key found for this signature in database
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/landing-page/app/features/homepage/companies/components/Marquee.tsx
View File

@ -6,15 +6,23 @@ interface MarqueeProps {
export function Marquee({ children }: MarqueeProps) {
return (
<div className="flex items-center overflow-hidden">
<div
className="flex items-center overflow-hidden select-none gap-[--marquee-gap]"
style={
{
"--marquee-gap": "2rem",
} as React.CSSProperties
}
>
{Array(2)
.fill(0)
.map((_, i) => (
<div
key={i}
aria-hidden={i === 1 ? "true" : undefined}
className={cn(
"flex flex-shrink-0 justify-center flex-row items-center gap-8 md:gap-16 mr-8 md:mr-0 animate-marquee md:animate-none",
i === 1 && "hidden",
"flex flex-shrink-0 justify-around min-w-full flex-row items-center gap-[--marquee-gap] md:gap-16 animate-marquee md:animate-none",
i === 1 ? "md:hidden" : undefined,
)}
>
{children}

4
apps/landing-page/tailwind.config.ts
View File

@ -29,7 +29,7 @@ export default {
body: ["Untitled Sans", "sans-serif"],
},
animation: {
marquee: "marquee 20s linear infinite",
marquee: "marquee 15s linear infinite",
// Scroll animations
"slight-random-rotate": "linear slight-random-rotate forwards",
"fill-carousel-dot": "linear fill-carousel-dot forwards",
@ -41,7 +41,7 @@ export default {
keyframes: {
marquee: {
"0%": { transform: "translateX(0)" },
"100%": { transform: "translateX(calc(-100% - 2rem))" },
"100%": { transform: "translateX(calc(-100% - var(--marquee-gap)))" },
},
"slight-random-rotate": {
"0%": { transform: "rotate(0deg)" },