Add: Ecosystem banner

Add the ecosystem banner, keyframe animations

Tweak navbar further

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+*.Identifier

src/components/banner.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+function Banner({ title, imageSrc, description, onBackClick }) {
+  return (
+    <div className="md:w-[85%] py-12 text-off-white m-auto text-center animate-slide-in">
+      <h1 className="text-6xl font-bold text-rhino-purple">{title}</h1>
+      <div className="md:grid md:grid-cols-2 m-auto text-center md:p-8">
+        <div>
+          <img src={imageSrc} alt={title} className="w-full md:w-[60%] m-auto my-8 md:my-0" />
+        </div>
+        <div>
+          <p className="text-left text-2xl text-white">{description}</p>
+          {onBackClick && (
+            <p className="underline hover:cursor-pointer text-left" onClick={onBackClick}>
+              ⟵ Go back
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Banner;

src/components/ecosystem.jsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import Banner from './banner';
+
+function Ecosystem() {
+  const [activeSection, setActiveSection] = useState('main');
+
+  const appshide = () => setActiveSection('main');
+  const wizardshow = () => setActiveSection('wizard');
+  const systemshow = () => setActiveSection('system');
+  const rpkshow = () => setActiveSection('rpk');
+  const dropshow = () => setActiveSection('rhinodrop');
+
+  return (
+    <div className="w-full px-8 md:px-16 lg:px-24">
+      {activeSection === 'main' && (
+        <div className="extended h-auto lg:w-[85%] py-12 rounded-[0.65em] m-auto animate-slide-in">
+          <div className="text-off-white m-auto text-left pt-4 pb-4 px-2">
+            <h1 className="text-6xl font-bold text-rhino-purple md:text-center">Your experience matters.</h1>
+            <p className="text-2xl py-4">
+              Rhino Linux is dedicated to providing the best desktop experience possible. We have carefully created a set of graphical applications and command-line utilities to cater to your everyday needs.
+            </p>
+            <div className="grid grid-cols-3 gap-8 text-center mt-4">
+              <div>
+                <img src="/img/ecosystem/icons/setup-wizard.webp" alt="Setup Wizard" className="md:w-[25%] w-full mx-auto" />
+                <a onClick={wizardshow} className="hover:cursor-pointer hover:text-rhino-purple transition-all text-2xl">Setup Wizard →</a>
+              </div>
+              <div>
+                <img src="/img/ecosystem/icons/your-os.webp" alt="Your System" className="md:w-[25%] w-full mx-auto" />
+                <a onClick={systemshow} className="hover:cursor-pointer hover:text-rhino-purple transition-all text-2xl">Your System →</a>
+              </div>
+              <div>
+                <img src="/img/ecosystem/icons/rpk-logo.webp" alt="rhino-pkg" className="md:w-[25%] w-full mx-auto" />
+                <a onClick={rpkshow} className="hover:cursor-pointer hover:text-rhino-purple transition-all text-2xl">rhino-pkg →</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Setup Wizard Section */}
+      {activeSection === 'wizard' && (
+        <Banner
+          title="Setup Wizard"
+          imageSrc="/img/ecosystem/applications/setup-wizard.webp"
+          description="When you first boot your system, you will be greeted by our elegant setup wizard, giving you the ability to select your theme, install additional package managers, and install additional software to optimize your experience."
+          onBackClick={appshide}
+        />
+      )}
+
+      {/* Your System Section */}
+      {activeSection === 'system' && (
+        <Banner
+          title="Your System"
+          imageSrc="/img/ecosystem/applications/your-os.webp"
+          description="Your System is a handy graphical application that allows you to view system information at a glance. It also provides a graphical method for updating all of your software packages."
+          onBackClick={appshide}
+        />
+      )}
+
+      {/* Rhino-pkg Section */}
+      {activeSection === 'rpk' && (
+        <Banner
+          title="rhino-pkg"
+          imageSrc="/img/ecosystem/applications/rhino-pkg.webp"
+          description="Our flagship package management wrapper, rhino-pkg, makes life easy by allowing you to install, remove, and update applications across all package managers and repositories. With easy-to-understand syntax and our handy guide, you’ll have all of your favorite apps in seconds."
+          onBackClick={appshide}
+        />
+      )}
+
+      {/* RhinoDrop Section */}
+      {activeSection === 'rhinodrop' && (
+        <Banner
+          title="RhinoDrop"
+          imageSrc="/img/apps/rhinodrop.webp"
+          description="RhinoDrop allows easy file sharing across devices."
+          onBackClick={appshide}
+        />
+      )}
+    </div>
+  );
+}
+
+export default Ecosystem;

src/components/navbar.jsx

@@ -48,9 +48,9 @@ function NavBar() {
                         <img src="/img/logo.png" alt="" className="md:p-0 lg:w-[4%] md:w-[10%] w-[20%]" />
                     </a>
                 </div>
-                <div className="p-2 px-4 text-center m-4 bg-site-300 rounded-lg md:flex md:gap-4 hidden md:block">
+                <div className="p-2 px-4 text-center m-4 bg-site-300 rounded-lg md:flex lg:gap-8 md:gap-4 hidden md:block">
                         {baritems.map((item) => (
-                            <p><a href={item.link} key={item.link} className="text-xl text-white hover:text-rhino-purple">{item.goto}</a></p>
+                            <p><a href={item.link} key={item.link} className="text-xl text-white hover:text-rhino-purple transition-all">{item.goto}</a></p>
                         ))}
                 </div>
                 <div

src/pages/index.jsx

@@ -1,13 +1,15 @@
 import React from "react";
 import Hero from "../components/hero";
 import Content from "../components/content";
+import Ecosystem from "../components/ecosystem";
 import Quote from "../components/quote";
 import Footer from "../components/footer";
 
 export default function Home() {
   return (
     <main>
       <Hero />
+      <Ecosystem />
       <Content />
       <Quote />
       <Footer />

tailwind.config.js

@@ -21,6 +21,20 @@ module.exports = {
         'hero-pattern': "url('/img/blobs.png')",
         'orb-pattern': "url('/img/orb.png')",
       },
+      keyframes: {
+        'slide-in': {
+          '0%': { opacity: '0', transform: 'translateX(100%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+        'slide-out': {
+          '0%': { opacity: '0', transform: 'translateX(-100%)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' },
+        },
+      },
+      animation: {
+        'slide-in': 'slide-in 0.5s ease-in-out',
+        'slide-out': 'slide-out 0.5s ease-in-out',
+      },
     },
   },
   plugins: [],