Skip to content

Commit 2e56e77

Browse files
MikeCodesDotNETMikeCodesDotNET
committed
Begun working on the style refresh.
Trying to match the main website.
1 parent b5ce01d commit 2e56e77

12 files changed

+385
-390
lines changed

‎docusaurus.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,8 @@ const config = {
138138
announcementBar: {
139139
id: 'support_us',
140140
content:
141-
'⭐️ Make sure to sponsor Avalonia on <a target="_blank" rel="noopener noreferrer" href="https://github.com/sponsors/AvaloniaUI">GitHub</a> or sign up for <a target="_blank" rel="noopener noreferrer" href="https://avaloniaui.net/Support">Premium Support!</a>',
142-
backgroundColor: '#22CE86',
141+
'Get the help you need with our <a target="_blank" rel="noopener noreferrer" href="https://avaloniaui.net/Support">Enhanced Support!</a>',
142+
backgroundColor: '#0d6efd',
143143
textColor: '#ffffff',
144144
isCloseable: false,
145145
},

‎src/components/GitHubSampleLink.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function GitHubSampleLink({title, link}) {
1212
className="github-sample-card bg-slate-400"
1313
>
1414
<div className="p-6 !pb-0">
15-
<h3 className="mb-1 flex items-center gap-3 font-jakarta group-hover:text-white">
15+
<h3 className="mb-1 flex items-center gap-3 font-outfit group-hover:text-white">
1616
<img
1717
src="/static/resources/github-white.svg"
1818
width="30"

‎src/components/XpfAdvert.jsx

+14-75
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,40 @@
1-
import React from "react";
1+
import React from 'react';
2+
import Waves from './homepage/Waves';
23

34
const Cta = () => {
45
return (
56
<>
67
<section className="py-5 lg:py-[20px] mx-auto max-w-7xl">
7-
<div className="container mx-auto">
8-
<div className="relative z-10 overflow-hidden rounded-3xl bg-gradient-to-r from-purple-500 to-purple-700 py-12 px-8 md:p-[25px] ">
8+
<div className="container mx-auto relative">
9+
<div className="relative z-10 overflow-hidden py-12 px-8 md:p-[25px]">
910
<div className="flex flex-wrap items-center -mx-4">
10-
<div className="w-full px-4 lg:w-1/2">
11-
<span className="block mb-4 text-base font-medium text-white">
11+
<div className="w-full px-4 lg:w-2/3">
12+
<h2 className="block mb-4 font-medium text-white">
1213
Avalonia XPF - Cross-Platform WPF
13-
</span>
14-
<h2 className="mb-6 text-1xl font-bold leading-tight text-white sm:mb-8 sm:text-[30px]/[38px] lg:mb-0">
15-
<span className="xs:block"> Take your WPF app to new </span> <span>Platforms today!</span>
1614
</h2>
15+
<p className="mb-6 text-white sm:mb-8 sm:text-[30px]/[38px] lg:mb-0" style={{ fontSize: '4.5rem', whiteSpace: 'normal', width: 'fit-content', lineHeight: '1.2' }}>
16+
Take your WPF apps to macOS and Linux in minutes, not months.
17+
</p>
1718
</div>
18-
<div className="w-full px-4 lg:w-1/2">
19+
<div className="w-full px-4 lg:w-1/3">
1920
<div className="flex flex-wrap lg:justify-end">
2021
<a
2122
href="https://www.avaloniaui.net/xpf"
2223
className="inline-flex py-3 my-1 mr-4 text-base font-medium transition bg-white rounded-md hover:bg-shadow-1 text-primary px-7"
2324
>
2425
Start Free Trial
2526
</a>
26-
2727
</div>
2828
</div>
2929
</div>
30-
31-
<div>
32-
<span className="absolute top-0 left-0 z-[-1]">
33-
<svg
34-
width="189"
35-
height="162"
36-
viewBox="0 0 189 162"
37-
fill="none"
38-
xmlns="http://www.w3.org/2000/svg"
39-
>
40-
<ellipse
41-
cx="16"
42-
cy="-16.5"
43-
rx="173"
44-
ry="178.5"
45-
transform="rotate(180 16 -16.5)"
46-
fill="url(#paint0_linear)"
47-
/>
48-
<defs>
49-
<linearGradient
50-
id="paint0_linear"
51-
x1="-157"
52-
y1="-107.754"
53-
x2="98.5011"
54-
y2="-106.425"
55-
gradientUnits="userSpaceOnUse"
56-
>
57-
<stop stop-color="white" stop-opacity="0.07" />
58-
<stop offset="1" stop-color="white" stop-opacity="0" />
59-
</linearGradient>
60-
</defs>
61-
</svg>
62-
</span>
63-
<span className="absolute bottom-0 right-0 z-[-1]">
64-
<svg
65-
width="191"
66-
height="208"
67-
viewBox="0 0 191 208"
68-
fill="none"
69-
xmlns="http://www.w3.org/2000/svg"
70-
>
71-
<ellipse
72-
cx="173"
73-
cy="178.5"
74-
rx="173"
75-
ry="178.5"
76-
fill="url(#paint0_linear)"
77-
/>
78-
<defs>
79-
<linearGradient
80-
id="paint0_linear"
81-
x1="-3.27832e-05"
82-
y1="87.2457"
83-
x2="255.501"
84-
y2="88.5747"
85-
gradientUnits="userSpaceOnUse"
86-
>
87-
<stop stop-color="white" stop-opacity="0.07" />
88-
<stop offset="1" stop-color="white" stop-opacity="0" />
89-
</linearGradient>
90-
</defs>
91-
</svg>
92-
</span>
93-
</div>
30+
</div>
31+
<div className="absolute inset-0 z-0 overflow-hidden rounded-3xl">
32+
<Waves />
9433
</div>
9534
</div>
9635
</section>
9736
</>
9837
);
9938
};
10039

101-
export default Cta;
40+
export default Cta;

‎src/components/homepage/CallToActionSection.jsx

+14-75
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,40 @@
1-
import React from "react";
1+
import React from 'react';
2+
import Waves from './Waves'; // Adjust the import path as necessary
23

34
const Cta = () => {
45
return (
56
<>
67
<section className="py-10 lg:py-[20px] mx-auto max-w-7xl">
7-
<div className="container mx-auto">
8-
<div className="relative z-10 overflow-hidden rounded-3xl bg-gradient-to-r from-purple-500 to-purple-700 py-12 px-8 md:p-[70px] ">
8+
<div className="container mx-auto relative">
9+
<div className="relative z-10 overflow-hidden rounded-3xl bg-gradient-to-r py-12 px-8 md:p-[70px]">
910
<div className="flex flex-wrap items-center -mx-4">
10-
<div className="w-full px-4 lg:w-1/2">
11-
<span className="block mb-4 text-base font-medium text-white">
11+
<div className="w-full px-4 lg:w-2/3">
12+
<h2 className="block mb-4 text-base font-medium text-white" style={{ fontSize: '2.5rem', whiteSpace: 'normal', width: 'fit-content', lineHeight: '1.2' }}>
1213
Avalonia XPF - Cross-Platform WPF
13-
</span>
14-
<h2 className="mb-6 text-3xl font-bold leading-tight text-white sm:mb-8 sm:text-[40px]/[48px] lg:mb-0">
15-
<span className="xs:block"> Take your WPF app to new </span> <span>Platforms today!</span>
14+
</h2>
15+
<h2 className="mb-6 text-3xl font-light leading-tight text-white sm:mb-8 sm:text-[40px]/[48px] lg:mb-0">
16+
<span className="xs:block"> Take your WPF app to macOS and Linux today!</span>
1617
</h2>
1718
</div>
18-
<div className="w-full px-4 lg:w-1/2">
19+
<div className="w-full px-4 lg:w-1/3">
1920
<div className="flex flex-wrap lg:justify-end">
2021
<a
2122
href="https://www.avaloniaui.net/xpf"
2223
className="inline-flex py-3 my-1 mr-4 text-base font-medium transition bg-white rounded-md hover:bg-shadow-1 text-primary px-7"
2324
>
2425
Start Free Trial
2526
</a>
26-
2727
</div>
2828
</div>
2929
</div>
30-
31-
<div>
32-
<span className="absolute top-0 left-0 z-[-1]">
33-
<svg
34-
width="189"
35-
height="162"
36-
viewBox="0 0 189 162"
37-
fill="none"
38-
xmlns="http://www.w3.org/2000/svg"
39-
>
40-
<ellipse
41-
cx="16"
42-
cy="-16.5"
43-
rx="173"
44-
ry="178.5"
45-
transform="rotate(180 16 -16.5)"
46-
fill="url(#paint0_linear)"
47-
/>
48-
<defs>
49-
<linearGradient
50-
id="paint0_linear"
51-
x1="-157"
52-
y1="-107.754"
53-
x2="98.5011"
54-
y2="-106.425"
55-
gradientUnits="userSpaceOnUse"
56-
>
57-
<stop stop-color="white" stop-opacity="0.07" />
58-
<stop offset="1" stop-color="white" stop-opacity="0" />
59-
</linearGradient>
60-
</defs>
61-
</svg>
62-
</span>
63-
<span className="absolute bottom-0 right-0 z-[-1]">
64-
<svg
65-
width="191"
66-
height="208"
67-
viewBox="0 0 191 208"
68-
fill="none"
69-
xmlns="http://www.w3.org/2000/svg"
70-
>
71-
<ellipse
72-
cx="173"
73-
cy="178.5"
74-
rx="173"
75-
ry="178.5"
76-
fill="url(#paint0_linear)"
77-
/>
78-
<defs>
79-
<linearGradient
80-
id="paint0_linear"
81-
x1="-3.27832e-05"
82-
y1="87.2457"
83-
x2="255.501"
84-
y2="88.5747"
85-
gradientUnits="userSpaceOnUse"
86-
>
87-
<stop stop-color="white" stop-opacity="0.07" />
88-
<stop offset="1" stop-color="white" stop-opacity="0" />
89-
</linearGradient>
90-
</defs>
91-
</svg>
92-
</span>
93-
</div>
30+
</div>
31+
<div className="absolute inset-0 z-0 overflow-hidden rounded-3xl">
32+
<Waves />
9433
</div>
9534
</div>
9635
</section>
9736
</>
9837
);
9938
};
10039

101-
export default Cta;
40+
export default Cta;

‎src/components/homepage/GuidesAndSamples.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default function GuidesAndSamples() {
9898
<div className="mb-8 flex items-center justify-between">
9999
<h3 className="m-0">Popular how to guides</h3>
100100

101-
<Link to="/docs/guides" className="font-jakarta text-sm font-semibold">
101+
<Link to="/docs/guides" className="font-outfit text-sm font-semibold">
102102
View more guides <ArrowRightFilled className="ml-1" />
103103
</Link>
104104
</div>
@@ -123,7 +123,7 @@ export default function GuidesAndSamples() {
123123

124124
<Link
125125
to="https://github.com/AvaloniaUI/Avalonia.Samples"
126-
className="font-jakarta text-sm font-semibold"
126+
className="font-outfit text-sm font-semibold"
127127
>
128128
All apps <ArrowRightFilled className="ml-1" />
129129
</Link>

‎src/components/homepage/HeroSection.tsx

+30-25
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,35 @@ import {
88
} from '@fluentui/react-icons';
99
import ThemedImage from '@theme/ThemedImage';
1010
import clsx from 'clsx';
11+
import Waves from './Waves';
1112

12-
13-
14-
export default function HeroSection() {
15-
return (
16-
<>
17-
<section className="no-underline-links px-4 pt-16 lg:py-0 bg-gradient-to-t from-indigo-50 to-neutral-50">
18-
<div className="flex flex-col items-center justify-between py-32">
19-
<h2 className="mb-4 font-jakarta text-5xl font-bold text-black">
20-
Build with Avalonia
21-
</h2>
22-
<p className="max-w-xl text-center text-gray-500 mt-5">
23-
Avalonia empowers developers to create cross-platform applications for Windows, macOS, Linux, iOS, Android, and web browsers using .NET with unparalleled ease.
24-
</p>
25-
<div>
26-
<Link
27-
className="button button--secondary button--lg "
28-
to="/docs/welcome">
29-
Get Started!
30-
</Link>
31-
</div>
13+
export default function HeroSection() {
14+
return (
15+
<>
16+
<section className="relative no-underline-links px-4 pt-10 pb-10 lg:py-0">
17+
<div className="absolute inset-0 z-0 overflow-hidden">
18+
<Waves />
19+
</div>
20+
<div className="relative z-5 flex flex-col items-center justify-between py-32">
21+
<h2
22+
className="mb-4 font-outfit font-normal text-white text-center"
23+
style={{ fontSize: '4.5rem', whiteSpace: 'normal', width: 'fit-content', lineHeight: '1.2' }}
24+
>
25+
Avalonia <br/> Documentation
26+
</h2>
27+
<p className="max-w-xl text-center font-outfit text-xl text-white mt-5">
28+
Avalonia empowers developers to create cross-platform applications for Windows, macOS, Linux, iOS, Android, and web browsers using .NET with unparalleled ease. One codebase, infinite possibilities.
29+
</p>
30+
<div>
31+
<Link
32+
className="button button--secondary button--lg"
33+
to="/docs/welcome"
34+
>
35+
Get Started!
36+
</Link>
3237
</div>
33-
</section>
34-
35-
</>
36-
);
37-
}
38+
</div>
39+
</section>
40+
</>
41+
);
42+
}

0 commit comments

Comments
 (0)