first commit

assets/css/contact.css

@@ -0,0 +1,63 @@
+  .contact-form {
+      background: linear-gradient(to bottom right, #F9B208, #E72E77); /* Gradient background */
+      padding: 30px;
+      border-radius: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      max-width: 500px;
+      width: 100%;
+      text-align: left;
+  }
+  .form-row {
+      display: flex;
+      gap: 15px;
+      margin-bottom: 20px;
+  }
+  .form-field {
+      flex: 1;
+  }
+  .form-field label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: bold;
+      color: black;
+  }
+  .form-field input, 
+  .form-field textarea {
+      width: 100%;
+      padding: 12px;
+      border: 2px solid #ddd;
+      border-radius: 8px;
+      font-size: 15px;
+      background-color: white; /* Field background */
+      color: black; /* Text color */
+      transition: border-color 0.3s;
+  }
+  .form-field input:focus,
+  .form-field textarea:focus {
+      outline: none;
+      border-color: #E72E77; /* Pink focus */
+  }
+  .form-field textarea {
+      height: 120px;
+  }
+  .submit-button {
+      display: block;
+      width: 100%;
+      padding: 12px;
+      background-color: #28a745; /* Green button color */
+      color: white;
+      border: none;
+      border-radius: 8px; /* Rounded corners */
+      font-size: 16px;
+      font-weight: bold; /* Bold text */
+      text-transform: uppercase; /* Full caps */
+      cursor: pointer;
+      transition: background-color 0.3s;
+  }
+  .submit-button:disabled {
+      background-color: #ddd;
+      cursor: not-allowed;
+  }
+  .submit-button:hover:not(:disabled) {
+      background-color: #218838; /* Darker green on hover */
+  }

assets/css/hero.css

@@ -0,0 +1,74 @@
+.hero {
+  position: relative;
+  width: 100%;
+  margin: 0 auto; /* Centering the hero section */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 80px;
+  padding-bottom: 80px;
+  padding-left: 40px;
+  padding-right: 40px;
+  background: linear-gradient(to bottom right, #F9B208, #E72E77);
+}
+
+.hero-inner {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.hero-content {
+  max-width: 50%;
+  text-align: center;
+}
+
+.hero-logo {
+  width: 150px;
+  margin: 0 auto 20px;
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  color: white;
+  margin-bottom: 20px;
+}
+
+.hero-button {
+  background-color: white;
+  color: #E72E77;
+  padding: 15px 30px;
+  border: none;
+  border-radius: 5px;
+  font-size: 1.4rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  text-transform: uppercase;
+}
+
+
+.hero-button:hover {
+  background-color: #F9B208;
+}
+
+.hero-screenshots {
+  display: flex;
+  gap: 20px;
+}
+
+.screenshot {
+  width: 150px;
+  height: 300px;
+  background-color: white;
+  border: 2px solid white;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  border-radius: 15px;
+  overflow: hidden;
+}
+
+.screenshot img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}