Merge pull request #14 from ameen4455/campaigns

Feat: Update campaigns

Author: ameen4455

src/components/common/ProjectCarousel.js

@@ -2,23 +2,20 @@ import * as React from "react";
 import PropTypes from "prop-types";
 import { Link } from "gatsby";
 
-const ProjectCarousel = ({ post, number }) => {
-  const url = `/${post.slug}/`;
+const ProjectCarousel = ({ title, img, url, desc }) => {
 
   return (
     <>
-      <Link to={url} id="post-card" className="mb-16 flex  basis-0 grow items-start min-h-[414px] min-w-[300px] bg-project-bg mx-2">
+      <Link to={url} id="post-card" className="mb-4 flex  basis-0 grow items-start h-xl w-lg bg-project-bg mx-1 cursor-pointer">
         <div id="post-features" className="">
-          <header className="post-card-header">
-            <img src="/images/project_sample.png"/>
-            {post.featured && <span>Featured</span>}
+          <header className="w-full">
+            <img className="w-full" src={img} />
           </header>
-          <section id="post-card-excerpt" className="mb-3 mt-12 mx-8 text-heading-black mb-2">
-            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          <section id="post-card-excerpt" className="mt-7 mx-5 text-heading-black text-sm mb-2">
+            <p>{desc}</p>
           </section>
-          <footer id="post-card-footer" className="flex mb-3 ml-8">
-            <div id="post-card-footer-left" className="mr-3 text-iff-orange">
+          <footer id="post-card-footer" className="flex mb-3 mx-5">
+            <div id="post-card-footer-left" className="mr-3 text-iff-orange text-sm">
               <span>Know more</span>
             </div>
           </footer>
@@ -28,23 +25,5 @@ const ProjectCarousel = ({ post, number }) => {
   );
 };
 
-ProjectCarousel.propTypes = {
-  post: PropTypes.shape({
-    slug: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    featured: PropTypes.bool,
-    tags: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string,
-      })
-    ),
-    excerpt: PropTypes.string.isRequired,
-    primary_author: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      profile_image: PropTypes.string,
-    }).isRequired,
-  }).isRequired,
-};
-
 export default ProjectCarousel;
 

src/templates/index.js

@@ -8,7 +8,7 @@ import {
   Pagination,
   PostCarousel,
   ProjectCarousel,
-  PostCardBlog
+  PostCardBlog,
 } from "../components/common";
 import { MetaData } from "../components/common/meta";
 import DonateCard from "../components/common/DonateCard";
@@ -31,7 +31,10 @@ const Index = ({ data, location, pageContext }) => {
     <>
       <MetaData location={location} />
       <Layout isHome={true}>
-        <div id="container" className="responsive-container px-4 mt-4 text-left">
+        <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) => (
@@ -49,27 +52,40 @@ const Index = ({ data, location, pageContext }) => {
           <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
+            {/* Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
             nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur.
+            pariatur. */}
           </p>
           <section
             id="post-feed"
-            ref={scrollElement}
-            className="flex flex-col md:flex-row scrolling-touch overflow-x-hidden"
+            // ref={scrollElement}
+            className="flex flex-col lg:flex-row overflow-x-hidden"
           >
-            {posts.map(({ node }, index) => (
-              // The tag below includes the markup for each post - components/common/ProjectCarousel.js
-              <>
-                <ProjectCarousel key={node.id} post={node} number={index + 1} />
-                <ProjectCarousel key={node.id} post={node} number={index + 1} />
-              </>
-            ))}
+            <ProjectCarousel
+              url={"https://patrakardefence.in/?ref=internetfreedom.in"}
+              img="/images/digital.png"
+              desc={`The Digital Patrakar Defence Clinic provides pro bono legal assistance to all journalists in India who face legal threats related to their reporting.`}
+            />
+            <ProjectCarousel
+              url={"https://panoptic.in/?ref=internetfreedom.in"}
+              img="/images/panoptic.png"
+              desc={`IFF’s Project Panoptic aims to bring transparency and accountability to the relevant government stakeholders involved in the deployment and implementation of facial recognition technology (FRT) projects in India.`}
+            />
+            <ProjectCarousel
+              url={"https://saveourprivacy.in/?ref=internetfreedom.in"}
+              img="/images/privacy.png"
+              desc={`#SaveOurPrivacy is an online collective launched in May, 2018 to safeguard your privacy and ensure a citizen centric data protection law.`}
+            />
+            <ProjectCarousel
+              url={"https://zombietracker.in/?ref=internetfreedom.in"}
+              img="/images/zombie.png"
+              desc={`The ‘Zombie Tracker’ is a platform which monitors cases which include a charge under Section 66A of the Information Technology Act 2000 which was deemed unconstitutional by the Hon’ble Supreme Court of India in Shreya Singhal v Union of India.`}
+            />
           </section>
 
           <div className="flex items-center justify-center">
-            <button
+            {/* <button
               id="leftScroll"
               className="px-3"
               onClick={() => scroll(-200)}
@@ -124,7 +140,7 @@ const Index = ({ data, location, pageContext }) => {
                   stroke-linejoin="round"
                 />
               </svg>
-            </button>
+            </button> */}
           </div>
         </div>