chore: docs (#331)

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,18 @@
+import Link from 'next/link';
+
+const CrossPlatform = () => {
+  return (
+    <section className='space-y-8 mt-32' id='cross-platform'>
+      <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.
+        <Link href='/docs/usage' className='text-blue-500'> Learn more → </Link>
+      </p>
+      <div></div>
+    </section>
+  );
+};
+
+export default CrossPlatform;

apps/documentation/components/home/Customizable.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import CreateRun from '../packages/wes/createRun/createRun';
+import Link from 'next/link';
+
+const Customizable = () => {
+  const [customColor, setCustomColor] = useState('#3c83f6');
+  const [customCorner, setCustomCorner] = useState(0.5);
+  const [customDepth, setCustomDepth] = useState(1);
+  const [customDensity, setCustomDensity] = useState(0.5);
+  const [customSizing, setCustomSizing] = useState(0.9);
+  const [customFontSize, setCustomFontSize] = useState(0.9);
+  const [customMotion, setCustomMotion] = useState(250);
+
+  return (
+    <section className='space-y-8 mt-32' id='customizable'>
+      <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.
+        <Link href='/docs/customization' className='text-blue-500'> Learn more → </Link>
+      </p>
+      <div className='flex justify-center gap-10'>
+        <div className='flex flex-col gap-6 justify-center w-[40%]'>
+          {[
+            { label: 'Brand Color', id: '--ecc-color-brand', type: 'color', min: undefined, max: undefined, value: customColor, setValue: setCustomColor },
+            { label: 'Corner Radius', id: '--ecc-corner', type: 'range', min: 0, max: 1, value: customCorner, setValue: setCustomCorner, unit: 'rem' },
+            { label: 'Depth', id: '--ecc-depth', type: 'range', min: 0, max: 1, value: customDepth, setValue: setCustomDepth },
+            { label: 'Density', id: '--ecc-density', type: 'range', min: 0, max: 1, value: customDensity, setValue: setCustomDensity, unit: 'rem' },
+            { label: 'Sizing', id: '--ecc-sizing', type: 'range', min: 0, max: 1.5, value: customSizing, setValue: setCustomSizing, unit: 'rem' },
+            { label: 'Font Size', id: '--ecc-font-size', type: 'range', min: 0.5, max: 1.5, value: customFontSize, setValue: setCustomFontSize, unit: 'rem' },
+            { label: 'Motion', id: '--ecc-motion', type: 'range', min: 0, max: 1000, value: customMotion, setValue: setCustomMotion, unit: 'ms' },
+          ].map(({ label, id, type, min, max, value, setValue, unit }) => (
+            <div key={id} className='flex flex-col gap-2'>
+              <div className='flex items-center justify-between'>
+                <label htmlFor={id} className='text-sm font-medium text-gray-700 dark:text-gray-300'>{label}</label>
+                <span className='text-sm text-gray-500 dark:text-gray-400'>{value}{unit}</span>
+              </div>
+              <input
+                type={type}
+                id={id}
+                min={min}
+                max={max}
+                step={type === 'range' ? '0.01' : undefined}
+                className={`w-full rounded-lg appearance-none cursor-pointer ${
+                  type === 'color' ? 'h-10 p-0 rounded-lg bg-transparent m-[-3px] w-[calc(100%+6px)]' : 'h-2 bg-gray-200 dark:bg-gray-700'
+                }`}
+                value={value}
+                onChange={(e) => {
+                  const newValue = type === 'range' ? parseFloat(e.target.value) : e.target.value;
+                  setValue(newValue as any);
+                  document.documentElement.style.setProperty(id, `${newValue}${unit || ''}`);
+                }}
+              />
+            </div>
+          ))}
+        </div>
+        <div className='w-[40%]'>
+          <CreateRun />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Customizable;

apps/documentation/components/home/Hero.tsx

@@ -0,0 +1,49 @@
+'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>
+  );
+}