-
Notifications
You must be signed in to change notification settings - Fork 6
/
Hero.astro
123 lines (119 loc) · 4.61 KB
/
Hero.astro
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
---
import { getCollection } from "astro:content";
import { Image } from "astro:assets";
import logoImage from "../../assets/openAMP_combox_dark.svg";
import FirstItem from "../News/FirstItem.astro";
import dayjs from "dayjs";
import heroImage from "../../assets/images/triangle_background.png";
const { data } = Astro.props;
const blogs = await getCollection("news");
const blogLists = blogs
.sort((a, b) => dayjs(b.data.date).diff(dayjs(a.data.date)))
.slice(0, 2);
---
<header
class=`text-center relative text-white p-4 md:p-12 h-full w-full min-h-[40rem]`
style=`background-image: linear-gradient(to bottom right, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(${heroImage.src}); background-size: cover; background-position: center`
data-te-carousel-init
data-te-ride="carousel"
id="carouselExampleControls"
>
<!--Carousel items-->
<div class="h-full mx-auto my-auto">
<div
class="relative w-full mx-auto my-auto overflow-hidden after:clear-both after:block after:content-['']"
>
<!--First item-->
<div
class="relative float-left -mr-[100%] mb-3 w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-te-carousel-item
data-te-carousel-active
>
<div class="w-full h-full flex flex-col justify-center items-center">
<Image height={300} src={logoImage} alt="openAMP Logo" />
<p class="leading-normal text-center max-w-xl text-xl mb-4">
{data.main_body}
</p>
<a
href="https://github.com/OpenAMP"
target="_blank"
class="bg-openampred align-middle mt-2 mx-auto p-4 rounded text-md text-center transition ease-in-out hover:bg-red-600 text-white cursor-pointer"
>View on GitHub</a
>
</div>
</div>
<!--Second item-->
<div
class="relative text-black w-full float-left -mr-[100%] hidden transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none h-full"
data-te-carousel-item
>
<FirstItem {...blogLists[0]} />
</div>
<!--Third item-->
<div
class="relative text-black float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none h-full"
data-te-carousel-item
>
<FirstItem {...blogLists[1]} />
</div>
</div>
</div>
<!--Carousel controls - prev item-->
<button
class="absolute bottom-0 left-0 sm:top-0 z-[1] flex w-[10%] items-center justify-end border-0 bg-none py-4 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-te-target="#carouselExampleControls"
data-te-slide="prev"
>
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5"></path>
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<!--Carousel controls - next item-->
<button
class="absolute bottom-0 right-0 sm:top-0 z-[1] flex w-[10%] items-center justify-start border-0 bg-none py-4 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-openampred hover:no-underline hover:opacity-90 hover:outline-none focus:text-openampred focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-te-target="#carouselExampleControls"
data-te-slide="next"
>
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"></path>
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</header>
<script>
import { Carousel, initTE } from "tw-elements";
initTE({ Carousel });
</script>