Add feature

frontend/src/app/projects/view/add-from-scratch/styles.module.css

@@ -1,23 +1,24 @@
 .content {
   display: flex;
-  padding: 0 16px;
+
   flex-direction: column;
   align-items: flex-start;
-  height: calc(100vh - 170px);
-  /* ✅ fills remaining space */
+  gap: 32px;
   min-height: 0;
+
   align-self: stretch;
 }
 .contentContainer {
   display: flex;
   align-items: flex-start;
+  height: calc(100vh - 240px);
   flex: 1;
-  background-color: red;
+
   align-self: stretch;
 }
 
 .heading {
-  display: flex;
+  display: none;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
@@ -41,10 +42,12 @@
   color: #85869b;
   font-family: Inter;
   font-size: 18px;
-  font-style: normal;
+
   font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.18px;
+}
+.heading .active {
+  border-bottom: 1px solid #959aff;
+  color: #959aff;
 }
 .fieldsContainerCreateNew {
   display: flex;
@@ -53,9 +56,9 @@
   align-items: flex-start;
   gap: 36px;
   background: #191a24;
-  height: 100%;
+  height: calc(100vh - 170px);
   min-height: 0;
-  background-color: red;
+  flex: 1;
   overflow-y: scroll;
   scrollbar-width: none;
 }
@@ -90,9 +93,58 @@
   gap: 16px;
   align-self: stretch;
 }
+.radioButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.radioButtonContainer > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  padding: 20px 0;
+}
+.textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 16px;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  outline: none;
+}
+.textarea:focus {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.textarea:focus::placeholder {
+  color: #4b4f6d;
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
 .resource {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -126,7 +178,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  gap: 12px;
+  gap: 16px;
   flex: 1 0 0;
 }
 .fieldsCreateNew > div > div p,
@@ -249,3 +301,32 @@
   line-height: normal;
   letter-spacing: 0.16px;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .heading {
+    display: flex;
+  }
+  .fieldsContainerCreateNew {
+    height: calc(100vh - 262px);
+  }
+  .content {
+    padding: 0;
+  }
+  .fieldsCreateNew .inputGroup,
+  .additionalDetailsFields > div .inputGroup,
+  .resourceFields .inputGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .fieldsCreateNew .inputGroup div,
+  .additionalDetailsFields > div .inputGroup div,
+  .resourceFields .inputGroup div {
+    width: 100%;
+  }
+}