Multiple changes

- Added fontawesome
- Fixed some css issues
- Removed unnecessary icon inclusion
- Added demo links
- Added release banner

components/AppPreview.tsx

@@ -26,7 +26,7 @@ export default function AppPreview() {
 					initial={{ opacity: 0, scale: 0.75 }}
 					animate={{ opacity: 1, scale: 1 }}
 					transition={{ delay: 0.5, duration: 1 }}
-					className="z-40 flex h-full w-[650px] flex-1 self-center bg-[url('/homepage-light.png')] bg-contain bg-[center_top] bg-no-repeat dark:bg-[url('/homepage-dark.png')] sm:w-auto"
+					className="z-40 flex h-full flex-1 self-center bg-[url('/homepage-light.png')] bg-contain bg-[center_top] bg-no-repeat dark:bg-[url('/homepage-dark.png')] sm:w-auto"
 				/>
 			</div>
 		</div>

components/Footer.tsx

@@ -1,11 +1,12 @@
-import { SiDiscord, SiGithub, SiOpencollective, SiTwitter } from '@icons-pack/react-simple-icons'
+import { SiDiscord, SiGithub, SiOpencollective} from '@icons-pack/react-simple-icons'
 import clsx from 'clsx'
 import Link from 'next/link'
 import React from 'react'
 
 const navigation = {
 	nav: [
 		{ disabled: false, href: '/', name: 'Home' },
+		{ disabled: false, href: 'https://demo.kavitareader.com/login?apiKey=9003cf99-9213-4206-a787-af2fe4cc5f1f', name: 'Demo', newWindow: true},
 		{ disabled: false, href: '/installation', name: 'Installation' },
 		{ disabled: false, href: '/guides', name: 'Guides' },
 	],

components/Hero.tsx

@@ -1,4 +1,6 @@
-import { SiGithub } from '@icons-pack/react-simple-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faLaptop } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { motion } from 'framer-motion'
 import Link from 'next/link'
 
@@ -24,7 +26,7 @@ export default function Hero() {
 					Lightning fast with a slick design, Kavita is a rocket fueled self-hosted digital library which supports a vast array of file formats. Install to start reading and share your server with your friends. 
 				</motion.p>
 
-				<div className="mx-auto mt-5 flex max-w-md justify-center space-x-2 md:mt-8">
+				<div className="mx-auto mt-5 flex max-w-lg justify-center space-x-2 md:mt-8">
 					<motion.div
 						className="flex"
 						initial={{ opacity: 0, scale: 0.5 }}
@@ -39,6 +41,23 @@ export default function Hero() {
 						</Link>
 					</motion.div>
 
+					<motion.div
+						className="flex"
+						initial={{ opacity: 0, scale: 0.5 }}
+						animate={{ opacity: 1, scale: 1 }}
+						transition={{ delay: 1.3, duration: 0.5 }}
+					>
+						<Link
+							className="dark:active:border-neutral-650 dark:active:bg-neutral-650 flex cursor-pointer items-center space-x-2 rounded-md border border-transparent bg-transparent px-3 py-1.5 text-sm font-medium text-neutral-700 transition-all duration-300 hover:border-neutral-200 hover:bg-neutral-50 hover:text-neutral-900 focus:outline-none active:border-neutral-200 active:bg-neutral-50 active:text-neutral-600 dark:bg-opacity-90 dark:text-neutral-200 dark:shadow-sm dark:hover:border-neutral-500 dark:hover:bg-neutral-700 dark:hover:bg-opacity-100 dark:hover:text-white dark:active:text-white dark:active:opacity-90"
+							href="https://demo.kavitareader.com/login?apiKey=9003cf99-9213-4206-a787-af2fe4cc5f1f"
+							target="_blank"
+						>
+							<FontAwesomeIcon icon={faLaptop} />
+
+							<span>View Demo</span>
+						</Link>
+					</motion.div>
+
 					<motion.div
 						className="flex"
 						initial={{ opacity: 0, scale: 0.5 }}
@@ -50,7 +69,7 @@ export default function Hero() {
 							href="https://github.com/Kareadita/Kavita"
 							target="_blank"
 						>
-							<SiGithub />
+							<FontAwesomeIcon icon={faGithub} />
 
 							<span>See on Github</span>
 						</Link>

components/NavBar.tsx

@@ -2,6 +2,13 @@ import { useRouter } from 'next/router'
 import { Navbar as NextraNavBar, ThemeSwitch } from 'nextra-theme-docs'
 
 const docLinks = [
+	{
+		href: 'https://demo.kavitareader.com/login?apiKey=9003cf99-9213-4206-a787-af2fe4cc5f1f',
+		route: 'demo',
+		title: 'Demo',
+		type: 'page',
+		newWindow: true,
+	},
 	{
 		href: '/installation/getting-started',
 		route: 'installation',

globals.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.svg-inline--fa {
+    height: 1.5em;
+}