chore: docs

apps/documentation/components/common/Card.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link';
+
+const Card = ({ title, href }) => {
+  return (
+    <Link
+      className='inline px-4 py-3 bg-white dark:bg-zinc-800 hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded-lg shadow-md text-zinc-900 dark:text-zinc-100 w-full'
+      href={href}
+    >
+      {title}
+    </Link>
+  );
+};
+
+export default Card;

apps/documentation/components/common/ComponentName.tsx

@@ -0,0 +1,26 @@
+function ComponentName({ tagName, reactTagName, version, beta = false }) {
+  return (
+    <div className='flex flex-wrap gap-2 font-mono text'>
+      {beta ? (
+        <div className='px-2 py-1 text-xs text-white bg-red-500 rounded-xl'>Beta</div>
+      ) : (
+        <> </>
+      )}
+      <div className='px-2 py-1 text-xs text-white bg-sky-500 rounded-xl'>{version}</div>
+      <div
+        className='flex items-center cursor-copy px-2 py-1 text-xs dark:text-zinc-100 text-zinc-900 bg-zinc-200 dark:bg-zinc-700 rounded-md'
+        onClick={() => navigator.clipboard.writeText(tagName)}
+      >
+        &lt;{tagName}/&gt;
+      </div>
+      <div
+        className='flex items-center cursor-copy px-2 py-1 text-xs dark:text-zinc-100 text-zinc-900 bg-zinc-200 dark:bg-zinc-700 rounded-md'
+        onClick={() => navigator.clipboard.writeText(reactTagName)}
+      >
+        {reactTagName}
+      </div>
+    </div>
+  );
+}
+
+export default ComponentName;

apps/documentation/components/common/Footer.tsx

@@ -0,0 +1,51 @@
+import Image from 'next/image';
+
+function Footer() {
+  return (
+    <div className='flex justify-center items-center p-1 border-t dark:border-zinc-800 border-zinc-200 rounded-md'>
+      <div className='container flex flex-col sm:flex-row justify-between px-4 py-4'>
+        <div className='flex justify-center items-center my-2 gap-4'>
+          <a href='https://elixir-cloud.dcc.sib.swiss/' target='_blank' rel='noopener noreferrer'>
+            <Image src='/elixir-cloud/logo.svg' alt='Elixir Cloud & AAI' width={75} height={75} />
+          </a>
+          <Image
+            src='/cloud-sdk/dark.svg'
+            alt='Cloud SDK'
+            width={75}
+            height={75}
+            className='dark:block hidden'
+          />
+          <Image
+            src='/cloud-sdk/light.svg'
+            alt='Cloud SDK'
+            width={75}
+            height={75}
+            className='block dark:hidden'
+          />
+          <a href='https://elixir-europe.org/' target='_blank' rel='noopener noreferrer'>
+            <Image
+              src='/elixir/dark.png'
+              alt='Elixir'
+              width={75}
+              height={75}
+              className='dark:block hidden ml-2'
+            />
+            <Image
+              src='/elixir/light.svg'
+              alt='Elixir'
+              width={95}
+              height={95}
+              className='block dark:hidden'
+            />
+          </a>
+        </div>
+        <div className='flex flex-col text-zinc-500 text-xs sm:text-sm justify-center items-center'>
+          <p>Released under Apache 2.0 License.</p>
+          <p>Copyright © 2023-{new Date().getFullYear()} ELIXIR</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;

apps/documentation/components/home/CrossPlatform.tsx

@@ -0,0 +1,16 @@
+const CrossPlatform = () => {
+
+    return (
+        <section className="space-y-8 mt-32">
+            <h2 className="text-4xl font-extrabold text-center">Cross-platform</h2>
+            <p className="text-center text-xl text-zinc-600 dark:text-zinc-300 max-w-4xl mx-auto">
+                ECC's are built using web components, making them framework-agnostic.
+                This allows you to seamlessly integrate them into your projects, whether you're working with React, Vue, vanilla HTML, or any other web development framework.
+            </p>
+            <div>
+            </div>
+        </section>
+    );
+};
+
+export default CrossPlatform;

apps/documentation/components/home/Customizable.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+
+const Customizable = () => {
+    const [customColor, setCustomColor] = useState('#000000');
+
+    return (
+        <section className="space-y-8 mt-32">
+            <h2 className="text-4xl font-extrabold text-center">Customizable</h2>
+            <p className="text-center text-xl text-zinc-600 dark:text-zinc-300 max-w-4xl mx-auto">
+                Easily adapt our components to match your brand's design language.
+                Our flexible architecture allows for deep customization while maintaining functionality.
+            </p>
+            <input
+                type="color"
+                id="colorPicker"
+                value={customColor}
+                onChange={(e) => setCustomColor(e.target.value)}
+            />
+        </section >
+    );
+};
+
+export default Customizable;

apps/documentation/components/home/Hero.tsx

@@ -0,0 +1,51 @@
+'use client';
+import { RiArrowRightLine } from '@remixicon/react';
+import { Link } from 'nextra-theme-docs';
+
+
+export default function Hero() {
+
+  return (
+    <div className='mx-auto static mt-0 md:mt-[7rem] flex flex-col items-center'>
+      <div className='flex flex-col items-center w-full md:w-5/6'>
+        <h1 className='text-7xl font-extrabold bg-gradient-to-r from-sky-600 to-green-400 via-sky-400 text-transparent bg-clip-text text-center flex-col items-center gap-4 hidden md:flex'>
+          <div>The Component Library</div>
+          <div>for Federated Cloud Services</div>
+        </h1>
+        <h1 className='text-4xl mt-32 font-extrabold bg-gradient-to-r from-sky-600 to-green-400 via-sky-400 text-transparent bg-clip-text text-center block md:hidden'>
+          The Component Library for Federated Cloud Services
+        </h1>
+        <p className='mt-6 md:mt-8 text-base md:text-xl text-zinc-500 max-w-7xl text-center'>
+          Modular, customizable, and extensible components for interacting with cloud
+          infrastructure.
+        </p>
+        <div className='flex flex-wrap gap-4 mt-10 md:mt-12 text-sm md:text-base items-center justify-center'>
+          <Link
+            href='/docs/introduction'
+            className='rounded-xl bg-sky-600 hover:bg-sky-500 !text-white py-2 px-6 transition duration-300 ease-in-out flex items-center gap-1'
+            style={{ textDecoration: 'none' }}
+          >
+            Get started
+            <RiArrowRightLine className='inline-block h-4' />
+          </Link>
+          <Link
+            href='/docs/installation'
+            className='rounded-xl dark:bg-zinc-700 dark:hover:bg-zinc-600 bg-zinc-300 hover:bg-zinc-200 dark:!text-white !text-zinc-900 py-2 px-6 transition duration-300 ease-in-out flex items-center justify-center'
+            style={{ textDecoration: 'none' }}
+          >
+            Install
+          </Link>
+          <div className='p-0.5 rounded-xl flex items-center justify-center bg-gradient-to-r from-sky-600 to-green-400 via-sky-400'>
+            <Link
+              href='/docs/customization'
+              className='rounded-xl dark:bg-zinc-700 dark:hover:bg-zinc-600 bg-zinc-300 hover:bg-zinc-200 dark:!text-white !text-zinc-900 py-1.5 px-6 transition duration-300 ease-in-out w-full'
+              style={{ textDecoration: 'none' }}
+            >
+              Make your own?
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div >
+  );
+}