Merge branch 'dev' into pagination

Author: ameen4455

src/components/common/DonateCard.js

@@ -0,0 +1,39 @@
+import React from "react"
+
+const localData = {
+  title: `Donate`,
+  description: `Help IFF scale up by making a donation for digital rights. Really, when it comes to free speech online, digital privacy, net neutrality and innovation — we got your back!`,
+  plea: `You can also support us in many non monetary ways`
+}
+const DonateCard = () => {
+    return (
+        <div className="bg-bg-black min-w-full">
+          <div id="header-card" className="mt-16 ml-96 mb-24">
+            <h1 className="text-white text-3xl leading-7 not-italic max-w-lg">{localData.title}</h1>
+            <p id="site-banner-desc" className="my-4 max-w-lg text-white text-xl leading-6 not-italic">{localData.description}</p>
+            <p id="site-banner-desc" className="my-4 max-w-lg text-body-grey leading-6 not-italic mt-3.5 mb-14">{localData.plea}</p>
+            <button class="border border-iff-orange hover:text-white text-iff-orange font-normal text-xl leading-6 not-italic py-2 rounded w-36 h-14">Know more</button>
+          </div>
+          <div id="donate-widget" className="ml-72 bg-bg-dark-grey w-[530px] h-[438px]">
+            <div class="text-sm font-medium text-center text-gray-500">
+                <ul class="flex flex-wrap -mb-px bg-bg-light-grey">
+                    <li class="ml-16 mr-2">
+                        <a href="" className="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-body-grey hover:border-gray-300">One time</a>
+                    </li>
+                    <li className="mr-2">
+                        <a href="" className="inline-block p-4 text-iff-orange rounded-t-lg border-b-2 border-iff-orange active dark:iff-orange" aria-current="page">Monthly</a>
+                    </li>
+                    <li className="mr-2">
+                        <a href="" className="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-body-grey hover:border-gray-300">Annual</a>
+                    </li>
+                   
+                </ul>
+            </div>
+            <p className="text-white">siteConfig</p>
+          </div>
+            
+        </div>
+    );
+};
+
+export default DonateCard;

src/components/common/Layout.js

@@ -6,6 +6,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
 
 import { Navigation } from ".";
 import { Footer } from ".";
+import { DonateCard } from ".";
 import config from "../../utils/siteConfig";
 import { useState } from "react";
 
@@ -131,6 +132,9 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
             {/* All the main content gets inserted here, index.js, post.js */}
             {children}
           </main>
+          <div className="flex items-center justify-center">
+              <DonateCard />
+          </div>
         </div>
         <Footer />
       </div>

src/components/common/PostCard.js

@@ -15,21 +15,18 @@ const PostCard = ({ post, number }) => {
         <div id="post-features" className="ml-6">
           <header className="post-card-header">
             {post.featured && <span>Featured</span>}
-            <h2 id="post-card-title" className="text-xl mb-3 text-heading-black font-bold">
+            <h2 id="post-card-title" className="text-xl mb-3 text-heading-black font-bold hover:underline hover:underline-offset-8">
               {post.title}
             </h2>
           </header>
-          <div id="post-card-excerpt" className="mb-3 text-body-grey">{post.excerpt}</div>
+          <div id="post-card-excerpt" className="mb-3 text-body-grey text-justify">{post.excerpt}</div>
           <footer id="post-card-footer" className="flex mb-3">
-            <div id="post-card-footer-left" className="mr-3 text-iff-orange">
+            <div id="post-card-footer-left" className="mr-3 text-zinc-400 font-light">
               <span>{post.published_at_pretty}</span>
             </div>
-            <div id="post-card-footer-left" className="ml-3 text-iff-orange flex-1">
+            <div id="post-card-footer-left" className="ml-3 text-zinc-400 font-light flex-1">
               <div>{readingTime}</div>
             </div>
-            <div id="post-card-footer-right" className="ml-3 mr-3 text-iff-orange underline ">
-              <div>Read Now</div>
-            </div>
           </footer>
         </div>
       </Link>

src/components/common/PostCardBlog.js

@@ -28,7 +28,7 @@ const PostCardBlog = ({ post, number }) => {
                   key={index}
                   className={`bg-slate-100 ${
                     index > 0 ? "hidden md:inline" : ""
-                  } text-slate-500 mr-2 py-1 px-2 rounded-lg text-sm`}
+                  } capitalize text-slate-500 mr-2 py-1 px-2 rounded-lg text-sm`}
                 >
                   {tag.name}
                 </span>

src/components/common/index.js

@@ -6,3 +6,4 @@ export { default as ProjectCarousel } from "./ProjectCarousel";
 export { default as Pagination } from "./Pagination";
 export { default as Navigation } from "./Navigation";
 export { default as Footer } from "./Footer";
+export { default as DonateCard } from "./DonateCard";