Fix/UI overflow ipad and some other UI Issues

components/contact.js

@@ -11,8 +11,8 @@ export default function Contact() {
         </p>
 
         <Link href="mailto: [email protected]">
-          <a>
-            <p className="email">
+          <a  >
+            <p className="email mt-4">
               email us
               <span>
                 <ArrowRight width={18} height={14} />
@@ -38,7 +38,7 @@ export default function Contact() {
 
         .email {
           padding: 20px;
-          width: 300px;
+          width: 260px;
           display: flex;
           flex-direction: row;
           align-items: center;
@@ -56,9 +56,13 @@ export default function Contact() {
           margin: 4px 0 0 6px;
         }
 
+
+
+
         @media (min-width: 768px) {
           .container {
             position: relative;
+
           }
 
           .description {
@@ -69,9 +73,18 @@ export default function Contact() {
           .email {
             position: absolute;
             top: 10px;
+            width: 260px;
             left: calc(70% - 40px);
           }
         }
+
+ @media (min-width: 1024px) {
+            .email {
+            width: 300px;
+
+          }
+        }
+
       `}</style>
     </>
   );

components/layout.js

@@ -34,11 +34,11 @@ export function PageWrapper({ seo, children }) {
                 </a>
               </Link>
 
-              <h1>
+              <h1 className="my-8 text-3xl font-bold xl:text-4xl" >
                 Open and transparent solutions for the decentralized world
               </h1>
 
-              <h2>
+              <h2 className="font-semibold xl:text-xl" >
                 Llama Corp is a collective building out the decentralized future
                 with data analytics, payments, cross-chain and media solutions
                 used by more than 10M monthly users.
@@ -49,7 +49,7 @@ export function PageWrapper({ seo, children }) {
           {children}
 
           <section>
-            <h3>Contact</h3>
+            <h3 className="text-[1.5rem] my-6" >Contact</h3>
 
             <Contact />
           </section>

components/projects.js

@@ -6,6 +6,7 @@ import ArrowLink from "./arrowLink";
 function Card({ title, description, logo, href }) {
   return (
     <>
+
       <div className="container">
         <Link href={href}>
           <a target="_blank">
@@ -53,13 +54,20 @@ function Card({ title, description, logo, href }) {
 
         @media (min-width: 768px) {
           .container {
-            width: 334px;
+            width: 280px;
           }
 
           .header {
             padding: 20px 30px;
           }
         }
+
+        @media (min-width: 1024px) {
+              .container {
+               width: 334px;
+          }
+        }
+
       `}</style>
     </>
   );
@@ -68,7 +76,8 @@ function Card({ title, description, logo, href }) {
 export default function Projects({ items }) {
   return (
     <>
-      <div className="container">
+      <h3 className="md:ml-6 mb-4 mt-5 text-[1.5rem]">Projects</h3>
+      <div className="container ">
         <div className="grid">
           {items.map((project, idx) => (
             <div key={`ProjectCard__${idx}`} className={`project-${idx % 4}`}>
@@ -87,6 +96,7 @@ export default function Projects({ items }) {
         .grid {
           display: grid;
           grid-gap: 20px;
+          margin-bottom: 2rem;
         }
 
         .project-0 {
@@ -108,6 +118,7 @@ export default function Projects({ items }) {
         @media (min-width: 768px) {
           .grid {
             display: grid;
+            margin-bottom: 6rem;
             grid-template-columns: repeat(2, 1fr);
           }
 
@@ -153,4 +164,4 @@ export default function Projects({ items }) {
       `}</style>
     </>
   );
-}
+}

components/team.js

@@ -29,9 +29,10 @@ function Card({ name, role, img, twitter, github, telegram, projects }) {
 
   return (
     <>
-      <div className="container">
-        <div className="img-container">
-          <Image alt={name} src={img} layout="fill" objectFit="cover" />
+
+      <div className="container ">
+        <div className="img-container ">
+          <Image alt={name} src={img} layout="fill"  objectFit="contain" />
         </div>
 
         <div className="col">
@@ -159,6 +160,7 @@ export default function Team({ items }) {
 
   return (
     <>
+    <h3 className="mb-5 text-[1.5rem]" >Team</h3>
       <div className="row">
         {projects.map(({ id, title }) => (
           <div