Update home (#19)

* Redesign home

* Clean up static assets

Author: FejZa

docusaurus.config.ts

@@ -17,7 +17,7 @@ const config: Config = {
         },
     ],
     title: 'Unity Tools for Azure DevOps',
-    tagline: 'Set up CI/CD for Unity projects powered by Azure Pipelines',
+    tagline: 'Free and open source. Save time and money by automating your Unity builds and deployments!',
     favicon: 'img/favicon.ico',
     url: 'https://www.unitydevops.com',
     baseUrl: '/',

src/css/custom.css

@@ -25,4 +25,42 @@
   --ifm-color-primary-lighter: #3dccff;
   --ifm-color-primary-lightest: #3ddbff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='light'] .button-primary {
+  background-color: white;
+  color: black;
+}
+
+[data-theme='dark'] .button-primary {
+  background-color: black;
+  color: white;
+}
+
+[data-theme='light'] .button-secondary {
+  box-shadow:inset 0px 0px 0px 4px white;
+  color: white;
+}
+
+[data-theme='dark'] .button-secondary {
+  box-shadow:inset 0px 0px 0px 4px black;
+  color: black;
+}
+
+[data-theme='light'] .hero-title {
+  color: white;
+}
+
+[data-theme='dark'] .hero-title {
+  color: black;
+}
+
+[data-theme='light'] .hero-overlay {
+  opacity: 80%;
+  background-image: linear-gradient(to left, #3b3b3b, #000);
+}
+
+[data-theme='dark'] .hero-overlay {
+  opacity: 80%;
+  background-image: linear-gradient(to left, #999, #aaa);
 }

src/pages/home/Feature.tsx

@@ -0,0 +1,39 @@
+import { FunctionComponent } from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+
+const HeroSection: FunctionComponent = () => {
+    const { siteConfig } = useDocusaurusContext();
+
+    return (
+        <div className='h-screen relative overflow-hidden'>
+            <div className='relative w-full h-full'>
+                <img className='w-full h-full object-cover' src='img/home-hero.png' alt='Unity Tools for Azure Devops' />
+                <div className='absolute left-0 top-0 right-0 bottom-0 hero-overlay'></div>
+            </div>
+
+            <div className="absolute left-0 top-0 right-0 bottom-0 flex justify-center items-center flex-col">
+                <h1 className="hero__title hero-title">{siteConfig.title}</h1>
+                <p className="hero__subtitle hero-title">{siteConfig.tagline}</p>
+                <div className="flex items-center justify-center gap-8">
+                    <Link
+                        className='flex items-center cursor-pointer px-8 py-4 transition-transform hover:drop-shadow-md hover:scale-105 rounded-lg hover:no-underline text-xl font-bold button-primary'
+                        title='Get Started'
+                        to={useBaseUrl('docs/')}>
+                        Get Started
+                    </Link>
+                    <Link
+                        className='flex items-center cursor-pointer px-8 py-4 transition-transform hover:drop-shadow-md hover:scale-105 rounded-lg hover:no-underline text-xl font-bold button-secondary'
+                        title='Tutorials'
+                        to='https://www.youtube.com/@dinomite-tv'>
+                        Tutorials
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default HeroSection;

src/pages/home/FeaturesSection.tsx

@@ -1,15 +1,12 @@
 import React from 'react';
 import Layout from '@theme/Layout';
-import FeaturesSection from './home/FeaturesSection';
-import HeroBannerSection from './home/HeroBannerSection';
+import HeroSection from './home/HeroSection';
 
 export default function Home(): JSX.Element {
   return (
-    <Layout
-      description="Set up CI/CD for Unity projects powered by Azure Pipelines on Azure DevOps.">
-      <HeroBannerSection />
+    <Layout description="Save time and money by automating your Unity builds and deployments!">
       <main>
-        <FeaturesSection />
+        <HeroSection />
       </main>
     </Layout>
   );