new view and components

app/globals.css

@@ -13,6 +13,8 @@ body {
 }
 
 header {
+  display: grid;
+  grid-template-columns: auto 1fr;
   padding: 5px 40px;
   position: relative;
   overflow: hidden;
@@ -61,8 +63,8 @@ footer {
 }
 
 .container {
-  display: grid;
-  grid-template-columns: 1fr 400px;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-items: center;
   position: relative;
@@ -81,17 +83,17 @@ footer {
 }
 
 .containerSection {
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-width: 500px;
-  height: 400px;
-  border-radius: 4px;
-  padding: 1.5rem;
 }
 
+.containerForm{
+  width: 100%;
+  max-width: 450px;
+}
 
 .img {
   position: absolute;
@@ -114,23 +116,18 @@ footer {
   background: linear-gradient(to right, #f9f9f9, rgba(128, 128, 128, 0));
 }
 
-input {
+input,
+select {
   flex: 1;
   min-width: 200px;
   padding: 0.5rem;
   border: 1px solid #cfcfcf;
+  background-color: #fff;
   border-radius: 4px;
   font-size: 1rem;
   color: black;
 }
 
-select {
-  padding: 0.5rem;
-  border-radius: 4px;
-  border: 1px solid #cfcfcf;
-  background-color: white;
-}
-
 .groupInput {
   display: flex;
   flex-wrap: wrap;
@@ -169,7 +166,10 @@ select {
 }
 
 
-.buttonContainer {
+.absoluteButton {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
   display: flex;
   gap: 1rem;
 }
@@ -184,7 +184,7 @@ ul {
   margin-bottom: 10px;
 }
 
-.label {
+.label{
   font-size: 1rem;
   font-weight: bold;
   display: block;
@@ -198,18 +198,14 @@ a {
   display: flex;
   flex-direction: column;
   border: 1px solid #e5e7eb;
-  padding: 1rem;
   border-radius: 4px;
   background-color: #f3f4f6;
-  margin-top: 1rem;
+  width: 100%;
+  max-width: 400px;
 }
 
-.containerForm {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+.information ul{
+  padding: 1rem;
 }
 
 .title {
@@ -227,10 +223,23 @@ form {
   display: flex;
   flex-direction: column;
   width: 100%;
+}
+
+.padding {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  gap: 1rem;
+}
+
+.gap {
+  display: flex;
+  flex-direction: column;
   gap: 1rem;
 }
 
 .toggleSection {
+  width: 100%;
   max-width: 600px;
   margin-top: 1rem;
   border: 1px solid #e5e7eb;
@@ -258,6 +267,7 @@ form {
 
 .toggleButton.active {
   background-color: #e5e7eb;
+  border-radius: 4px 4px 0 0;
 }
 
 .toggleButton.active {
@@ -266,7 +276,7 @@ form {
 
 @media(max-width:800px) {
   header {
-    padding: 7px;
+    padding: 6px 16px;
   }
 
   .container {
@@ -307,6 +317,14 @@ form {
     right: 0;
     background: linear-gradient(to left, #f9f9f9, rgba(128, 128, 128, 0));
   }
+
+  .title {
+    text-align: center;
+  }
+
+  .containerSection {
+    align-items: center;
+  }
 }
 
 @media(max-height:960px) {