Begun working on the style refresh.

Trying to match the main website.
AvaloniaUI · Jul 7, 2024 · 2e56e77 · 2e56e77
1 parent b5ce01d
commit 2e56e77
Show file tree

Hide file tree

Showing 12 changed files with 385 additions and 390 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -138,8 +138,8 @@ const config = {
       announcementBar: {
         id: 'support_us',
         content:
-          '⭐️ 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>',
-        backgroundColor: '#22CE86',
+          'Get the help you need with our <a target="_blank" rel="noopener noreferrer" href="https://avaloniaui.net/Support">Enhanced Support!</a>',
+        backgroundColor: '#0d6efd',
         textColor: '#ffffff',
         isCloseable: false,
       },

diff --git a/src/components/GitHubSampleLink.js b/src/components/GitHubSampleLink.js
@@ -12,7 +12,7 @@ export default function GitHubSampleLink({title, link}) {
     className="github-sample-card bg-slate-400"
   >
     <div className="p-6 !pb-0">
-      <h3 className="mb-1 flex items-center gap-3 font-jakarta group-hover:text-white">
+      <h3 className="mb-1 flex items-center gap-3 font-outfit group-hover:text-white">
       <img
         src="/static/resources/github-white.svg"
         width="30"

diff --git a/src/components/XpfAdvert.jsx b/src/components/XpfAdvert.jsx
@@ -1,101 +1,40 @@
-import React from "react";
+import React from 'react';
+import Waves from './homepage/Waves'; 
 
 const Cta = () => {
   return (
     <>
       <section className="py-5 lg:py-[20px] mx-auto max-w-7xl">
-        <div className="container mx-auto">
-          <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] ">
+        <div className="container mx-auto relative">
+          <div className="relative z-10 overflow-hidden py-12 px-8 md:p-[25px]">
             <div className="flex flex-wrap items-center -mx-4">
-              <div className="w-full px-4 lg:w-1/2">
-                <span className="block mb-4 text-base font-medium text-white">
+              <div className="w-full px-4 lg:w-2/3">
+                <h2 className="block mb-4 font-medium text-white">
                   Avalonia XPF - Cross-Platform WPF
-                </span>
-                <h2 className="mb-6 text-1xl font-bold leading-tight text-white sm:mb-8 sm:text-[30px]/[38px] lg:mb-0">
-                  <span className="xs:block"> Take your WPF app to new </span> <span>Platforms today!</span>
                 </h2>
+                <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' }}>
+                  Take your WPF apps to macOS and Linux in minutes, not months.
+                </p>
               </div>
-              <div className="w-full px-4 lg:w-1/2">
+              <div className="w-full px-4 lg:w-1/3">
                 <div className="flex flex-wrap lg:justify-end">
                   <a
                     href="https://www.avaloniaui.net/xpf"
                     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"
                   >
                     Start Free Trial
                   </a>
-
                 </div>
               </div>
             </div>
-
-            <div>
-              <span className="absolute top-0 left-0 z-[-1]">
-                <svg
-                  width="189"
-                  height="162"
-                  viewBox="0 0 189 162"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <ellipse
-                    cx="16"
-                    cy="-16.5"
-                    rx="173"
-                    ry="178.5"
-                    transform="rotate(180 16 -16.5)"
-                    fill="url(#paint0_linear)"
-                  />
-                  <defs>
-                    <linearGradient
-                      id="paint0_linear"
-                      x1="-157"
-                      y1="-107.754"
-                      x2="98.5011"
-                      y2="-106.425"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop stop-color="white" stop-opacity="0.07" />
-                      <stop offset="1" stop-color="white" stop-opacity="0" />
-                    </linearGradient>
-                  </defs>
-                </svg>
-              </span>
-              <span className="absolute bottom-0 right-0 z-[-1]">
-                <svg
-                  width="191"
-                  height="208"
-                  viewBox="0 0 191 208"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <ellipse
-                    cx="173"
-                    cy="178.5"
-                    rx="173"
-                    ry="178.5"
-                    fill="url(#paint0_linear)"
-                  />
-                  <defs>
-                    <linearGradient
-                      id="paint0_linear"
-                      x1="-3.27832e-05"
-                      y1="87.2457"
-                      x2="255.501"
-                      y2="88.5747"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop stop-color="white" stop-opacity="0.07" />
-                      <stop offset="1" stop-color="white" stop-opacity="0" />
-                    </linearGradient>
-                  </defs>
-                </svg>
-              </span>
-            </div>
+          </div>
+          <div className="absolute inset-0 z-0 overflow-hidden rounded-3xl">
+            <Waves />
           </div>
         </div>
       </section>
     </>
   );
 };
 
-export default Cta;
+export default Cta;
diff --git a/src/components/homepage/CallToActionSection.jsx b/src/components/homepage/CallToActionSection.jsx
@@ -1,101 +1,40 @@
-import React from "react";
+import React from 'react';
+import Waves from './Waves'; // Adjust the import path as necessary
 
 const Cta = () => {
   return (
     <>
       <section className="py-10 lg:py-[20px] mx-auto max-w-7xl">
-        <div className="container mx-auto">
-          <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] ">
+        <div className="container mx-auto relative">
+          <div className="relative z-10 overflow-hidden rounded-3xl bg-gradient-to-r py-12 px-8 md:p-[70px]">
             <div className="flex flex-wrap items-center -mx-4">
-              <div className="w-full px-4 lg:w-1/2">
-                <span className="block mb-4 text-base font-medium text-white">
+              <div className="w-full px-4 lg:w-2/3">
+                <h2 className="block mb-4 text-base font-medium text-white" style={{ fontSize: '2.5rem', whiteSpace: 'normal', width: 'fit-content', lineHeight: '1.2' }}>
                   Avalonia XPF - Cross-Platform WPF
-                </span>
-                <h2 className="mb-6 text-3xl font-bold leading-tight text-white sm:mb-8 sm:text-[40px]/[48px] lg:mb-0">
-                  <span className="xs:block"> Take your WPF app to new </span> <span>Platforms today!</span>
+                </h2>
+                <h2 className="mb-6 text-3xl font-light leading-tight text-white sm:mb-8 sm:text-[40px]/[48px] lg:mb-0">
+                  <span className="xs:block"> Take your WPF app to macOS and Linux today!</span>
                 </h2>
               </div>
-              <div className="w-full px-4 lg:w-1/2">
+              <div className="w-full px-4 lg:w-1/3">
                 <div className="flex flex-wrap lg:justify-end">
                   <a
                     href="https://www.avaloniaui.net/xpf"
                     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"
                   >
                     Start Free Trial
                   </a>
-
                 </div>
               </div>
             </div>
-
-            <div>
-              <span className="absolute top-0 left-0 z-[-1]">
-                <svg
-                  width="189"
-                  height="162"
-                  viewBox="0 0 189 162"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <ellipse
-                    cx="16"
-                    cy="-16.5"
-                    rx="173"
-                    ry="178.5"
-                    transform="rotate(180 16 -16.5)"
-                    fill="url(#paint0_linear)"
-                  />
-                  <defs>
-                    <linearGradient
-                      id="paint0_linear"
-                      x1="-157"
-                      y1="-107.754"
-                      x2="98.5011"
-                      y2="-106.425"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop stop-color="white" stop-opacity="0.07" />
-                      <stop offset="1" stop-color="white" stop-opacity="0" />
-                    </linearGradient>
-                  </defs>
-                </svg>
-              </span>
-              <span className="absolute bottom-0 right-0 z-[-1]">
-                <svg
-                  width="191"
-                  height="208"
-                  viewBox="0 0 191 208"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <ellipse
-                    cx="173"
-                    cy="178.5"
-                    rx="173"
-                    ry="178.5"
-                    fill="url(#paint0_linear)"
-                  />
-                  <defs>
-                    <linearGradient
-                      id="paint0_linear"
-                      x1="-3.27832e-05"
-                      y1="87.2457"
-                      x2="255.501"
-                      y2="88.5747"
-                      gradientUnits="userSpaceOnUse"
-                    >
-                      <stop stop-color="white" stop-opacity="0.07" />
-                      <stop offset="1" stop-color="white" stop-opacity="0" />
-                    </linearGradient>
-                  </defs>
-                </svg>
-              </span>
-            </div>
+          </div>
+          <div className="absolute inset-0 z-0 overflow-hidden rounded-3xl">
+            <Waves />
           </div>
         </div>
       </section>
     </>
   );
 };
 
-export default Cta;
+export default Cta;
diff --git a/src/components/homepage/GuidesAndSamples.tsx b/src/components/homepage/GuidesAndSamples.tsx
@@ -98,7 +98,7 @@ export default function GuidesAndSamples() {
         <div className="mb-8 flex items-center justify-between">
           <h3 className="m-0">Popular how to guides</h3>
 
-          <Link to="/docs/guides" className="font-jakarta text-sm font-semibold">
+          <Link to="/docs/guides" className="font-outfit text-sm font-semibold">
             View more guides <ArrowRightFilled className="ml-1" />
           </Link>
         </div>
@@ -123,7 +123,7 @@ export default function GuidesAndSamples() {
 
           <Link
             to="https://github.com/AvaloniaUI/Avalonia.Samples"
-            className="font-jakarta text-sm font-semibold"
+            className="font-outfit text-sm font-semibold"
           >
             All apps <ArrowRightFilled className="ml-1" />
           </Link>

diff --git a/src/components/homepage/HeroSection.tsx b/src/components/homepage/HeroSection.tsx
@@ -8,30 +8,35 @@ import {
 } from '@fluentui/react-icons';
 import ThemedImage from '@theme/ThemedImage';
 import clsx from 'clsx';
+import Waves from './Waves';
 
-
-
-  export default function HeroSection() {
-    return (
-      <>
-        <section className="no-underline-links px-4 pt-16 lg:py-0 bg-gradient-to-t from-indigo-50 to-neutral-50">
-          <div className="flex flex-col items-center justify-between py-32">
-            <h2 className="mb-4 font-jakarta text-5xl font-bold text-black">
-              Build with Avalonia
-            </h2>
-            <p className="max-w-xl text-center text-gray-500 mt-5">
-              Avalonia empowers developers to create cross-platform applications for Windows, macOS, Linux, iOS, Android, and web browsers using .NET with unparalleled ease.             
-            </p>
-            <div>
-              <Link
-                className="button button--secondary button--lg "
-                to="/docs/welcome">
-                Get Started! 
-              </Link>
-            </div>
+export default function HeroSection() {
+  return (
+    <>
+      <section className="relative no-underline-links px-4 pt-10 pb-10 lg:py-0">
+        <div className="absolute inset-0 z-0 overflow-hidden">
+          <Waves />
+        </div>
+        <div className="relative z-5 flex flex-col items-center justify-between py-32">
+          <h2
+            className="mb-4 font-outfit font-normal text-white text-center"
+            style={{ fontSize: '4.5rem', whiteSpace: 'normal', width: 'fit-content', lineHeight: '1.2' }}
+          >
+            Avalonia <br/> Documentation
+          </h2>
+          <p className="max-w-xl text-center font-outfit text-xl text-white mt-5">
+            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.
+          </p>
+          <div>
+            <Link
+              className="button button--secondary button--lg"
+              to="/docs/welcome"
+            >
+              Get Started!
+            </Link>
           </div>
-        </section>
-
-      </>
-    );
-  }
+        </div>
+      </section>
+    </>
+  );
+}