YatCC-AI/src/components/HomeHero.astro at main · arcsysu/YatCC-AI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
---
import HomeTitle from "@/components/HomeTitle.astro";
import ButtonGroup from "@/components/ButtonGroup.astro";
import Button from "@/components/Button.astro";
import DarkLightButton from "@/components/DarkLightButton.astro";

interface Props {
  title: string;
  subtitle: string;
  rampLabel: string;
  rampHref: string;
  primaryLabel: string;
  primaryHref: string;
  tertiaryLabel: string;
  tertiaryHref: string;
}

const {
  title,
  subtitle,
  rampLabel,
  rampHref,
  primaryLabel,
  primaryHref,
  tertiaryLabel,
  tertiaryHref,
} = Astro.props;
---

<div class="home-hero">
  <HomeTitle title={title} subtitle={subtitle} />
  <ButtonGroup>
    <Button href={primaryHref}>{primaryLabel}</Button>
    <DarkLightButton href={tertiaryHref}>{tertiaryLabel}</DarkLightButton>
    <DarkLightButton href={rampHref}>{rampLabel}</DarkLightButton>
  </ButtonGroup>
</div>

<style>
  .home-hero :global(.fluid-subtitle) {
    margin-top: clamp(2.25rem, 4.5vh, 3rem);
  }

  .home-hero :global(.button-group) {
    margin-top: clamp(1.75rem, 3.5vh, 2.5rem);
  }

  @media (max-width: 400px) {
    .home-hero :global(.fluid-subtitle) {
      margin-top: 1.5rem;
    }

    .home-hero :global(.button-group) {
      margin-top: 1.35rem;
    }
  }
</style>