[FEAT]: Created ambassador feature (#607)

### Description

closes issue #604 

1. Designed the ambassador program image
2. Designed the community news and videos images
3. Created ambassador container

src/assets/index.js

@@ -23,7 +23,16 @@ import newLogo from "../assets/image/newLogo.png";
 import anime1 from "../assets/image/anime1.png";
 import anime2 from "../assets/image/anime2.jpeg";
 import anime3 from "../assets/image/anime3.png";
+import ambassador from "../assets/image/ambassador.png";
+import news1 from "../assets/image/news1.png";
+import news2 from "../assets/image/news2.png";
+import news3 from "../assets/image/news3.png";
+import video1 from "../assets/image/video1.png";
+import video2 from "../assets/image/video2.png";
+import video3 from "../assets/image/video3.png";
+
 export {
+  ambassador,
   anime1,
   anime2,
   anime3,
@@ -37,6 +46,9 @@ export {
   stylishShirt,
   navTshirt,
   menuToggle,
+  news1,
+  news2,
+  news3,
   objectFoot,
   favicon,
   Card1,
@@ -49,4 +61,7 @@ export {
   loginImgGif,
   googleImg,
   gssoc,
+  video1,
+  video2,
+  video3,
 };

src/components/Ambassador/index.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ambassador } from "../../assets";
+
+const Ambassador = () => {
+  return (
+    <div className="flex h-[50vh] ml-20 mr-20 p-5 rounded-lg">
+      <div className="w-1/2 h-full p-5">
+        <div className="flex text-3xl">
+          <span className="text-pink-600 font-bold"> | </span>
+          <h1 className="mr-3 ml-3 font-semibold">Ambassador</h1>
+          <span className="">Program</span>
+        </div>
+        <div className="description mt-5">
+          <p className="leading-relaxed">
+            Support the Fashion Froze core team through community and <br />
+            marketing initiatives while accumulating rewards
+          </p>
+        </div>
+        <button className="border p-3 bg-pink-500 rounded-full w-[25%] mt-10 font-normal hover:bg-violet-800">
+          Learn more {"  "}
+        </button>
+      </div>
+      <div className="w-1/2 h-full ml-20 ">
+        <img src={ambassador} alt="" className="w-[80%] h-[100%]" />
+      </div>
+    </div>
+  );
+};
+
+export default Ambassador;

src/components/CommunityNews/index.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const CommmunityNews = () => {
+  return <div>index</div>;
+};
+
+export default CommmunityNews;

src/components/CommunityVideos/index.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const CommunityVideos = () => {
+  return <div>index</div>;
+};
+
+export default CommunityVideos;

src/pages/CommunityLanding/index.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 const CommunityLanding = () => {
   return (
-    <div className="w-full h-screen">
-      <div className="bg-[url(/HeroSvg.png)] w-[100%] h-[30%] mt-10 mr-20">
+    <div className="w-full h-[100vh]">
+      <div className="bg-[url(/HeroSvg.png)] w-[100%] h-[25%] mt-10 mr-20">
         <div className="absolute top-40 left-80">
           <div className="flex flex-col text-center ml-40 ">
             <h1 className="font-semibold text-4xl border p-3 rounded-lg text-[#9400D3]">
@@ -17,10 +17,10 @@ const CommunityLanding = () => {
           </div>
         </div>
       </div>
-      <div className="flex  ml-20 w-[90%] h-[50%] mt-10 border p-3 rounded-lg">
+      <div className="flex ml-20 w-[90%] mt-20 p-3 rounded-lg">
         <div className="w-1/3 backdrop-blur-md p-5">
-          <div className="flex text-2xl">
-            <span className="text-green-800 font-bold"> | </span>
+          <div className="flex text-3xl">
+            <span className="text-pink-600 font-bold"> | </span>
             <h1 className="mr-3 ml-3">Community</h1>
             <span className="font-semibold">Platforms</span>
           </div>

src/views/app/CommunityLanding/index.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import HomeLayout from "../../../layout/HomeLayout.jsx";
 import CommunityLanding from "../../../pages/CommunityLanding/index.jsx";
+import Ambassador from "../../../components/Ambassador/index.jsx";
 
 function Guide() {
   return (
     <HomeLayout>
       <CommunityLanding />
+      <Ambassador />
     </HomeLayout>
   );
 }