feature: implemented welcome page

public/index.html

@@ -17,6 +17,7 @@
     <script defer src="/__/firebase/12.1.0/firebase-analytics-compat.js"></script>
     <script defer src="/__/firebase/12.1.0/firebase-remote-config-compat.js"></script>
     <script defer src="/__/firebase/12.1.0/firebase-performance-compat.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=visibility" />
     <!-- 
       initialize the SDK after all desired features are loaded, set useEmulator to false
       to avoid connecting the SDK to running emulators.

src/App.jsx

@@ -1,17 +1,14 @@
-import './App.css'
-import Header from './components/layout/Header'
+import "./App.css";
+import Header from "./components/layout/Header";
+import WelcomePage from "./pages/WelcomePage";
 
 function App() {
-
-
   return (
     <>
-      <Header/>
-
-
-
+      <Header />
+      <WelcomePage />
     </>
-  )
+  );
 }
 
-export default App
+export default App;

src/index.css

@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
 
 :root {
   --text: #1a1a1a;
-  --background: #ffffff;
+  --background: #fffffe;
   --buttonBackground: #f9f9f9;
   --buttonBorder: #202020;
   --inputBackground: #f9f9f9;
@@ -12,7 +12,7 @@
   --cardSpanBackground: white;
   --spanTextColor: #6b7280;
   --dividerColor: #e5e7eb;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 /* Dark mode styles */
@@ -53,3 +53,64 @@ button {
 button:hover {
   opacity: 0.8;
 }
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 20px;
+}
+
+.welcome-buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+.welcome-buttons button {
+  flex: 1;
+  max-width: 200px;
+  background-color: transparent;
+}
+.welcome-buttons button:first-child {
+  background-color: var(--buttonBackground);
+  color: var(--text);
+  border-color: var(--buttonBorder);
+} /* Add at the end of your index.css */
+.card-bg {
+  background-color: var(--cardBackground);
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
+  width: 500px;
+  border: var(--dividerColor) 1px solid;
+}
+.card-bg:hover {
+  box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.2);
+  transition: 0.2s ease-in-out;
+  cursor: pointer;
+}
+.features {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: space-evenly;
+}
+.boost-productivity {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 700px;
+  margin-top: 30px;
+}
+h1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 4rem;
+}

src/pages/WelcomePage.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import logo from '../assets/logo.svg';
+
+const pageData = {
+    hero: {
+        title: "Welcome to",
+        description: "The modern task management platform that helps teams stay organized, productive, and focused on what matters most.",
+        buttons: [
+            { text: "Get Started", onClick: () => {} },
+            { text: "Try Demo", onClick: () => {} }
+        ]
+    },
+    features: [
+        {
+            title: "Kanban Boards",
+            description: "Organize your tasks with intuitive drag-and-drop boards"
+        },
+        {
+            title: "Team Collaboration",
+            description: "Work together seamlessly with your team members"
+        },
+        {
+            title: "Fast & Responsive",
+            description: "Lightning-fast performance with real-time updates"
+        },
+        {
+            title: "Secure & Private",
+            description: "Your data is protected with enterprise-grade security"
+        }
+    ],
+    cta: {
+        title: "Ready to boost your productivity?",
+        description: "Join thousands of teams already using DragMe to manage their projects efficiently.",
+        buttonText: "Start Your Journey"
+    }
+};
+
+function WelcomePage() {
+    return (
+        <main className="container bg">
+            <section className="get-started">
+                <h1 className="text">{pageData.hero.title} <img width={200} src={logo} alt="logo" /></h1>
+                <p className="span-text">{pageData.hero.description}</p>
+                <div className="welcome-buttons">
+                    {pageData.hero.buttons.map((button, index) => (
+                        <button 
+                            key={index}
+                            className="button-bg button-border text"
+                            onClick={button.onClick}
+                        >
+                            {button.text}
+                        </button>
+                    ))}
+                </div>
+            </section>
+
+            <section className="features">
+                {pageData.features.map((feature, index) => (
+                    <div key={index} className="card-bg">
+                        <h3 className="text">{feature.title}</h3>
+                        <p className="span-text">{feature.description}</p>
+                    </div>
+                ))}
+            </section>
+
+            <section className="card-bg boost-productivity">
+                <h2 className="text">{pageData.cta.title}</h2>
+                <p className="span-text">{pageData.cta.description}</p>
+                <button className="button-bg button-border text">
+                    {pageData.cta.buttonText}
+                </button>
+            </section>
+        </main>
+    );
+}
+
+export default WelcomePage;