/
index.astro
154 lines (151 loc) · 7.64 KB
/
index.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
---
// Import the BaseLayout component from the layouts directory. This component is likely used as a wrapper for the page, providing consistent structure and styling.
import BaseLayout from "@/layouts/BaseLayout.astro";
// Define the array of changelog entries
const changelogEntries = [
{
date: "16 March - 2024",
title: "80% faster widgets",
image:
"https://i.pinimg.com/564x/59/41/a0/5941a02c048f6226031a0487451c2651.jpg",
description:
"In our latest update, we've revolutionized the performance of our widgets, achieving a remarkable 80% increase in loading speeds. This breakthrough ensures a seamless experience across all Snowpeaks widgets, setting a new standard for efficiency and user satisfaction. Dive into the details to see how our widgets now lead the pack in speed and reliability.",
},
{
date: "1 March - 2024",
title: "Teams support",
image:
"https://i.pinimg.com/736x/70/25/f6/7025f63ebdd1caa11b47889c4c4d8fcd.jpg",
description:
"Expanding your business operations has never been easier with our new Teams support feature. Now, you can empower your team by inviting members to manage and run your Snowpeak store collaboratively. Streamline your workflow and boost productivity by leveraging the strengths of your team, all accessible from our revamped Team settings page.",
},
{
date: "20 February - 2024",
title: "Modify subscriptions in the dashboard",
image:
"https://i.pinimg.com/564x/4e/a7/ff/4ea7ff230ad9f3bc1c30b1b6cbaccad3.jpg",
description:
"We've brought the power of our API directly to your fingertips with an intuitive dashboard feature that allows for effortless modification of subscription plans. Now, managing your subscriptions is as simple as clicking 'Modify subscription'—a feature designed to streamline plan adjustments and proration handling. Experience the ease of subscription management with our user-friendly dashboard.",
},
{
date: "28 February - 2024",
title: "New Analytics Dashboard",
image:
"https://i.pinimg.com/564x/00/03/99/000399041b1f172201a912c235521db7.jpg",
description:
"Unveiling our latest innovation, the Analytics Dashboard, designed to offer deeper insights into your store's performance with just a glance. Track visitor behavior, sales trends, and more with our comprehensive and intuitive interface. This new dashboard is engineered to help you make informed decisions, driving your business towards unparalleled growth.",
},
{
date: "10 February - 2024",
title: "Enhanced Security Features",
image:
"https://i.pinimg.com/564x/f9/1e/3a/f91e3a9f23239a2c26f5fd757dadc848.jpg",
description:
"Security is paramount, and with our latest update, we're introducing enhanced security features to safeguard your online store. Benefit from advanced encryption, real-time monitoring, and automated threat detection. These updates fortify your store's defenses, ensuring your data, and your customers' data, remains protected against evolving cyber threats.",
},
{
date: "25 March - 2023",
title: "New Feature Launch: Interactive Dashboards",
image:
"https://i.pinimg.com/564x/5c/32/ad/5c32ade1feddce20f146d1b440f2ef96.jpg",
description:
"Our latest update introduces Interactive Dashboards, allowing users to dynamically interact with their data like never before. Customize, explore, and gain insights in a wholly intuitive and seamless manner.",
},
// Additional entries...
];
---
<BaseLayout>
<section>
<div
class="mx-auto max-w-5xl px-8 py-24 md:px-12 lg:px-16 divide-y prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl space-y-24">
<div>
<h1>Changelog</h1>
<p class="text-balance">
Explore the latest update featuring essential performance
enhancements, new customization options, and critical bug fixes across
our theme collection.
</p>
</div>
<!-- Starts component -->
<!--
// Assuming `changelogEntries` is an array where each object contains the date, image, title, and description of a changelog entry.
// Start of the component.
// This component dynamically generates a list of changelog entries using the `changelogEntries` array.
//
// This div is responsible for the sticky behavior of the date. It uses Tailwind's 'sticky' utility class.
<div class="lg:sticky pb-16 top-0">
The key class here is 'lg:sticky', which applies sticky positioning at the large breakpoint and above.
'pb-16 top-0' adds padding at the bottom and positions the sticky element at the top of the viewport when it reaches it during scrolling.
</div>
-->
{
changelogEntries.map((entry) => (
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-32 ">
<div>
<div class="lg:sticky lg:pb-16 top-0">
<div class="pt-8">
<p>{entry.date}</p>
</div>
</div>
</div>
<div class="lg:col-span-2 pt-8">
<div class="flex-shrink-0">
<div class="mx-auto ">
<img
class="aspect-[4/3] object-cover"
src={entry.image}
alt="#_"
/>
<h1>{entry.title}</h1>
<p class="line-clamp-4">{entry.description}</p>
<p>
<a href="#_">Read more</a>
</p>
</div>
</div>
</div>
</div>
))
}
<!-- Ends component -->
</div>
<!-- Starts links to tutorial -->
<div
class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
<div
class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
<div class="flex w-0 flex-1 items-center p-4">
<div class="w-full">
<p class="text-sm font-medium text-neutral-900">Tutorial</p>
<p class="mt-1 text-sm text-neutral-500">
How to create a sticky changelog component with Tailwind CSS and Astrojs
</p>
<p class="mt-2 text-xs text-orange-500 underline">
<a href="https://lexingtonthemes.com"> by © Lexington Themes</a>
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col divide-y divide-neutral-200">
<div class="flex h-0 flex-1">
<a
href="https://lexingtonthemes.com/tutorials/how-to-create-a-sticky-changelog-with-tailwind-css-and-astrojs"
type="button"
class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500"
>Tutorial</a
>
</div>
<div class="flex h-0 flex-1">
<a
href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/sticky-changelog/index.astro"
class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
>Get the code</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Ends links to tutorial -->
</section>
</BaseLayout>