Changes

Workly/src/App.css

@@ -61,24 +61,52 @@
 }
 .Introduction .Con2
 {
-  background-color: red;
   color: black;
   width: 40%;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
 }
 .Con2 .Title
 {
-  background-color: green;
-  width: 80%;
-  overflow-wrap: break-word; 
+  text-align: center;
+}
+.Con2 .Title span {
+  display: block; 
+  line-height: 1;
+  letter-spacing: 0.2rem;
 }
-
 .Con2 .Title .bold-text
 {
-  font-size: 60px;
+  font-size: 4rem;
   font-weight: bold;
 }
+.Con2 .Title .regular-text
+{
+  font-size: 2rem;
+}
+.Con2 .Description
+{
+  margin-top: 1rem;
+  overflow-wrap: break-word; 
+  text-align: center;
+  width: 77%;
+}
+.Con2 .Description .bold-text
+{
+  font-weight:bold;
+}
+
+.Con2 .Start
+{
+  margin-top: 1rem;
+  background-color: black;
+  border: none;
+  height: 2rem;
+  width: 7rem;
+  border-radius: 0.2rem;
+  cursor: pointer;
+}
 
 .Introduction .Con3
 {

Workly/src/App.tsx

@@ -17,8 +17,18 @@ function App() {
         <div className="Con1"></div>
         <div className="Con2">
           <div className="Title">
-            <span className="bold-text">STREAMLINING</span> AND <span className="bold-text">MODERNIZING</span> <span className="regular-text">JOB APPLICATIONS</span>
+            <span className="bold-text">STREAMLINING</span>
+            <span className="regular-text">AND</span>
+            <span className="bold-text">MODERNIZING</span>
+            <span className="regular-text">JOB APPLICATIONS</span>
           </div>
+          <div className="Description">
+            <p><span className="bold-text">WORKLY.</span> streamlines the job application process by bringing everything into one central system, making it easier for both applicants and employers.</p>
+          </div>
+          <button className="Start">
+            START NOW
+            
+          </button>
         </div>
         <div className="Con3"></div>
       </div>