Choose division page complete

Workly/src/pages/Signup/Signup.modules.css

@@ -2,10 +2,11 @@
 {
     align-self: center;
     margin: 5rem auto;
-    height: 50rem;
-    width: 60rem;
+    height: 40rem;
+    width: 50rem;
+    background-color: white;
     border-radius: 0.8rem;
-    border: 1px solid #e5e7eb;
+    border: 1px solid #d0cccc;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.0);
 }
 .Div1 .Title 
@@ -13,4 +14,9 @@
     text-align: center;
     margin: 3rem auto;
     font-size: 2.5rem;
-}
\ No newline at end of file
+}
+
+
+
+
+

Workly/src/pages/Signup/Signup.tsx

 import "./Signup.modules.css"
+import "./components/ButtonGroup"
+import ButtonGroup from "./components/ButtonGroup";
 
 const Signup = () => {
 return(
@@ -7,6 +9,7 @@ return(
             <div className="Title">
                 <p>SELECT YOUR <strong>WORK</strong></p>
             </div>
+            <ButtonGroup/>
         </div>
     </>
     );

Workly/src/pages/Signup/components/ButtonGroup.Modules.css

+.Div2 {
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    margin-top: 20px;
+    gap: 8rem;
+    margin: 6rem;
+}
+
+.round-button {
+    width: 12rem;
+    height: 12rem;
+    border-radius: 50%; /* Makes it round */
+    border: none;
+    background-color: #ffffff;
+    color: white;
+    border: 1px solid lightgray;
+    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 1);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    position:relative;
+    align-items: center;
+    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
+}
+
+.round-button:hover {
+    transform: scale(1.1);
+}
+
+.round-button:active {
+    border: 3px solid rgb(0, 0, 0); /* Visible border when active */
+}
+
+.round-button.active {
+    border: 3px solid black !important; /* Ensures the border stays */
+    transform: scale(1.1);
+}
+
+.continue-button{
+    width: 12rem;
+    height: 3rem;
+    border-radius: 5%; /* Makes it round */
+    border: none;
+    background-color: black;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    margin: 2rem auto;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
+    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 1);
+}
+
+.continue-button:hover{
+    transform: scale(1.05);
+}
+
+.continue-button .buttonTitle{
+    text-align: center;
+    margin: 3rem auto;
+    font-size: 1rem;
+    color: white;
+    position:relative;
+    
+}
+
+.buttonTitle{
+    text-align: center;
+    margin: 3rem auto;
+    font-size: 2.5rem;
+    color: black;
+    position:relative;
+}
+
+.line-md--arrow-up {
+    display: inline-block;
+    rotate: z 90deg;
+    width: 16px;
+    height: 16px;
+    padding: 0 auto;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin: 0px auto;
+    transform: translateX(2px);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M12 21l0 -17.5'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.2s' values='20;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='12' stroke-dashoffset='12' d='M12 3l7 7M12 3l-7 7'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.2s' dur='0.2s' values='12;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}
+
+.ic--baseline-check-circle {
+    position: absolute; 
+    display: inline-block;
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    scale: 1.5;
+    background-color: white;
+    transform:  translate(44px,-45px);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8z'/%3E%3C/svg%3E");
+  }
\ No newline at end of file

Workly/src/pages/Signup/components/ButtonGroup.tsx

+import { useState } from "react";
+import "./ButtonGroup.Modules.css"
+
+const ButtonGroup = () => {
+  const [activeButton, setActiveButton] = useState<string | null>(null);
+
+  return (
+    <>
+    <div className={"Div2"}>
+      <button
+        className={`round-button ${activeButton === "IAPPLY" ? "active" : ""}`}
+        onClick={() => setActiveButton("IAPPLY")}
+      >
+        <div className={"buttonTitle"}>
+            IAPPLY
+        </div>
+        {activeButton === "IAPPLY" && (
+              <span className="ic--baseline-check-circle"></span>
+        )}
+      </button>
+      <button
+        className={`round-button ${activeButton === "IHIRE" ? "active" : ""}`}
+        onClick={() => setActiveButton("IHIRE")}
+      >
+        <div className={"buttonTitle"}>
+            IHIRE
+        </div>
+        {activeButton === "IHIRE" && (
+              <span className="ic--baseline-check-circle"></span>
+        )}
+      </button>
+    </div>
+    <button className="continue-button">
+        <div className="buttonTitle">
+            CONTINUE <span className="line-md--arrow-up"></span>
+        </div>
+    </button>
+    </>
+  );
+};
+
+export default ButtonGroup;
\ No newline at end of file