From 8deaa13fe6bab1e162bd7973390f6a95e5aeb24a Mon Sep 17 00:00:00 2001
From: Raul D Campos <camposraul2023@gmail.com>
Date: Sat, 3 Feb 2024 12:16:29 -0500
Subject: [PATCH] formated competitions and overview

---
 src/components/sections/Competitions.tsx | 73 +++++++++++++++++++-----
 src/components/sections/Overview.tsx     | 33 +++++------
 2 files changed, 77 insertions(+), 29 deletions(-)

diff --git a/src/components/sections/Competitions.tsx b/src/components/sections/Competitions.tsx
index ae55e64..d92dbd6 100644
--- a/src/components/sections/Competitions.tsx
+++ b/src/components/sections/Competitions.tsx
@@ -3,22 +3,69 @@ import React from "react";
 const Competitions = () => {
   return (
     <section className="w-full py-12 md:py-24 lg:py-32 bg-[#f7f1fe] dark:bg-[#411972]">
-      <div className="container px-4 md:px-6">
-        <div className="flex flex-col items-center justify-center space-y-4 text-center">
-          <div className="space-y-2">
-            <div className="inline-block rounded-lg bg-[#debdff] px-3 py-1 text-sm text-[#411972] dark:bg-[#9e3ffd] dark:text-[#f7f1fe]">
-              Competitions
-            </div>
-            <h2 className="text-3xl font-bold tracking-tighter text-[#411972] dark:text-[#debdff] sm:text-4xl">
-              Learn about the exciting competitions at the Tech SumMIT 2024.
+      <div className="container flex-col mx-auto px-4 space-y-20 text-center">
+        <h2 className="text-3xl lg:text-4xl font-bold text-[#411972] dark:text-[#f7f1fe]">
+          Competitions
+        </h2>
+        <div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
+          <div className="w-full lg:w-1/2">
+            <h2 className="text-2xl lg:text-3xl font-bold text-[#411972] dark:text-[#f7f1fe]">
+              Comp 1 Name
             </h2>
-            <p className="max-w-[600px] text-[#411972] md:text-xl dark:text-[#debdff]">
-              The Tech SumMIT 2024 will host a variety of competitions designed
-              to challenge and inspire participants. From coding challenges to
-              innovation contests, there&apos;s a competition for everyone. Stay
-              tuned for more details.
+            <p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+              vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
+              venenatis, metus sit amet tincidunt volutpat, justo libero
+              fermentum odio, ac scelerisque odio metus et nisl.
             </p>
           </div>
+          <div className="w-full lg:w-1/2 mt-8 lg:mt-0">
+            <img
+              src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
+              alt="Comp 1 Img"
+              className="w-full h-auto rounded-lg"
+            />
+          </div>
+        </div>
+        <div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
+          <div className="w-full lg:w-1/2">
+            <h2 className="text-2xl lg:text-3xl font-bold text-[#411972] dark:text-[#f7f1fe]">
+              Comp 2 Name
+            </h2>
+            <p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+              vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
+              venenatis, metus sit amet tincidunt volutpat, justo libero
+              fermentum odio, ac scelerisque odio metus et nisl.
+            </p>
+          </div>
+          <div className="w-full lg:w-1/2 mt-8 lg:mt-0">
+            <img
+              src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
+              alt="Comp 2 Img"
+              className="w-full h-auto rounded-lg"
+            />
+          </div>
+        </div>
+        <div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
+          <div className="w-full lg:w-1/2">
+            <h2 className="text-2xl lg:text-3xl font-bold text-[#411972] dark:text-[#f7f1fe]">
+              Comp 3 Name
+            </h2>
+            <p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+              vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
+              venenatis, metus sit amet tincidunt volutpat, justo libero
+              fermentum odio, ac scelerisque odio metus et nisl.
+            </p>
+          </div>
+          <div className="w-full lg:w-1/2 mt-8 lg:mt-0">
+            <img
+              src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
+              alt="Comp 3 Img"
+              className="w-full h-auto rounded-lg"
+            />
+          </div>
         </div>
       </div>
     </section>
diff --git a/src/components/sections/Overview.tsx b/src/components/sections/Overview.tsx
index 55e4f61..aa39707 100644
--- a/src/components/sections/Overview.tsx
+++ b/src/components/sections/Overview.tsx
@@ -3,23 +3,24 @@ import React from "react";
 const Overview = () => {
   return (
     <section className="w-full py-12 md:py-24 lg:py-32 bg-[#f7f1fe] dark:bg-[#411972]">
-      <div className="container px-4 md:px-6">
-        <div className="flex flex-col items-center justify-center space-y-4 text-center">
-          <div className="space-y-2">
-            <div className="inline-block rounded-lg bg-[#debdff] px-3 py-1 text-sm text-[#411972] dark:bg-[#9e3ffd] dark:text-[#f7f1fe]">
-              Event Overview
-            </div>
-            <h2 className="text-3xl font-bold tracking-tighter text-[#411972] dark:text-[#debdff] sm:text-4xl">
-              Learn about the Tech SumMIT 2024, its goals, and what makes it
-              unique.
+      <div className="container mx-auto px-4">
+        <div className="flex flex-row lg:flex-row md: flex-col items-center justify-between">
+          <div className="w-full lg:w-1/2 mt-8 lg:mt-0">
+            <img
+              src="https://images.unsplash.com/photo-1593642632822-9a4b3b1f6c2d?auto=format&fit=crop&w=800&q=80"
+              alt="About Us Img"
+              className="w-full h-auto rounded-lg"
+            />
+          </div>
+          <div className="w-full lg:w-1/2">
+            <h2 className="text-3xl lg:text-4xl font-bold text-[#411972] dark:text-[#f7f1fe]">
+              About Us
             </h2>
-            <p className="max-w-[600px] text-[#411972] md:text-xl dark:text-[#debdff]">
-              The Tech SumMIT 2024 is a premier event for technology
-              enthusiasts, professionals, and students. It&apos;s a platform to
-              learn about the latest trends in technology, network with industry
-              leaders, and participate in exciting competitions. The event will
-              feature keynote speeches, panel discussions, workshops, and much
-              more.
+            <p className="text-lg lg:text-xl mt-4 text-[#411972] dark:text-[#f7f1fe]">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
+              vehicula auctor neque, sit amet ultrices sem lacinia nec. Donec
+              venenatis, metus sit amet tincidunt volutpat, justo libero
+              fermentum odio, ac scelerisque odio metus et nisl.
             </p>
           </div>
         </div>