Merge pull request #2 from moevm/welcome-page

Welcome page

frontend/src/Components/FormCard/FormCard.tsx

@@ -0,0 +1,14 @@
+import {PropsWithChildren} from "react";
+
+function FormCard({children}: PropsWithChildren) {
+
+  return (
+    <>
+      <div className="w-5/12 h-max bg-base2 px-20 py-16 rounded-3xl">
+        {children}
+      </div>
+    </>
+  )
+}
+
+export default FormCard

frontend/src/Components/LoginButton/LoginButton.tsx

@@ -0,0 +1,21 @@
+import { ButtonHTMLAttributes } from "react";
+
+interface LoginButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  theme: "primary" | "secondary";
+}
+
+function LoginButton({theme, children, ...props}: LoginButtonProps) {
+
+  const styles = {
+    "primary": "bg-base1 text-white",
+    "secondary": "bg-additional text-base1"
+  }
+
+  return (
+    <button {...props} className={`${styles[theme]} font-poppins rounded-3xl w-full p-2`}>
+      {children}
+    </button>
+  )
+}
+
+export default LoginButton

frontend/src/Pages/Welcome/Welcome.tsx

@@ -1,12 +1,38 @@
 import Header from "../../Widgets/Header/Header.tsx";
+import SignOutButton from "../../Components/SignOutButton/SignOutButton.tsx";
+import ProfileButton from "../../Components/ProfileButton/ProfileButton.tsx";
+import LoginButton from "../../Components/LoginButton/LoginButton.tsx";
+import FormCard from "../../Components/FormCard/FormCard.tsx";
 
 
 function Welcome() {
 
   return (
     <>
-      <Header></Header>
-      <div id="login"></div>
+      <Header signOutButton={SignOutButton()} profileButton={ProfileButton()}></Header>
+      <div className="
+         w-full h-auto py-28
+         font-poppins text-center font-bold
+         flex justify-evenly items-center
+       "
+      >
+        <FormCard>
+          <h2 className="leading-relaxed text-4xl">
+            <span className="text-darkPurple">Welcome</span> to
+            <span className="text-base1"> DENTAL</span> CLINIC
+          </h2>
+          <p className="my-10 text-white text-2xl">
+            Discover a brighter, healthier smile with us. Our experienced team is dedicated to providing top-quality dental care in a comfortable environment. We offer a range of services tailored to your unique needs. Schedule your appointment today and let us take care of your smile.
+          </p>
+          <div className="flex flex-col justify-evenly h-32">
+            <LoginButton theme="primary" children="Login"></LoginButton>
+            {/*<LoginButton theme="secondary" children="Sign Up"></LoginButton>*/}
+          </div>
+        </FormCard>
+        <div className="">
+          <img className="bg-base1 rounded-full " src="src/assets/doctor-img1.png" alt=""/>
+        </div>
+      </div>
     </>
   )
 }

frontend/src/index.css

@@ -2,3 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html, body {
+    height: 100%;
+    width: 100%;
+}
+
+#root {
+    width: 100%;
+    height: 100%;
+}

frontend/tailwind.config.js

@@ -13,7 +13,10 @@ export default {
       darkBlue: "#4A90E2",
       base1: "#FF6B6B",
       base2: "#6EC5CC",
-      base3: "#5CC9A8"
+      base3: "#5CC9A8",
+      white: "#FFFFFF",
+      darkPurple: "#202660",
+      additional: "#A7D7C5"
     }
   },
   plugins: [],