Skip to content

Commit 5c9eb59

Browse files
authored
Merge pull request #244 from widgeter/astro-v3
Update to Astro v3.0
2 parents fbc1079 + 2dcb51d commit 5c9eb59

12 files changed

+96
-93
lines changed

package.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@onwidget/astrowind",
33
"description": "A template to make your website using Astro + Tailwind CSS.",
4-
"version": "1.0.0-beta.0",
4+
"version": "1.0.0-beta.1",
55
"private": true,
66
"scripts": {
77
"dev": "astro dev",
@@ -13,40 +13,40 @@
1313
"lint:eslint": "eslint . --ext .js,.ts,.astro"
1414
},
1515
"dependencies": {
16-
"@astrojs/rss": "3.0.0-rc.2",
16+
"@astrojs/rss": "^3.0.0",
1717
"@astrolib/analytics": "^0.4.2",
1818
"@astrolib/seo": "^1.0.0-beta.4",
1919
"@fontsource-variable/inter": "^5.0.8",
20-
"astro": "^3.0.0-rc.7",
20+
"astro": "^3.0.1",
2121
"astro-icon": "^1.0.0-next.2",
22-
"limax": "2.1.0",
22+
"limax": "4.1.0",
2323
"lodash.merge": "^4.6.2",
2424
"unpic": "^3.10.0"
2525
},
2626
"devDependencies": {
27-
"@astrojs/mdx": "1.0.0-rc.2",
28-
"@astrojs/partytown": "2.0.0-rc.1",
29-
"@astrojs/sitemap": "3.0.0-rc.1",
30-
"@astrojs/tailwind": "5.0.0-rc.1",
27+
"@astrojs/mdx": "^1.0.0",
28+
"@astrojs/partytown": "^2.0.0",
29+
"@astrojs/sitemap": "^3.0.0",
30+
"@astrojs/tailwind": "5.0.0",
3131
"@iconify-json/flat-color-icons": "^1.1.7",
3232
"@iconify-json/tabler": "^1.1.89",
3333
"@tailwindcss/typography": "^0.5.9",
3434
"@types/lodash.merge": "^4.6.7",
35-
"@typescript-eslint/eslint-plugin": "^6.4.1",
36-
"@typescript-eslint/parser": "^6.4.1",
35+
"@typescript-eslint/eslint-plugin": "^6.5.0",
36+
"@typescript-eslint/parser": "^6.5.0",
3737
"astro-compress": "^2.0.14",
38-
"eslint": "^8.47.0",
39-
"eslint-plugin-astro": "^0.28.0",
38+
"eslint": "^8.48.0",
39+
"eslint-plugin-astro": "^0.29.0",
4040
"eslint-plugin-jsx-a11y": "^6.7.1",
4141
"js-yaml": "^4.1.0",
4242
"mdast-util-to-string": "^4.0.0",
43-
"prettier": "^3.0.2",
43+
"prettier": "^3.0.3",
4444
"prettier-plugin-astro": "^0.12.0",
4545
"reading-time": "^1.5.0",
4646
"svgo": "3.0.2",
4747
"tailwind-merge": "^1.14.0",
4848
"tailwindcss": "^3.3.3",
49-
"typescript": "^5.1.6"
49+
"typescript": "^5.2.2"
5050
},
5151
"engines": {
5252
"node": ">=18.14.1"

src/components/widgets/Hero.astro

+15-24
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
import { Icon } from 'astro-icon/components';
32
import Image from '~/components/common/Image.astro';
3+
import CTA from '../ui/CTA.astro';
44
55
const {
66
title = await Astro.slots.render('title'),
@@ -19,12 +19,14 @@ const {
1919
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
2020
<div class="py-12 md:py-20">
2121
<div class="text-center pb-10 md:pb-16 max-w-screen-lg mx-auto">
22-
{tagline && (
23-
<p
24-
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
25-
set:html={tagline}
26-
/>
27-
)}
22+
{
23+
tagline && (
24+
<p
25+
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
26+
set:html={tagline}
27+
/>
28+
)
29+
}
2830
{
2931
title && (
3032
<h1
@@ -42,14 +44,9 @@ const {
4244
{typeof callToAction === 'string' ? (
4345
<Fragment set:html={callToAction} />
4446
) : (
45-
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
46-
{callToAction?.icon && (
47-
<>
48-
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
49-
</>
50-
)}
51-
{callToAction?.text}
52-
</a>
47+
<div class="btn btn-primary sm:mb-0 w-full">
48+
<CTA callToAction={callToAction} />
49+
</div>
5350
)}
5451
</div>
5552
)
@@ -60,15 +57,9 @@ const {
6057
{typeof callToAction2 === 'string' ? (
6158
<Fragment set:html={callToAction2} />
6259
) : (
63-
<a class="btn w-full" href={callToAction2?.href}>
64-
{callToAction2?.icon && (
65-
<>
66-
<Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />
67-
&nbsp;
68-
</>
69-
)}
70-
{callToAction2.text}
71-
</a>
60+
<div class="btn w-full">
61+
<CTA callToAction={callToAction2} />
62+
</div>
7263
)}
7364
</div>
7465
)

src/components/widgets/Hero2.astro

+15-23
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
import { Icon } from 'astro-icon/components';
32
import Image from '~/components/common/Image.astro';
43
import type { CallToAction } from '~/types';
4+
import CTA from '../ui/CTA.astro';
55
66
export interface Props {
77
title?: string;
@@ -30,12 +30,14 @@ const {
3030
<div class="pt-0 md:pt-[76px] pointer-events-none"></div>
3131
<div class="py-12 md:py-20 lg:py-0 lg:flex lg:items-center lg:h-screen lg:gap-8">
3232
<div class="basis-1/2 text-center lg:text-left pb-10 md:pb-16 mx-auto">
33-
{tagline && (
34-
<p
35-
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
36-
set:html={tagline}
37-
/>
38-
)}
33+
{
34+
tagline && (
35+
<p
36+
class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase"
37+
set:html={tagline}
38+
/>
39+
)
40+
}
3941
{
4042
title && (
4143
<h1
@@ -55,14 +57,9 @@ const {
5557
{typeof callToAction === 'string' ? (
5658
<Fragment set:html={callToAction} />
5759
) : (
58-
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
59-
{callToAction?.icon && (
60-
<>
61-
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />{' '}
62-
</>
63-
)}
64-
{callToAction?.text}
65-
</a>
60+
<div class="btn btn-primary sm:mb-0 w-full">
61+
<CTA callToAction={callToAction} />
62+
</div>
6663
)}
6764
</div>
6865
)
@@ -73,14 +70,9 @@ const {
7370
{typeof callToAction2 === 'string' ? (
7471
<Fragment set:html={callToAction2} />
7572
) : (
76-
<a class="btn w-full" href={callToAction2?.href}>
77-
{callToAction2?.icon && (
78-
<>
79-
<Icon name={callToAction2.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}
80-
</>
81-
)}
82-
{callToAction2.text}
83-
</a>
73+
<div class="btn w-full">
74+
<CTA callToAction={callToAction2} />
75+
</div>
8476
)}
8577
</div>
8678
)

src/components/widgets/Testimonials.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const {
4545
<Fragment set:html={image} />
4646
) : (
4747
<Image
48-
class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600"
48+
class="h-10 w-10 rounded-full border border-slate-200 dark:border-slate-600 min-w-full min-h-full"
4949
width={40}
5050
height={40}
5151
widths={[400, 768]}

src/content/post/landing.md

+21-19
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ In the vast digital landscape, standing out is more than a desire—it's a neces
1313

1414
## Landing Pages Unveiled
1515

16-
A **Landing Page** is a standalone web page, distinct from your main website, crafted with a singular objective: to convert visitors into actionable leads or sales. It's where a visitor "lands" post-clicking on a marketing link or ad.
16+
A **Landing Page** is a standalone web page, distinct from your main website. Crafted with a singular objective: to convert visitors into actionable leads or sales. It's where a visitor "lands" post-clicking on a marketing link or ad.
1717

18-
Imagine clicking on an ad for a limited-time discount on a popular shoe brand. Instead of landing on the brand's homepage, you're taken to a page showcasing the discounted shoes with a clear "Buy Now" button. That's a Landing Page in action, focusing your attention solely on the offer.
18+
Imagine clicking on an ad for a limited-time discount on a popular shoe brand. This action guides you to a page that showcases the discounted shoes, featuring a clear "Buy Now" button. That's a Landing Page in action, focusing your attention solely on the offer.
1919

2020
## The Power of Precision
2121

@@ -33,7 +33,7 @@ In today's digital rush, hoping customers stumble upon you is a strategy of the
3333
- **Boost ROI**: Maximizing returns on marketing investments.
3434
- **Personalize User Experience**: Tailoring content to specific audience segments.
3535

36-
For instance, if you're launching a new fitness app, a well-crafted Landing Page can target individuals interested in health and wellness, offering them a free trial. This targeted approach ensures that those genuinely interested in fitness are the ones you're engaging with.
36+
For instance, if you're launching a new fitness app. A well-crafted Landing Page can target individuals interested in health and wellness, offering them a free trial. This targeted approach ensures that those genuinely interested in fitness are the ones you're engaging with.
3737

3838
## Crafting the Perfect Landing Page
3939

@@ -44,7 +44,7 @@ Every element of your Landing Page should resonate with its core objective. Here
4444
- **Compelling Copy**: Clear, concise, and persuasive text that speaks directly to the visitor's needs.
4545
- **Clear Call-to-Action (CTA)**: A standout button or link urging the visitor to take action.
4646
- **Minimalist Design**: A clutter-free layout that emphasizes the offer. For example, using a Tailwind CSS web template like AstroWind.
47-
- **Trust Indicators**: Testimonials, reviews, and badges that bolster credibility.
47+
- **Trust Indicators**: Endorsements, reviews, and badges that bolster credibility.
4848

4949
Imagine browsing online for a writing course. You land on a page with a captivating headline: "Unlock the Writer Within." Below, there's an engaging image of a person writing, followed by persuasive text and a bright "Enroll Now" button. This Landing Page has effectively used its elements to entice you to sign up.
5050

@@ -55,47 +55,49 @@ While both are pivotal, they serve distinct roles:
5555
- **Homepage**: Offers a panoramic view of your brand, catering to diverse visitor intents.
5656
- **Landing Page**: Zeros in on a single, specific action, be it signing up, purchasing, or downloading.
5757

58-
Consider a popular online store. Their homepage might display various product categories, from electronics to clothing. However, if they're promoting a summer sale, the Landing Page would focus solely on summer products, urging visitors to "Shop the Summer Sale Now!"
58+
Consider a popular online store. Their homepage might display various product categories, from electronics to clothing. However, if theyre promoting a summer sale, the Landing Page would focus solely on summer products. This focused approach urges visitors to take action, encouraging them to "Shop the Summer Sale Now!"
5959

6060
## The Art of Optimization
6161

6262
The digital realm is ever-evolving. Regular tweaks based on analytics can ensure your Landing Page remains a conversion powerhouse. Embrace A/B testing to compare different versions and refine for optimal results.
6363

64-
Let's say you have a Landing Page for a new skincare product. Version A uses an image of the product, while Version B showcases a video testimonial. A/B testing might reveal that Version B, with the video, has a 20% higher conversion rate. Such insights can be invaluable for future campaigns.
64+
Let's say you have a Landing Page for a new skincare product. Version A uses an image of the product, while Version B showcases a video review. A/B testing might reveal that Version B, with the video, has a 20% higher conversion rate. Such insights can be invaluable for future campaigns.
6565

6666
## Landing Pages in Action
6767

68-
Whether promoting a product launch, capturing emails for a newsletter, or driving registrations for an event, Landing Pages are versatile tools in your marketing toolkit. They're not just about capturing leads but nurturing and converting them.
68+
Landing Pages are versatile tools in your marketing toolkit. They play a role in various scenarios: promoting a product launch, capturing emails for a newsletter, or driving event registrations. Theyre not just about capturing leads but nurturing and converting them.
6969

70-
Presented below are several prevalent types of Landing Pages. Each link not only offers a prime example of its respective type but is also meticulously crafted in the form of a comprehensive guide. This ensures that you not only witness the best practices in action but also gain a step-by-step understanding of how to masterfully create each type.
70+
Presented below are several prevalent types of Landing Pages. Each link offers a prime example of its respective type. Additionally, we carefully craft each link in the form of a comprehensive guide.
71+
72+
This approach ensures that you observe the best practices in action. Also, it enables you to acquire a step-by-step understanding of how to skillfully create each type.
7173

7274
### [Lead Generation Landing Page](landing/lead-generation)
7375

7476
**Purpose**: Designed primarily to capture user data, such as email addresses or contact details.
7577

76-
**Content**: Typically features a form alongside a description of what the user will receive in return, be it an eBook, a webinar, or a free trial.
78+
**Content**: Usually includes a form where users can input their details. It also highlights what they'll get in return, such as an eBook, a webinar, or a free trial.
7779

7880
**Focus**: Enticing visitors to provide their personal details by offering something valuable in return.
7981

80-
**Key Differentiator**: Unlike "Click-through Landing Pages" that aim to lead users to another step, these aim to collect user data directly.
82+
**Key Differentiator**: Unlike Click-through Landing Pages,” which guide users to another step, these directly gather user data.
8183

8284
**Example**: A digital marketing agency offering a free SEO audit in exchange for business contact details.
8385

8486
### [Long-form Sales Landing Page](landing/sales)
8587

8688
**Purpose**: Primarily designed to sell, aiming to persuade and convert visitors into customers.
8789

88-
**Content**: Extensive, providing a wealth of information including product details, benefits, testimonials, success stories, guarantees, and bonuses.
90+
**Content**: Extensive, providing a wealth of information including product details, benefits, user stories, success stories, guarantees, and bonuses.
8991

90-
**Focus**: Uses narrative to present a problem and then offers the product or service as the solution, aiming to emotionally connect with the visitor.
92+
**Focus**: Utilizes a narrative to present a problem and offer the product or service as the solution. The aim is to emotionally connect with the visitor.
9193

92-
**Key Differentiator**: Unlike "Click-through Landing Pages", which warm up the visitor for a bigger commitment, these aim to close the sale directly on the page.
94+
**Key Differentiator**: While 'Click-through Landing Pages' warm up the visitor for a bigger commitment. 'Long-form Sales Landing Pages' aim to close the sale directly on the page.
9395

94-
**Example**: A weight loss program detailing an individual's journey, challenges faced, how the program helped, and why it's the ideal solution for others.
96+
**Example**: A weight loss program detailing a person's journey and the challenges they've faced. It also highlights how the program assisted them and why it's an ideal solution for others.
9597

9698
### [Click-through Landing Page](landing/click-through)
9799

98-
**Purpose**: Acts as an intermediary step, warming up visitors for a bigger commitment.
100+
**Purpose**: Acts as a middle step, warming up visitors for a bigger commitment.
99101

100102
**Content**: Provides essential details and benefits of an offer, urging visitors to click through to another page.
101103

@@ -113,13 +115,13 @@ Presented below are several prevalent types of Landing Pages. Each link not only
113115

114116
**Focus**: Presents the product or service transparently and attractively.
115117

116-
**Key Differentiator**: While 'Long-form Sales Landing Pages' aim to persuade through narratives and overcoming objections, 'Product Details Landing Pages' focus on presenting the product or service in a clear and detailed manner.
118+
**Key Differentiator**: While 'Long-form Sales Landing Pages' aim to persuade through narratives and overcoming objections. 'Product Details Landing Pages' focus on presenting the product or service in a clear and detailed manner.
117119

118120
**Example**: A tech website detailing a new laptop's specifications, unique features, comparisons with previous models, and user reviews.
119121

120122
### [Coming Soon or Pre-Launch Landing Page](landing/pre-launch)
121123

122-
**Purpose**: Builds anticipation for an upcoming product, service, or event.
124+
**Purpose**: Creates excitement for an upcoming product, service, or event.
123125

124126
**Content**: Often includes a countdown timer, teaser content, and an option to sign up for notifications.
125127

@@ -143,6 +145,6 @@ Presented below are several prevalent types of Landing Pages. Each link not only
143145

144146
## Conclusion
145147

146-
In the digital marketing symphony, Landing Pages are the crescendo. They capture attention, evoke action, and drive results. As we sail into the future, ensuring your Landing Pages are optimized, relevant, and high-converting will be the key to digital success.
148+
In the digital marketing symphony, Landing Pages become the crescendo. They capture attention, evoke action, and drive results. As we move forward, an essential task is to optimize, maintain relevance, and create high-converting Landing Pages. These factors collectively hold the key to achieving digital success.
147149

148-
Picture a world where every online interaction is personalized and focused. That's the power of Landing Pages. Whether you're a startup trying to gain traction or an established brand launching a new product, Landing Pages can be the catalyst for digital growth and engagement.
150+
Imagine a world where every online interaction gets personalized and directed. This showcases the potential of Landing Pages. For startups seeking traction or established brands introducing new products, Landing Pages can serve as the catalyst. They possess the power to spur digital growth and boost engagement.

src/pages/contact.astro

+2-5
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,9 @@ const metadata = {
1010
---
1111

1212
<Layout metadata={metadata}>
13-
<!-- HeroText Widget ******************* -->
13+
<!-- HeroText Widget ******************* -->
1414

15-
<HeroText
16-
tagline="Contact"
17-
title="Let's Connect!"
18-
/>
15+
<HeroText tagline="Contact" title="Let's Connect!" />
1916

2017
<ContactUs
2118
title="Drop us a message today!"

src/pages/homes/mobile-app.astro

+7-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ const metadata = {
1919

2020
<Hero2
2121
tagline="Mobile App Web Demo"
22-
callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
22+
callToAction={{
23+
targetBlank: true,
24+
text: 'Download App',
25+
href: 'https://github.com/onwidget/astrowind',
26+
icon: 'tabler:download',
27+
}}
2328
callToAction2={{ text: 'Learn more', href: '#features' }}
2429
image={{
2530
src: 'https://images.unsplash.com/photo-1535303311164-664fc9ec6532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80',
@@ -42,6 +47,7 @@ const metadata = {
4247
<!-- Features3 Widget ************** -->
4348

4449
<Features3
50+
id="features"
4551
title="How to use our app?"
4652
subtitle="Tired of spending hours crafting documents from scratch? Our app offers an innovative solution. With a wide array of professionally designed templates, you can now create stunning documents in minutes. Explore our templates now and experience the difference."
4753
tagline="Step-by-step guide"

0 commit comments

Comments
 (0)