Skip to content

Commit 7f1ea42

Browse files
DilsonsPicklesDilsonsPickles
authored
Merge pull request #55 from audacity/optimised-images
Optimised images
2 parents 66b8575 + dac2516 commit 7f1ea42

File tree

8 files changed

+112
-99
lines changed

8 files changed

+112
-99
lines changed

‎src/components/card/FeatureCard.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ function FeatureCard(props) {
44
const { icon, title, description } = props;
55

66
return (
7-
<div className="min-h-72 col-span-6 xl:col-span-3 p-4 md:p-6 border drop-shadow-sm md:drop-shadow-lg bg-white rounded-lg flex flex-col md:gap-2">
7+
<div className="min-h-72 col-span-1 xl:col-span-1 p-4 md:p-6 border drop-shadow-sm md:drop-shadow-lg bg-white rounded-lg flex flex-col md:gap-2">
88
<span className={`icon icon-medium text-blue-700 ${icon}`}></span>
99
<p className="text-lg font-semibold">{title}</p>
1010
<p className="">{description}</p>

‎src/components/card/NEWBlogPostCard.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,21 @@ const options: Intl.DateTimeFormatOptions = {
2121

2222
<a
2323
href=`/blog/${href}`
24-
class="col-span-12 sm:col-span-6 md:col-span-4 flex flex-col gap-4 hover:opacity-90 transition-opacity duration-200"
24+
class="flex flex-col gap-4 hover:opacity-90 transition-opacity duration-200"
2525
>
2626
<Image
27-
width="732"
27+
width="543"
2828
quality="80"
2929
class="rounded-md aspect-image"
3030
alt={coverAlt}
3131
src={cover}
3232
/>
3333
<div class="flex flex-col gap-1">
3434
<small>{publishDate.toLocaleDateString("en-US", options)}</small>
35-
<h3>{title}</h3>
35+
<h4>{title}</h4>
3636
</div>
3737

3838
<p>
3939
{description.length > 200 ? `${description.slice(0, 200)}...` : description}
4040
</p>
41-
</a>
41+
</a>

‎src/components/homepage/Audiodotcom.astro‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const optimizedBg = await getImage({
1818
const releaseVideoPlaceholderImage = await getImage({
1919
src: VideoPlaceholder,
2020
format: "webp",
21-
width: 732,
21+
width: 448,
2222
quality: 80,
2323
});
2424
@@ -32,33 +32,36 @@ const releaseVideo = {
3232

3333
<!-- Apply the background using inline style -->
3434
<section style={`background-image: url('${optimizedBg.src}'); background-size: cover;`}>
35-
<div
36-
class="grid md:grid-cols-2 max-w-screen-xl px-6 sm:px-12 py-12 gap-8 mx-auto"
37-
>
38-
<div class="flex lg:items-center col-span-2 md:col-span-1 md:col-start-1 row-start-2 md:row-start-1">
39-
<FeaturedVideo
40-
client:load
41-
placeholderImage={releaseVideo.placeholderImage}
42-
imageAltText={releaseVideo.imageAltText}
43-
videoURL={releaseVideo.videoURL}
44-
textColor="text-slate-50"
45-
matomoEventName={releaseVideo.title}
46-
/>
47-
</div>
48-
<div class="col-span-2 md:col-span-1 md:col-start-2 md:row-start-1 flex flex-col gap-8 lg:py-12">
49-
<Image src={AudioDotComLogo} class="w-20" alt="audio.com" />
50-
<div>
51-
<h2 class="text-white">Level up your Audacity</h2>
52-
<p class="text-gray-300 mt-4">
53-
Audio.com, the online companion to Audacity, lets you collaborate on
54-
projects, create versioned backups, and easily share and publish your
55-
work.
56-
</p>
35+
<div class="mx-auto px-6 xs:px-12 md:px-8 py-8 md:py-8 lg:py-12 max-w-screen-lg">
36+
<div class="flex flex-col md:flex-row gap-12 md:gap-16">
37+
<!-- Video Column - Order changes on mobile vs desktop -->
38+
<div class="w-full md:w-1/2 order-2 md:order-1">
39+
<FeaturedVideo
40+
client:load
41+
placeholderImage={releaseVideo.placeholderImage}
42+
imageAltText={releaseVideo.imageAltText}
43+
videoURL={releaseVideo.videoURL}
44+
textColor="text-slate-50"
45+
matomoEventName={releaseVideo.title}
46+
/>
5747
</div>
48+
49+
<!-- Text Content Column -->
50+
<div class="w-full md:w-1/2 order-1 md:order-2 flex flex-col gap-4 md:gap-8">
51+
<Image src={AudioDotComLogo} class="w-20" alt="audio.com" />
52+
<div>
53+
<h2 class="text-white">Level up your Audacity</h2>
54+
<p class="text-gray-300 mt-4">
55+
Audio.com, the online companion to Audacity, lets you collaborate on
56+
projects, create versioned backups, and easily share and publish your
57+
work.
58+
</p>
59+
</div>
5860

59-
<JoinAudioDotComButton
60-
href="https://audio.com/audacity/auth/sign-in?mtm_campaign=audacityteamorg&mtm_content=Block_button"
61-
/>
61+
<JoinAudioDotComButton
62+
href="https://audio.com/audacity/auth/sign-in?mtm_campaign=audacityteamorg&utm_content=Block_button"
63+
/>
64+
</div>
6265
</div>
6366
</div>
6467
</section>

‎src/components/homepage/BlogPosts.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ const publishedBlogPosts = await getCollection("blog", ({ data }) => {
99
const maxposts = 3;
1010
---
1111

12-
<section class="pt-8 pb-16 bg-slate-100">
13-
<div class="max-w-screen-xl mx-6 sm:mx-12 md:mx-16 xl:mx-auto">
12+
<section class="py-6 md:py-8 lg:py-12 bg-slate-100">
13+
<div class="mx-auto px-6 xs:px-12 md:px-16 max-w-screen-xl">
1414
<h2 class="text-left sm:text-center">
1515
New from our <a href="/blog" class="hyperlink">blog</a>
1616
</h2>
1717

18-
<div class="grid grid-cols-12 my-4 sm:my-8 md:my-12 gap-y-8 sm:gap-8 md:gap-12">
18+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 md:mt-8 lg:mt-12 gap-8 md:gap-10 lg:gap-12">
1919
{
2020
publishedBlogPosts
2121
.sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime())
@@ -36,4 +36,4 @@ const maxposts = 3;
3636
}
3737
</div>
3838
</div>
39-
</section>
39+
</section>

‎src/components/homepage/FeatureCards.astro‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
import FeatureCard from "../card/FeatureCard.jsx";
33
---
44

5-
<section class="py-8 md:py-16">
6-
<div class="text-center">
7-
<h2>All you need to create</h2>
8-
</div>
9-
<div class="max-w-screen-md xl:max-w-screen-xl mx-auto grid grid-cols-12 mt-6 md:mt-12">
10-
<div
11-
class="col-start-2 col-span-10 lg:col-start-1 lg:col-span-12 grid grid-cols-12 gap-4 md:gap-6"
12-
>
5+
<section class="py-8 lg:py-12">
6+
<div class="mx-auto px-6 xs:px-12 md:px-16 max-w-screen-xl">
7+
<div class="text-center mb-6 md:mb-8 lg:mb-12">
8+
<h2>All you need to create</h2>
9+
</div>
10+
11+
<!-- Feature Cards Grid -->
12+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 md:pb-6">
1313
<FeatureCard
1414
icon="icon-monitor"
1515
title="Cross-platform"
@@ -32,4 +32,4 @@ import FeatureCard from "../card/FeatureCard.jsx";
3232
/>
3333
</div>
3434
</div>
35-
</section>
35+
</section>

‎src/components/homepage/HeroBanner.astro‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,40 @@ import AudacityMockUp from "../../assets/img/HeroBannerImage.webp";
66
---
77

88
<section id="main" class="bg-gradient-to-r from-indigo-900 to-blue-700">
9-
<div
10-
class="grid grid-cols-12 max-w-screen-lg mx-6 sm:mx-16 xl:mx-auto py-8 md:py-16 sm:py-12 gap-6 md:gap-0"
11-
>
12-
<div
13-
class="col-span-12 mx-2 md:mx-0 text-center md:text-left md:col-span-5 flex flex-col gap-4 md:gap-8 justify-center"
14-
>
15-
<h1 class="leading-tight mt-2 text-white">
16-
Audacity is the world's most popular audio editing and recording app
17-
</h1>
9+
<div class="mx-auto px-4 md:px-8 py-4 md:py-8 lg:py-12 max-w-screen-lg">
10+
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-8 md:gap-12">
11+
<!-- Left Column - Text Content -->
12+
<div class="flex flex-col text-center md:text-left md:w-1/2 gap-6">
13+
<h1 class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-semibold text-white leading-tight">
14+
Audacity is the world's most popular audio editing and recording app
15+
</h1>
1816

19-
<div class="flex flex-col md:w-fit gap-4 items-center md:items-start">
20-
<DownloadMuseHubButton client:load />
21-
<noscript>
17+
<div class="flex flex-col w-full md:w-fit gap-4 items-center md:items-start pb-2 md:pb-">
2218
<DownloadMuseHubButton client:load />
23-
</noscript>
24-
<DownloadButton client:load />
25-
<noscript>
19+
<noscript>
20+
<DownloadMuseHubButton client:load />
21+
</noscript>
2622
<DownloadButton client:load />
27-
</noscript>
23+
<noscript>
24+
<DownloadButton client:load />
25+
</noscript>
26+
</div>
27+
</div>
28+
29+
<!-- Right Column - Image -->
30+
<div class="hidden md:block md:w-1/2">
31+
<div class="relative">
32+
<Image
33+
src={AudacityMockUp}
34+
alt="A laptop showing the Audacity application"
35+
width={668}
36+
quality={80}
37+
loading="eager"
38+
class="w-full h-auto"
39+
/>
40+
</div>
2841
</div>
29-
</div>
30-
<div
31-
class="col-span-12 md:col-start-7 md:col-span-7 flex items-center justify-center mx-4"
32-
>
33-
<Image
34-
src={AudacityMockUp}
35-
alt="A laptop showing the Audacity application"
36-
width={668}
37-
quality={80}
38-
loading="eager"
39-
/>
4042
</div>
4143
</div>
4244
</section>
45+

‎src/components/homepage/ReleaseVideo.astro‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ import FeaturedVideo from "../video/FeaturedVideo";
77
const releaseVideoPlaceholderImage = await getImage({
88
src: ReleaseVideoPlaceholder,
99
format: 'webp',
10-
width: 624,
10+
width: 448,
1111
quality: 80,
1212
});
1313
1414
const featuredVideoPlaceholderImage = await getImage({
1515
src: PromoVideoPlaceholder,
1616
format: 'webp',
17-
width: 624,
17+
width: 448,
1818
quality: 80,
1919
});
2020
@@ -39,29 +39,36 @@ const promoVideo = {
3939
---
4040

4141
<section class="bg-slate-100">
42-
<div
43-
class="grid md:grid-cols-2 max-w-screen-2xl px-6 sm:px-12 mx-auto py-8 gap-8"
44-
>
45-
<FeaturedVideo
46-
client:load
47-
title={releaseVideo.title}
48-
label={releaseVideo.label}
49-
placeholderImage={releaseVideo.placeholderImage}
50-
imageAltText={releaseVideo.imageAltText}
51-
videoURL={releaseVideo.videoURL}
52-
matomoEventName={releaseVideo.title}
53-
/>
54-
<FeaturedVideo
55-
client:load
56-
title={promoVideo.title}
57-
label={promoVideo.label}
58-
placeholderImage={promoVideo.placeholderImage}
59-
imageAltText={promoVideo.imageAltText}
60-
videoURL={promoVideo.videoURL}
61-
CTA={promoVideo.CTA}
62-
ctaText={promoVideo.ctaText}
63-
ctaURL={promoVideo.ctaURL}
64-
matomoEventName={promoVideo.title}
65-
/>
42+
<div class="mx-auto px-6 xs:px-12 md:px-8 py-6 md:py-8 lg:py-12 max-w-screen-lg">
43+
<div class="flex flex-col md:flex-row gap-12 md:gap-16">
44+
<!-- First Video Column -->
45+
<div class="w-full md:w-1/2">
46+
<FeaturedVideo
47+
client:load
48+
title={releaseVideo.title}
49+
label={releaseVideo.label}
50+
placeholderImage={releaseVideo.placeholderImage}
51+
imageAltText={releaseVideo.imageAltText}
52+
videoURL={releaseVideo.videoURL}
53+
matomoEventName={releaseVideo.title}
54+
/>
55+
</div>
56+
57+
<!-- Second Video Column -->
58+
<div class="w-full md:w-1/2">
59+
<FeaturedVideo
60+
client:load
61+
title={promoVideo.title}
62+
label={promoVideo.label}
63+
placeholderImage={promoVideo.placeholderImage}
64+
imageAltText={promoVideo.imageAltText}
65+
videoURL={promoVideo.videoURL}
66+
CTA={promoVideo.CTA}
67+
ctaText={promoVideo.ctaText}
68+
ctaURL={promoVideo.ctaURL}
69+
matomoEventName={promoVideo.title}
70+
/>
71+
</div>
72+
</div>
6673
</div>
6774
</section>

‎src/pages/blog.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ const publishedBlogPosts = await getCollection("blog", ({ data }) => {
1212

1313
<BaseLayout title="Audacity ® | Blog">
1414
<section id="main" class="pt-8 pb-16">
15-
<div class="max-w-screen-xl mx-6 sm:mx-12 md:mx-16 xl:mx-auto">
15+
<div class="max-w-screen-lg mx-6 sm:mx-12 md:mx-16 lg:mx-32 xl:mx-auto">
1616
<h2 class="text-left sm:text-center">Blog posts</h2>
1717

1818
<div
19-
class="grid grid-cols-12 my-4 sm:my-8 md:my-12 gap-y-8 sm:gap-8 md:gap-12"
19+
class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 my-4 sm:my-8 md:my-12 gap-8 sm:gap-8 md:gap-12"
2020
>
2121
{
2222
publishedBlogPosts.sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime()).map((post) => {

0 commit comments

Comments
 (0)