First Changes

src/app/globals.css

@@ -1,24 +1,76 @@
-@import "tailwindcss";
-
-@theme {
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
 }
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+.header {
+  text-align: center;
+  margin-bottom: 2rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+.title {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+.intro {
+  font-size: 1.25rem;
+  color: #666;
 }
+
+.section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+/* Section where text is on the left */
+.textLeft {
+  flex: 1;
+  padding: 1rem;
+}
+
+/* Section where image is on the right */
+.imageRight {
+  flex: 1;
+  padding: 1rem;
+}
+
+/* Section where image is on the left */
+.imageLeft {
+  flex: 1;
+  padding: 1rem;
+}
+
+/* Section where button is on the right */
+.buttonRight {
+  flex: 1;
+  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Ensure images are responsive */
+.imageLeft img,
+.imageRight img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.learnMoreButton {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  background-color: #0070f3;
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.learnMoreButton:hover {
+  background-color: #005bb5;
+}