feat: #2 newHomePage

package.json

@@ -9,17 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.3"
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0"
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
   }
 }

src/app/globals.css

@@ -21,5 +21,8 @@ body,
 
 :root {
   --color-close2White: 242 242 242;
-  --navbar: 0px;
+  --color-blue: 1 79 134;
+  --color-darkblue: 1 42 74;
+  --color-black: 0 8 20;
+  --navbar: 50px;
 }

src/app/page.tsx

@@ -1,7 +1,44 @@
+import Box from "@/components/common/Box/Box";
+import Image from "next/image";
+import Laptop from "@/assets/home/laptop.jpg";
+import { FaArrowRight } from "react-icons/fa6";
+
 export default function Home() {
   return (
-    <main className="flex min-h-max w-max bg-close2White">
-      <div className="text-red-400">Witamy w Konferno</div>
+    <main className="flex min-h-max min-w-screen bg-black2darkblue-gradient justify-center items-center mt-navbar">
+      <Box>
+        <div className="grid grid-cols-2 w-full h-full">
+          <div className="pr-8">
+            <h1 className="text-4xl font-bold mb-6">Witamy w Konferno</h1>
+            <p className="text-xl mb-8">
+              Najlepszej stronie do organizacji konferencji
+            </p>
+            <p className="text-xl mb-8">
+              Zapewniamy niezawodne planowanie konferencji, rejestrację
+              uczestników , zarządzanie harmonogramem sesji i prezentacji oraz
+              publikację materiałów konferencyjnych
+            </p>
+            <p className="text-xl mb-8">
+              Rozsiądz się wygodnie i zostaw wszystko nam...
+            </p>
+            <div className="flex items-center justify-center w-full">
+              <button className="bg-close2White text-blue text-lg font-medium py-3 px-6 rounded-2xl flex items-center justify-center">
+                <a href="/login">Dołącz do nas</a>
+                <div className="ml-6 w-9 h-9 rounded-full bg-blue flex items-center justify-center">
+                  <FaArrowRight className="text-close2White" />
+                </div>
+              </button>
+            </div>
+          </div>
+          <div className="w-full h-full flex items-center">
+            <Image
+              src={Laptop}
+              alt="LaptopImage"
+              className="h-[384px] w-[640px] rounded-3xl"
+            />
+          </div>
+        </div>
+      </Box>
     </main>
   );
 }

src/components/common/Box/Box.tsx

@@ -0,0 +1,7 @@
+export default function Box({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="items-start h-auto w-[70%] bg-darkblue2blue-gradient z-0 rounded-3xl px-8 py-8 text-close2White">
+      {children}
+    </main>
+  );
+}

src/components/common/Page/Page.tsx

@@ -1,3 +1,7 @@
 export default function Page({ children }: { children: React.ReactNode }) {
-  return <main className="flex min-h-max bg-yellow-300 z-0">{children}</main>;
+  return (
+    <main className="flex min-h-max bg-yellow-300 z-0 item-center">
+      {children}
+    </main>
+  );
 }

tailwind.config.ts

@@ -9,16 +9,23 @@ const config: Config = {
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "darkblue2blue-gradient":
+          "linear-gradient(to bottom right, rgb(var(--color-darkblue)), rgb(var(--color-blue)))",
+        "black2darkblue-gradient":
+          "radial-gradient(circle at 0% 100%, rgb(var(--color-black)) 0%, transparent 60%), radial-gradient(circle at 14% 86%, rgb(var(--color-darkblue)) 20%, transparent 70%), radial-gradient(circle at 29% 71%, rgb(var(--color-black)) 20%, transparent 70%), radial-gradient(circle at 83% 17%, rgb(var(--color-darkblue)) 30%, transparent 90%), radial-gradient(circle at 57% 43%, rgb(var(--color-black)) 40%, transparent 90%), radial-gradient(circle at 91% 89%, rgb(var(--color-black)) 90%, transparent 80%), radial-gradient(circle at 86% 14%, rgb(var(--color-black)) 60%, transparent 70%), radial-gradient(circle at 100% 0%, rgb(var(--color-darkblue)) 50%, transparent 60%)",
       },
       colors: {
         close2White: "rgb(var(--color-close2White) / <alpha-value>)",
+        blue: "rgb(var(--color-blue) / <alpha-value>)",
+        darkblue: "rgb(var(--color-darkblue) / <alpha-value>)",
+        black: "rgb(var(--color-black) / <alpha-value>)",
       },
       padding: {
         navbar: "var(--navbar)",
       },
+      margin: {
+        navbar: "var(--navbar)",
+      },
       height: {
         navbar: "var(--navbar)",
       },