From 5b9ec94a5a6ec900902b1f4fe00405dec0e0feaf Mon Sep 17 00:00:00 2001
From: AnyaKhemlani <askny2014@hotmail.com>
Date: Sun, 21 Jul 2024 19:34:11 -0400
Subject: [PATCH] fixing about section on mobile

---
 seal-website/app/components/AboutSection.tsx | 38 ++++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/seal-website/app/components/AboutSection.tsx b/seal-website/app/components/AboutSection.tsx
index ad57507..87db065 100644
--- a/seal-website/app/components/AboutSection.tsx
+++ b/seal-website/app/components/AboutSection.tsx
@@ -1,8 +1,5 @@
 'use client'
 import React from 'react';
-// import Heading from './Heading';
-import NavbarSection from './navbar/NavbarSection';
-import Button from './Button';
 import Image from "next/image";
 import { motion } from 'framer-motion';
 import SectionHeading from './SectionHeader';
@@ -10,26 +7,27 @@ import SectionHeading from './SectionHeader';
 const AboutSection = () => {
     return (
         <div className="pb-20 grid">
-            <div className="mt-5 mx-20 grid grid-cols-[60%_40%] gap-4 items-center justify-items-center">
+            <div className="mt-5 mx-20 grid grid-cols-1 lg:grid-cols-[60%_40%] gap-4 items-center justify-items-center">
                 <SectionHeading title="About" />
                 <div className="h-full row-span-3">
-                    <motion.div
-                        initial={{ y: 70, opacity: 0 }}
-                        whileInView={{ y: 20, opacity: 1 }}
-                        viewport={{ once: false }}
-                        transition={{ duration: 0.8, ease: "easeInOut" }}
-                    >
-                        <Image
-                            alt="Logo"
-                            className="transition rounded-xl items pt-50"
-                            height="420"
-                            width="420"
-                            src="/images/logo.png"
-                            // style={{ marginTop: "0px" }} 
-                        />
-                    </motion.div>
+                    <div className="pb-10">
+                        <motion.div
+                            initial={{ y: 70, opacity: 0 }}
+                            whileInView={{ y: 20, opacity: 1 }}
+                            viewport={{ once: false }}
+                            transition={{ duration: 0.8, ease: "easeInOut" }}
+                        >
+                            <Image
+                                alt="Logo"
+                                className="transition rounded-xl items pt-50"
+                                height="420"
+                                width="420"
+                                src="/images/logo.png"
+                            />
+                        </motion.div>
+                    </div>
                 </div>
-                <div className="text-xl sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl">
+                <div className="text-center text-xl sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl lg:text-left">
                     A policy think-tank striving to create a forum of students and young professionals who are passionate about addressing systemic healthcare problems through legislation and policy making.
                 </div>
             </div>