Merge pull request #13 from ameen4455/homepage-fixes

Homepage fixes

Author: ameen4455

src/components/common/Layout.js

@@ -68,8 +68,8 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
         <div className="viewport-top">
           {/* The main header section on top of the screen */}
           <header className="bg-center bg-cover py-5 text-white bg-bg-black">
-            <div className="md:mx-auto max-w-screen-xl px-4">
-              <div className="flex items-center justify-between" id="site-mast">
+            <div className="px-4">
+              <div className="flex items-center justify-between max-w-6xl mx-auto" id="site-mast">
                 <Link to="/">
                   {isHome ? null : (
                     <img
@@ -109,31 +109,31 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
                 </div>
               </div>
               {isHome ? (
-                <div id="site-banner" className="my-0 mx-auto">
-                  <img src="/images/logo.svg" className="h-28 mt-28" />
+                <div id="site-banner" className="my-0 mx-auto responsive-container ">
+                  <img src="/images/logo.svg" className=" w-72 mt-24" />
                   <h1
                     id=" site-banner-title"
-                    className="mt-12 font-bold text-2xl leading-7 not-italic max-w-lg"
+                    className="mt-12 text-white text-superheading not-italic max-w-2xl"
                   >
                     {localData.description}
                   </h1>
                   <p
                     id="site-banner-desc"
-                    className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic"
+                    className="mt-4 text-gray-400 text-big-body not-italic max-w-2xl"
                   >
                     {localData.subDescription}
                   </p>
                   <p
                     id="site-banner-desc"
-                    className="my-4 max-w-lg text-body-grey text-xl leading-6 not-italic mb-14"
+                    className="mt-4 text-gray-400 text-big-body not-italic max-w-2xl"
                   >
                     {localData.cta}
                   </p>
-                  <div id="action" className="mb-40">
-                    <button class="bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-36 h-14">
+                  <div id="action" className="mb-20 mt-8 flex">
+                    <button class="btn w-full text-xl md:w-36  h-14">
                       Donate
                     </button>
-                    <button class="border border-iff-orange hover:text-white text-iff-orange font-normal text-xl leading-6 not-italic py-2 ml-8 rounded w-36 h-14">
+                    <button class="btn-secondary ml-4 w-full text-xl md:w-36  h-14">
                       Subscribe
                     </button>
                   </div>

src/styles/global.css

@@ -20,19 +20,19 @@
   }
 
   .btn {
-    @apply border-2 border-iff-orange text-white bg-iff-orange px-6 py-2 rounded-md;
+    @apply border-2 border-iff-orange text-white bg-iff-orange hover:bg-opacity-80 px-6 py-2 rounded-md;
   }
 
   .btn-secondary {
-    @apply border border-iff-orange text-iff-orange px-6 py-2 rounded-md;
+    @apply border border-iff-orange text-iff-orange hover:bg-iff-orange hover:bg-opacity-10 px-6  py-2 rounded-md;
   }
 
   .responsive-container {
     @apply md:mx-auto max-w-screen-lg;
   }
 
   .text-superheading {
-    @apply text-gray-900 text-7xl md:text-3xl font-semibold
+    @apply text-gray-900 text-2xl md:text-3xl font-semibold
   }
 
   .text-subheading-1 {

src/templates/index.js

@@ -8,6 +8,7 @@ import {
   Pagination,
   PostCarousel,
   ProjectCarousel,
+  PostCardBlog
 } from "../components/common";
 import { MetaData } from "../components/common/meta";
 import DonateCard from "../components/common/DonateCard";
@@ -30,34 +31,22 @@ const Index = ({ data, location, pageContext }) => {
     <>
       <MetaData location={location} />
       <Layout isHome={true}>
-        <div
-          id="container"
-          className="mt-20 my-0 ml-5 md:mx-auto text-left lg:max-w-4xl"
-        >
-          <h1 className="text-3xl mb-6 font-bold">Blogposts</h1>
+        <div id="container" className="responsive-container px-4 mt-4 text-left">
+          <h1 className="text-subheading-1 mb-4 mt-24 font-bold">Blogposts</h1>
           <section id="post-feed">
             {posts.map(({ node }, index) => (
               // The tag below includes the markup for each post - components/common/PostCard.js
-              <PostCard key={node.id} post={node} number={index + 1} />
+              <PostCardBlog key={node.id} post={node} number={index + 1} />
             ))}
           </section>
 
-          {/* <Pagination pageContext={pageContext} /> */}
-          <p className="ml-14 text-body-grey">
+          <p className="text-body-grey">
             Read more blogs on numerous other topics
           </p>
-          <button class="ml-14 mt-6 mb-20 bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-36 h-14">
+          <button class="mt-6 mb-16 bg-iff-orange hover:bg-iff-orange-700 text-white font-normal text-xl leading-6 not-italic py-2 px-4 rounded w-36 h-14">
             Read more
           </button>
           <hr></hr>
-          <h1 className="text-3xl mt-20 mb-6 font-bold">Our latest work</h1>
-          <section id="post-feed" className="flex flex-col lg:w-1/3 md:flex-row">
-            {posts.map(({ node }, index) => (
-              // The tag below includes the markup for each post - components/common/PostCard.js
-              <PostCarousel key={node.id} post={node} number={index + 1} />
-            ))}
-          </section>
-          <hr></hr>
           <h1 className="text-3xl mt-20 font-bold">Campaigns & Projects</h1>
           <p className="text-base text-body-grey mt-6 mb-6">
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
@@ -80,7 +69,11 @@ const Index = ({ data, location, pageContext }) => {
           </section>
 
           <div className="flex items-center justify-center">
-            <button id="leftScroll" className="px-3" onClick={() => scroll(-200)}>
+            <button
+              id="leftScroll"
+              className="px-3"
+              onClick={() => scroll(-200)}
+            >
               <svg
                 width="32"
                 height="32"
@@ -104,7 +97,11 @@ const Index = ({ data, location, pageContext }) => {
                 />
               </svg>
             </button>
-            <button id="rightScroll" className="px-3" onClick={() => scroll(200)}>
+            <button
+              id="rightScroll"
+              className="px-3"
+              onClick={() => scroll(200)}
+            >
               <svg
                 width="32"
                 height="32"
@@ -129,7 +126,6 @@ const Index = ({ data, location, pageContext }) => {
               </svg>
             </button>
           </div>
-          
         </div>
 
       </Layout>
@@ -161,8 +157,9 @@ export const pageQuery = graphql`
       edges {
         node {
           ...GhostPostFields
-        } 
+        }
       }
     }
   }
 `;
+