generated from Nicholai/astro-template
Nicholai
0cda5c0497
- Add new media assets for hero, mosaic, service area, etc. - Create Astro components: Nav, Footer, Button, Container, Section, SectionHeading, Hero, ExpertiseMosaic, ServiceList, WhyUs, ServiceArea. - Refactor src/pages/index.astro into reusable components. - Add src/pages/contact.astro with contact form and info. - Fix dead navigation links and service links. - Implement mobile navigation using details/summary. - Apply strict 12‑column grid and 1140px container. - Add scroll‑triggered reveal animations and sticky hero background.
53 lines
1.5 KiB
Plaintext
53 lines
1.5 KiB
Plaintext
---
|
|
interface Props {
|
|
items: string[];
|
|
speed?: number;
|
|
reverse?: boolean;
|
|
}
|
|
|
|
const { items, speed = 20, reverse = false } = Astro.props;
|
|
---
|
|
|
|
<div class="marquee-container overflow-hidden whitespace-nowrap bg-brand-dark py-8 md:py-12 border-y border-white/5">
|
|
<div class:list={["marquee-content inline-block animate-marquee flex items-center", reverse && "animate-marquee-reverse"]}>
|
|
{Array(4).fill(0).map(() => (
|
|
<div class="flex items-center">
|
|
{items.map((item) => (
|
|
<div class="mx-12 md:mx-20 flex items-center gap-8 md:gap-12">
|
|
<span class="text-4xl md:text-7xl font-serif font-medium tracking-tight text-white uppercase opacity-80">
|
|
{item}
|
|
</span>
|
|
<div class="w-3 h-3 md:w-4 md:h-4 rounded-full bg-brand-green"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-25%); }
|
|
}
|
|
|
|
@keyframes marquee-reverse {
|
|
0% { transform: translateX(-25%); }
|
|
100% { transform: translateX(0); }
|
|
}
|
|
|
|
.animate-marquee {
|
|
animation: marquee 30s linear infinite;
|
|
}
|
|
|
|
.animate-marquee-reverse {
|
|
animation: marquee-reverse 30s linear infinite;
|
|
}
|
|
|
|
.marquee-container:hover .animate-marquee,
|
|
.marquee-container:hover .animate-marquee-reverse {
|
|
animation-play-state: paused;
|
|
}
|
|
</style>
|
|
|