Added new features

frontend/src/app/projects/view/add-from-scratch/page.jsx

@@ -0,0 +1,98 @@
+import React from "react";
+import globalStyle from "@/app/globalStyle.module.css";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import styles from "./styles.module.css";
+const AddServices = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            state="add"
+            topbarTitle="Create New Services"
+          />
+          <div className={styles.contentContainer}>
+            <div className={styles.fieldsContainerCreateNew}>
+              <div className={styles.projectDetails}>
+                <div className={styles.projectDetailsHeader}>
+                  <p>Project Details</p>
+                </div>
+                <div className={styles.fieldsCreateNew}>
+                  <div>
+                    <div>
+                      <p>
+                        Repository <span>(Optional)</span>
+                      </p>
+                      <label className={styles.repositoryForm} htmlFor="#repo">
+                        + Link Repository
+                      </label>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Name</p>
+                      <input type="text" placeholder="Enter service name" />
+                    </div>
+                    <div>
+                      <p>Version</p>
+                      <input type="text" placeholder="Service version" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>
+                        Image <span>(Optional)</span>
+                      </p>
+                      <input type="text" placeholder="Enter image name" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Port</p>
+                      <input type="text" placeholder="Enter port" />
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <p>Ingress</p>
+                      <select name="" id="">
+                        <option value="">Select</option>
+                      </select>
+                    </div>
+                    <div>
+                      <p>Ingress</p>
+                      <select name="" id="">
+                        <option value="">Select</option>
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.resource}></div>
+              <div className={styles.additionalDetails}>
+                <div>
+                  <div>
+                    <div className={styles.header}>
+                      <p>Auto Scaling</p>
+                      <div></div>
+                    </div>
+                    <div>
+                      <div></div>
+                    </div>
+                  </div>
+                </div>
+                <div></div>
+                <div></div>
+              </div>
+            </div>
+            <div className={styles.variables}></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddServices;