Merge pull request #3 from Peer-at-Code/feat/home-page

home-page

.idea/workspace.xml

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="44703a71-8c23-4abc-a0c7-354169d39572" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="MacroExpansionManager">
+    <option name="directoryName" value="kuiu26lf" />
+  </component>
+  <component name="MarkdownSettingsMigration">
+    <option name="stateVersion" value="1" />
+  </component>
+  <component name="ProjectId" id="2LlxfrPPBBoJTygslN7qTFq3TFz" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "last_opened_file_path": "C:/Users/etuni/OneDrive/Documents/Cours/2eme/js",
+    "node.js.detected.package.eslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "nodejs_package_manager_path": "pnpm",
+    "prettierjs.PrettierConfiguration.Package": "C:\\dev\\peer-at-code-web\\node_modules\\prettier",
+    "vue.rearranger.settings.migration": "true"
+  }
+}]]></component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="44703a71-8c23-4abc-a0c7-354169d39572" name="Changes" comment="" />
+      <created>1676459578077</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1676459578077</updated>
+      <workItem from="1676459581979" duration="23000" />
+      <workItem from="1676907487953" duration="78000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+</project>

app/page.tsx

@@ -1,14 +1,35 @@
 import AppLink from '@/ui/AppLink';
+import Console from '@/ui/Console';
 
 export default function Home() {
   return (
-    <div className="flex h-screen w-full">
+    <div>
-      <div className="m-auto flex flex-col">
+      <div className="flex h-screen w-full">
-        <h1 className="text-center text-4xl font-bold">
+        <div className="m-auto flex flex-col space-y-2">
-          Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
+          <h1 className="text-center text-6xl font-bold">Bienvenu sur</h1>
-          <span className="text-blue-500">Tailwindcss</span> !
+          <span>
-        </h1>
+            <Console text="Peer-at Code" />
-        <AppLink href="/dashboard">Dashboard</AppLink>
+          </span>
+          <AppLink href="/dashboard">Dashboard</AppLink>
+        </div>
+      </div>
+      <div className="flex h-screen w-full">
+        <div className="m-auto flex flex-col space-x-0  text-center md:flex-row md:space-x-6 md:space-y-0">
+          <img
+            className="ml-[11%] w-0 sm:w-0 md:w-2/6 "
+            src="https://media.discordapp.net/attachments/1070815084718334032/1074104191921959003/glazk0_a_minimalistic_logo_that_is_a_pirate_logo_white_and_blac_9b4eb1dd-5979-45dd-a70a-f880ee3b49ca.png?width=586&height=586"
+          ></img>
+          <p className="w-4/6 self-center text-justify sm:w-3/6 md:w-2/6">
+            Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en
+            page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis
+            les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
+            réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq
+            siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu
+            n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles
+            Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion
+            dans des applications de mise en page de texte, comme Aldus PageMaker.
+          </p>
+        </div>
       </div>
     </div>
   );

styles/globals.css

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .console {
+    @apply relative top-0.5 inline-block;
+    /* make it hidden then visible every seconde */
+  }
+}

ui/Console.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+
+export default function Console({ text, className }: { text: string; className?: string }) {
+  const [message, setMessage] = useState('');
+  const [typingIndex, setTypingIndex] = useState(0);
+
+  const typingDelay = 400; // The delay between each character being typed, in milliseconds
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setTypingIndex((prevIndex) => prevIndex + 1);
+    }, typingDelay);
+
+    return () => clearInterval(intervalId);
+  }, [text]);
+
+  useEffect(() => {
+    if (typingIndex <= text.length) {
+      setMessage(text.slice(0, typingIndex));
+    }
+  }, [typingIndex, text]);
+
+  return (
+    <div className="inline-block h-4">
+      <span className={cn('text-4xl', className)}>{message}</span>
+      <div
+        className={cn('relative top-0.5 inline-block', {
+          hidden: typingIndex % 2 === 0
+        })}
+      >
+        &#95;
+      </div>
+    </div>
+  );
+}