Merge branch 'levelupesg:main' into main

Dockerfile

@@ -1,27 +1,7 @@
-# Use an official Node.js runtime as a parent image
-FROM node:16
-
-# Set the working directory in the container
+FROM node:21
 WORKDIR /app
-
-# Copy package.json and package-lock.json to the working directory
 COPY package*.json ./
-
-# Install app dependencies
-RUN npm upgrade
-
-# Install app dependencies
 RUN npm install
-
-# Install Vite globally
-RUN npm install -g create-vite
-
-# Copy the rest of your application code to the working directory
 COPY . .
-
-# Expose a port to communicate with the React app
 EXPOSE 5173
-
-# Start your React app using Vite
-CMD ["npx", "create-vite", "dev"]
-
+CMD ["npm","run","dev"]

README.md

@@ -1 +1,20 @@
+Prereq:
+1. az cli
+2. npm/nodejs
+3. docker/docker-compose
+
+Local Build:
+1. Remove package lock file
+2. Run "npm install"
+3. Run "npm run dev" and check the deployment
+
+Build Docker image
+1. Run "docker build -t levelupwww ."
+2. Run "docker images" check the image
+3. Run "docker run -it -p 80:5173 levelupwww" and deploy the image locally on port 80
+4. Run "az login" to login to Azure
+5. Run "az acr login --name levelupwww" to log in to container registry
+6. Run "docker tag levelupwww levelupwww.azurecr.io/levelupwww:latest" to tag the local image
+7. Run "docker push levelupwww.azurecr.io/levelupwww:latest" to push the latest image
+
 

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "scripts": {
+  "scripts": { 
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
@@ -12,7 +12,6 @@
   "build": {
     "outDir": "build"
   },
-
   "dependencies": {
     "@dotlottie/react-player": "^1.6.3",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -43,6 +42,8 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.22.0",
     "react-router-hash-link": "^2.4.3",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "sort-by": "^0.0.2",
     "styled-components": "^6.1.8",
     "tailwind-merge": "^2.2.1"
@@ -59,10 +60,9 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
-    "vite": "^5.0.8"
+    "vite": "^5.1.4"
   },
   "engines": {
-        "node": ">=18.0.0"
-      }
-
+    "node": ">=18.0.0"
+  }
 }

public/assets/css/index.css

@@ -3,8 +3,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
-
 body {
     background-color: #f9fff5;
     font-family: 'Inter', sans-serif;

src/Components/AboutComponent/PrincipelCompo.jsx

@@ -3,7 +3,7 @@ import PrimaryButton from "../Buttons/PrimaryButton";
 
 function PrincipelCompo() {
   return (
-    <section className="py-12 mb-28 bg-gradient-to-r from-[#1C4987] to-[#159D9B] max-w-[1400px] mx-auto">
+    <section className="py-12 mb-28 rounded-3xl bg-gradient-to-r from-[#1C4987] to-[#159D9B] max-w-[1400px] mx-auto">
       <div className="max-w-[1000px] px-3 mx-auto ">
         <div className="text-center   ">
           <h2 className="font-semibold md:font-bold text-3xl md:text-5xl px-6 py-3 w-fit mx-auto mb-8 rounded-3xl text-white ">LevelUp Principles</h2>

src/Components/Blog/BlogHero.jsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import Slider from "react-slick";
+import BlogCard from "../BlogCard/TopBlogCard";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+
+// Custom Arrow components
+function SampleNextArrow(props) {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={className}
+      style={{ ...style, display: "block" }}
+      onClick={onClick}
+    />
+  );
+}
+
+function SamplePrevArrow(props) {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={className}
+      style={{ ...style, display: "block"}}
+      onClick={onClick}
+    />
+  );
+}
+
+const BlogHero = () => {
+  const [blogs, setBlogs] = useState(null);
+
+  useEffect(() => {
+    fetch(process.env.BLOG_EXPLORE_API_URL)
+      .then((response) => response.json())
+      .then((data) => {
+        setBlogs(Array.from(data));
+      });
+  }, []);
+
+  const sliderSettings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    nextArrow: <SampleNextArrow />,
+    prevArrow: <SamplePrevArrow />,
+    autoplay: true,
+    autoplaySpeed: 3000,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 2,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+        },
+      },
+    ],
+  };
+
+  if (!blogs) return <div>Loading...</div>;
+  return (
+    <div className="container pt-28 pb-20 mx-auto px-[5%]  bg-gradient-to-b from-[#112b65] to-[#02c2ab] rounded-b-[40px]">
+      <h1 className="text-center font-bold text-4xl mb-4 text-white">
+        Top Selected Blogs for You
+      </h1>
+      {/* Blog Slider */}
+      {blogs && blogs.length > 0 && (
+        <div className="mb-8">
+          <Slider {...sliderSettings}>
+            {blogs.map((blog, index) => (
+              <div key={index} className="p-4">
+                <BlogCard blog={blog} />
+              </div>
+            ))}
+          </Slider>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BlogHero;

src/Components/Blog/BlogShow.jsx

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import BlogCard from "../BlogCard/BlogCard"; 
+import PrimaryButton from "../Buttons/PrimaryButton";
+
+// Assuming you have a blogs array already available. If not, you'll need to fetch or import this data.
+const blogs = [
+  {
+    _id: "1",
+    title: "Blog Title 1",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 1",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "2",
+    title: "Blog Title 2",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 2",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "3",
+    title: "Blog Title 3",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 3",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "4",
+    title: "Blog Title 4",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 4",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "5",
+    title: "Blog Title 5",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 5",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "6",
+    title: "Blog Title 6",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 6",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "7",
+    title: "Blog Title 7",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 7",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "8",
+    title: "Blog Title 8",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 8",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "9",
+    title: "Blog Title 9",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 9",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "10",
+    title: "Blog Title 10",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 10",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "11",
+    title: "Blog Title 11",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 11",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "12",
+    title: "Blog Title 12",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 12",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "13",
+    title: "Blog Title 13",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 13",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "14",
+    title: "Blog Title 14",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 14",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "15",
+    title: "Blog Title 15",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 15",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "16",
+    title: "Blog Title 16",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 16",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "17",
+    title: "Blog Title 17",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 17",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "18",
+    title: "Blog Title 18",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 18",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "19",
+    title: "Blog Title 19",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 19",
+    keywords: ["keyword1", "keyword2"],
+  },
+  {
+    _id: "20",
+    title: "Blog Title 20",
+    image: "https://via.placeholder.com/300",
+    summary: "Blog Summary 20",
+    keywords: ["keyword1", "keyword2"],
+  },
+];
+
+const BlogShow = () => {
+  const [visibleBlogs, setVisibleBlogs] = useState(9);
+
+  const handleShowMoreBlogs = () => {
+    setVisibleBlogs((prevVisibleBlogs) => prevVisibleBlogs + 9);
+  };
+
+  return (
+    <div className="container px-[5%] mt-20 mx-auto">
+      <h2 className="text-center text-5xl font-bold text-[#002E70] mb-4">
+        Learn from our impact makers
+      </h2>
+      <p className="text-center text-2xl  text-[#002E70] mb-4">
+        Our blog is a great resource for learning about the latest trends in
+        sustainability, ESG, and corporate governance.
+      </p>
+      {/* Blog Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {blogs.slice(0, visibleBlogs).map((blog, index) => (
+          <BlogCard key={index} blog={blog} />
+        ))}
+      </div>
+      {visibleBlogs < blogs.length && (
+        <div className="text-center mt-4">
+          <PrimaryButton onCLick={handleShowMoreBlogs} title={"More Blogs"}/>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BlogShow;