Add leader and maintainer info to contact page

src/components/AboutPage.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Card } from '@material-tailwind/react';
+
+export default function AboutPage() {
+  return (
+      <Card className='mt-20 bg-opacity-70 max-w-content p-5 flex flex-col gap-10'>
+        <h1 className='text-3xl font-bold mb-6 bg-opacity-100'>About Us</h1>
+        <div className="flex flex-row flex-wrap content-start justify-center items-center gap-10">
+          <div className="mx-w-full w-80 text-justify">
+              Our alliance is dedicate to create a strong and inclusive community where every member can feel at home.
+              We are from all over the World: respecting and promoting diversity is one of our main strengths.
+              A lot of our members happened to meet for playing but ended up forming strong bonds in real life.
+          </div>
+          <div>
+            <img src="src/assets/hive.jpg" alt="Group" className="group-image" />
+          </div>
+        </div>
+
+        <div className="flex flex-col flex-wrap content-start justify-center items-center gap-10 m-auto mb-5">
+          <h2 className='text-justify'>Group Roles</h2>
+          <div className="feature">
+            <h3 className='text-center'>The Leader</h3>
+            <img src="src/assets/tanjiro.jpg" alt="Leader" className="m-auto" />
+            <p className='text-center'>The Leader, The Boss, The Heart of the Alliance</p>
+          </div>
+          <div className="feature">
+            <h3>The Diplomatic</h3>
+            <img src="src/assets/ginger.jpg" alt="Diplomacy" className="m-auto" />
+            <p>Maneuvering behind the scenes and entertaining good relationships with others</p>
+          </div>
+          <div className="feature head-office">
+          <h3>The Head Office</h3>
+            <div className="flex flex-wrap gap-5">
+              <img src="src/assets/paprika.png" alt="Head Office" className="m-auto" />
+              <img src="src/assets/red.png" alt="Head Office" className="m-auto" />
+            </div>
+            <p>Recruiting new people and taking care of public relationships</p>
+          </div>
+          <div className="feature warlords">
+          <h3>The Warlords</h3>
+            <div className="flex flex-wrap gap-5">
+              <img src="src/assets/zoro.jpg" alt="Warlords" className="m-auto" />
+              <img src="src/assets/cinnamon.png" alt="Warlords" className="m-auto" />
+            </div>
+            <p>Leading the alliance's legions on the Battlefield</p>
+          </div>
+          {/* Add more icons and descriptions if needed */}
+        </div>
+      </Card>
+  );
+};

src/components/ContactPage.tsx

@@ -0,0 +1,20 @@
+// src/components/HomePage.jsx
+import { Card } from '@material-tailwind/react';
+import React from 'react';
+
+export default function ContactPage() {
+  return (
+    <Card className='mt-20 bg-opacity-70 max-w-content p-5 flex flex-col gap-10'>
+      <h1 className="font-bold text-3xl">Contact</h1>
+      <div>
+        <a href="https://discord.gg/UM6rDcv7" className="inline-block mt-4 bg-blue-600 text-white max-w-content no-underline rounded text-xl hover:bg-blue-700 px-2 py-1">Join Us On Discord</a>
+      </div>
+      <div>
+        <h2>You cam contact our leader <b>༈Harrisa Habibi༈</b> in state <b>#1285</b> in-game</h2>
+      </div>
+      <div>
+        <h2>You can contact the maintainers of this website by writing to <a className='font-bold' href="mailto:the.spice.cinna@gmail.com">the.spice.cinna@gmail.com</a></h2>
+      </div>
+      </Card>
+  );
+};

src/components/HomePage.tsx

@@ -0,0 +1,13 @@
+// src/components/HomePage.jsx
+import React from 'react';
+
+const HomePage = () => {
+  return (
+    <>
+      <h1 className="mb-5 text-orange-600 font-bold text-3xl pt-20">INTernational</h1>
+      <a href="https://discord.gg/UM6rDcv7" className="inline-block mt-4 bg-blue-600 text-white no-underline rounded text-xl hover:bg-blue-700 px-2 py-1">Join Us On Discord</a>
+    </>
+  );
+};
+
+export default HomePage;

src/output.css

@@ -788,10 +788,6 @@ video {
   margin: 1rem;
 }
 
-.m-5 {
-  margin: 1.25rem;
-}
-
 .m-auto {
   margin: auto;
 }
@@ -832,6 +828,10 @@ video {
   margin-bottom: 1.25rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-0\.5 {
   margin-left: 0.125rem;
 }
@@ -888,14 +888,6 @@ video {
   margin-top: 1px;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
-}
-
-.mt-10 {
-  margin-top: 2.5rem;
-}
-
 .box-border {
   box-sizing: border-box;
 }
@@ -1121,6 +1113,10 @@ video {
   width: 2rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-9 {
   width: 2.25rem;
 }
@@ -1150,14 +1146,6 @@ video {
   width: 100vw;
 }
 
-.w-40 {
-  width: 10rem;
-}
-
-.w-80 {
-  width: 20rem;
-}
-
 .min-w-\[100vw\] {
   min-width: 100vw;
 }
@@ -1202,10 +1190,6 @@ video {
   min-width: 100%;
 }
 
-.min-w-80 {
-  min-width: 20rem;
-}
-
 .max-w-\[100vw\] {
   max-width: 100vw;
 }
@@ -1417,6 +1401,10 @@ video {
   gap: 0.25rem;
 }
 
+.gap-10 {
+  gap: 2.5rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1433,10 +1421,6 @@ video {
   gap: 1.25rem;
 }
 
-.gap-10 {
-  gap: 2.5rem;
-}
-
 .divide-x > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-x-reverse: 0;
   border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -2124,10 +2108,6 @@ video {
   --tw-bg-opacity: 1;
 }
 
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .bg-opacity-60 {
   --tw-bg-opacity: 0.6;
 }
@@ -2140,10 +2120,6 @@ video {
   --tw-bg-opacity: 0.8;
 }
 
-.bg-opacity-90 {
-  --tw-bg-opacity: 0.9;
-}
-
 .bg-gradient-to-tr {
   background-image: linear-gradient(to top right, var(--tw-gradient-stops));
 }
@@ -2530,10 +2506,6 @@ video {
   padding-top: 1.25rem;
 }
 
-.pt-6 {
-  padding-top: 1.5rem;
-}
-
 .pt-\[9px\] {
   padding-top: 9px;
 }
@@ -2542,6 +2514,10 @@ video {
   padding-top: 1px;
 }
 
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
 .text-left {
   text-align: left;
 }