Commented about-us page

app/about-us/page.tsx

@@ -1,7 +1,7 @@
 import { ClipboardDocumentListIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
 import Logo from '../components/logo';
 import TopicCard from '../components/topic_card';
-
+{/*Index of peopel and their respective image and title*/}
 const people = [
     {
       name: 'Andrei Banu',
@@ -27,6 +27,7 @@ const people = [
   export default function Example() {
     return (
       <div className="sm:py-32">
+         {/*Background visuals*/}
         <div
           className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
           aria-hidden="true"
@@ -48,13 +49,14 @@ const people = [
         </div>
         <Logo/>
         <div style={{paddingBottom: '100px'}}></div>
-        <div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
+        <div className="mx-auto grid max-w-7xl gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3"> {/*Team presentation text*/}
           <div className="max-w-2xl">
             <h2 className="text-3xl font-bold tracking-tight text-gray-200 sm:text-4xl">Meet our developers</h2>
             <p className="mt-6 text-lg leading-8 text-gray-200">
               We are a group of passionate middle schoolers that got togather to hopefully make a difference in the world
             </p>
           </div>
+          {/*Display people*/}
           <ul role="list" className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2">
             {people.map((person) => (
               <li key={person.name}>
@@ -70,6 +72,7 @@ const people = [
           </ul>
         </div>
         <br></br>
+         {/*Licence and source code buttons*/}
         <div
             style={{display:"flex", alignItems: 'center', alignSelf:'center', justifyContent: 'center', marginLeft: "40px", marginRight: "40px"}}
         >