From cf17ea478a03637ffce8f3d26f1619b1731639c4 Mon Sep 17 00:00:00 2001
From: senthil-k8s <senthilathiban0@gmail.com>
Date: Sun, 6 Aug 2023 18:29:47 +0530
Subject: [PATCH] feat(community): designed community news cards

---
 src/components/CommunityNews/index.jsx   | 115 ++++++++++++++++++++++-
 src/views/app/CommunityLanding/index.jsx |   2 +
 2 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/src/components/CommunityNews/index.jsx b/src/components/CommunityNews/index.jsx
index d02bff2..1da6763 100644
--- a/src/components/CommunityNews/index.jsx
+++ b/src/components/CommunityNews/index.jsx
@@ -1,7 +1,120 @@
 import React from "react";
+import { anime1, anime2, anime3, news1, news2, news3 } from "../../assets";
 
 const CommmunityNews = () => {
-  return <div>index</div>;
+  return (
+    <div className="flex ml-20 mr-20 p-5 mt-20">
+      <div className="w-2/6 h-full p-5">
+        <div className="flex text-3xl">
+          <span className="text-pink-600 font-bold"> | </span>
+          <h1 className="mr-3 ml-3">Latest</h1>
+          <span className=" font-semibold">News</span>
+        </div>
+        <div className="description mt-5">
+          <p className="leading-relaxed">
+            The Following are our most frequented and <br />
+            updated communication channels. <br />
+            You name it, we've got it.
+          </p>
+        </div>
+        <button className="border p-3 bg-pink-500 rounded-full w-[40%] mt-10 font-normal hover:bg-violet-800">
+          See all news {" > "}{" "}
+        </button>
+      </div>
+      <div className="w-4/6 h-[100%]">
+        <div className="grid grid-cols-3 h-[100%] gap-4">
+          <div className="border rounded-lg h-[100%] p-5 blogtitle">
+            <img src={news1} alt="" />
+            <h1 className="tag border border-pink-500 pl-2 pr-2 p-1 bg-pink-700 rounded-lg mt-4 w-[30%] text-sm">
+              Progress
+            </h1>
+            <h1 className="text-white font-semibold mt-4 text-xl mb-10 hover:text-gray-500 cursor-pointer">
+              Fashion Froze 3D: Unveiling the Future of Fashion and Community
+              Engagement
+            </h1>
+            <div className="author flex justify-between mt-4 items-center">
+              <div className="flex align-items items-center">
+                <img src={anime1} alt="" className="w-10 h-10 rounded-full" />
+                <h1 className="name ml-3 text-gray-400 text-normal">Martin</h1>
+              </div>
+              <div className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  class="bi bi-calendar"
+                  viewBox="0 0 16 16"
+                >
+                  {" "}
+                  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />{" "}
+                </svg>
+                <h1 className="ml-2 text-gray-400 text-sm">May 30, 2023.</h1>
+              </div>
+            </div>
+          </div>
+          <div className="border rounded-lg h-[100%] p-5 blogtitle">
+            <img src={news2} alt="" />
+            <h1 className="tag border border-pink-500 pl-2 pr-2 p-1 bg-pink-700 rounded-lg mt-4 w-[40%] text-sm">
+              Ambassador
+            </h1>
+            <h1 className="text-white font-semibold mt-4 text-xl mb-10 hover:text-gray-500 cursor-pointer">
+              Fashion Froze Ambassador Program: Shaping the Future of Style Together
+            </h1>
+            <div className="author flex justify-between mt-4 items-center">
+              <div className="flex align-items items-center">
+                <img src={anime2} alt="" className="w-10 h-10 rounded-full" />
+                <h1 className="name ml-3 text-gray-400 text-normal">Henry</h1>
+              </div>
+              <div className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  class="bi bi-calendar"
+                  viewBox="0 0 16 16"
+                >
+                  {" "}
+                  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />{" "}
+                </svg>
+                <h1 className="ml-2 text-gray-400 text-sm">July 02, 2023.</h1>
+              </div>
+            </div>
+          </div>
+          <div className="border rounded-lg h-[100%] p-5 blogtitle">
+            <img src={news3} alt="" />
+            <h1 className="tag border border-pink-500 pl-2 pr-2 p-1 bg-pink-700 rounded-lg mt-4 w-[30%] text-sm">
+              Branding
+            </h1>
+            <h1 className="text-white font-semibold mt-4 text-xl mb-10 hover:text-gray-500 cursor-pointer">
+              Building a Memorable Brand: Approach to Lasting Impressions
+            </h1>
+            <div className="author flex justify-between mt-4 items-center">
+              <div className="flex align-items items-center">
+                <img src={anime3} alt="" className="w-10 h-10 rounded-full" />
+                <h1 className="name ml-3 text-gray-400 text-normal">Rosy</h1>
+              </div>
+              <div className="flex items-center">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  class="bi bi-calendar"
+                  viewBox="0 0 16 16"
+                >
+                  {" "}
+                  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />{" "}
+                </svg>
+                <h1 className="ml-2 text-gray-400 text-sm">Aug 01, 2023.</h1>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default CommmunityNews;
diff --git a/src/views/app/CommunityLanding/index.jsx b/src/views/app/CommunityLanding/index.jsx
index ec07df9..066cad7 100644
--- a/src/views/app/CommunityLanding/index.jsx
+++ b/src/views/app/CommunityLanding/index.jsx
@@ -2,12 +2,14 @@ import React from "react";
 import HomeLayout from "../../../layout/HomeLayout.jsx";
 import CommunityLanding from "../../../pages/CommunityLanding/index.jsx";
 import Ambassador from "../../../components/Ambassador/index.jsx";
+import CommmunityNews from "../../../components/CommunityNews/index.jsx";
 
 function Guide() {
   return (
     <HomeLayout>
       <CommunityLanding />
       <Ambassador />
+      <CommmunityNews />
     </HomeLayout>
   );
 }