added events page

package.json

@@ -34,6 +34,7 @@
         "react": "18.2.0",
         "react-canvas-nest": "^1.1.1",
         "react-dom": "18.2.0",
+        "react-icons": "^5.0.1",
         "react-markdown": "^9.0.1",
         "react-paginate": "^8.2.0",
         "tailwind": "^4.0.0",

src/app/blogs/Blogcard.js

@@ -1,26 +1,3 @@
-// src/components/BlogCard.js
-/*import Link from 'next/link';
-import styles from './Blogcard.module.css'; // Use CSS modules for styles
-
-const BlogCard = ({ title, blogLink}) => {
-  //const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
-
-  return (
-    <div className={styles.blogcontainer}>
-      <div className={styles.blogCard}>
-        <div className={styles.blogDetails}>
-          <h2 className={styles.head}>{title}</h2>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BlogCard;
-
-// src/components/BlogCard.js*/
-
-// src/components/BlogCard.js
 import Link from 'next/link';
 import Image from 'next/image';
 import styles from './Blogcard.module.css'; // Use CSS modules for styles
@@ -37,7 +14,7 @@ const BlogCard = ({ title, authors, img, description, slug, date }) => {
         <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
         <p className='font-medium text-xs mb-1'>{date}</p>
         <p className={`font-medium mb-3 ${styles.para}`}>by {authors}</p>
-        <p className={styles.para}>{description}</p>
+        <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
       </div>
     </div>
   );

src/app/blogs/page.js

@@ -75,7 +75,7 @@ const BlogList = () => {
 
   return (
     <>
-      <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3'>
+      <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3 2xl:grid-cols-4'>
         {blogs.map((blog, index) => {
           return (
             <>

src/app/events/Eventcard.module.css

@@ -0,0 +1,64 @@
+.bton {
+  background-color: purple;
+  width: fit-content;
+  color: #fff;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+}
+
+.bton:hover {
+  background-color: whitesmoke;
+  color: purple;
+}
+
+.blogCard {
+  width: 350px;
+  height: fit-content;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  display: flex;
+  transition: transform 0.3s ease-in-out;
+  cursor: pointer;
+  flex-direction: column;
+  height: 100%;
+}
+
+.blogCcard:hover {
+  transform: scale(1.02);
+}
+
+.blogDetails {
+  padding: 20px;
+  width: 100%; /* Adjusted width for details */
+  background-color: #f9f9f9;
+  height: 100%;
+}
+
+.blogImage {
+  width: 100%; /* Adjusted width for image */
+  height: auto;
+  background-color: #ddd;
+  background-size: cover;
+  height: 200px;
+}
+
+.head {
+  margin-bottom: 10px;
+  font-size: 1.2rem;
+  color: #333;
+}
+
+.para {
+  color: #555;
+  font-size: small;
+}
+
+.p:last-child {
+  margin-bottom: 0;
+}

src/app/events/Eventlist.css

@@ -0,0 +1,6 @@
+.blog-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+

src/app/events/[blogid]/page.js

@@ -0,0 +1,63 @@
+// Import necessary modules
+"use client"
+import { useEffect, useState } from "react";
+import Navbar from "@/components/Navbar/Navbar";
+import Footer from "@/components/footer";
+import ReactMarkdown from "react-markdown";
+import './styleblog.css'
+// Import Tailwind CSS classes
+import 'tailwindcss/tailwind.css';
+
+// Component definition
+const BlogId = ({ params }) => {
+  console.log(params.blogid)
+  // State to store the fetched data
+  const [blogData, setBlogData] = useState(null);
+
+  // Effect to fetch data when the component mounts
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch data from the API
+        const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
+        const data = await response.json();
+        console.log("check",data);
+        // Find the blog post with the matching id
+        const matchingBlog = data.items.find(blog => blog.id === parseInt(params.blogid));
+
+        // Update the state with the matching blog data
+        setBlogData(matchingBlog);
+        console.log("blog :",matchingBlog.blog_img_url)
+
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    // Call the fetchData function
+    fetchData();
+  }, [params.id]); // Include params.id in the dependency array to refetch data when id changes
+
+  // Render the component
+  return (
+    <>
+
+    <div className="min-h-screen bg-rose-100 flex items-center justify-center">
+
+      <div className="max-w-4xl w-full">
+        {blogData ? (
+          <div>
+            <h2 className=" mb-2 text-center blogstyle">{blogData.title}</h2>
+          <ReactMarkdown className="prose pt-3  text-black blogbody p-8 rounded-md shadow-xl z-10">{blogData.blog_body}</ReactMarkdown>
+          </div>
+        ) : (
+          <p>Loading...</p>
+        )}
+      </div>
+    </div>
+    <Footer /></>
+  );
+};
+
+// Export the component
+export default BlogId;

src/app/events/[blogid]/styleblog.css

@@ -0,0 +1,18 @@
+@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Crimson+Text:ital,wght@1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@900&display=swap');
+
+.blogstyle {
+    font-family: "Montserrat", sans-serif;
+    font-size: 50px;
+    font-weight: bold;
+    font-style: normal;
+    letter-spacing: 0;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    margin-top: 5.4rem;
+}
+
+.blogbody{
+    font-family: "Montserrat", sans-serif;
+
+}

src/app/events/eventCard.js

@@ -0,0 +1,27 @@
+// src/components/BlogCard.js
+import Link from 'next/link';
+import Image from 'next/image';
+import styles from './Eventcard.module.css'; // Use CSS modules for styles
+import { CiCalendar } from "react-icons/ci";
+import { IoLocationOutline } from "react-icons/io5";
+import ReactMarkdown from "react-markdown";
+
+const BlogCard = ({ title, img, description, slug, date }) => {
+  // const truncatedDescription = description.length > 100 ? `${description.slice(0, 100)}...` : description;
+
+  return (
+    <div className={styles.blogCard}>
+      <div className={styles.blogImage}>
+        <img className='w-full object-cover h-52' src={img} alt={title} />
+      </div>
+      <div className={styles.blogDetails}>
+        <h2 className={`font-semibold ${styles.head}`}>{title}</h2>
+        <p className='font-medium text-sm mb-1 flex gap-2 items-center'><CiCalendar /> {" "} <span>{date}</span></p>
+        <p className='font-medium text-sm mb-1 flex gap-2 items-center'><IoLocationOutline /> {" "} <span>SJA</span></p>
+        <p className={styles.para}>{description.slice(0, 150) + "... see more"}</p>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;

src/app/events/page.js

@@ -0,0 +1,67 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import BlogCard from './eventCard';
+import Footer from '@/components/footer';
+import Navbar from "@/components/Navbar/Navbar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+const BlogList = () => {
+  const [blogs, setBlogs] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const blogsPerPage = 6;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=events.EventsPage&fields=*');
+        const data = await response.json();
+        setBlogs(data.items);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  // Calculate the index range for the current page
+  const indexOfLastBlog = currentPage * blogsPerPage;
+  const indexOfFirstBlog = indexOfLastBlog - blogsPerPage;
+  const currentBlogs = blogs.slice(indexOfFirstBlog, indexOfLastBlog);
+
+  // Function to handle page change
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+  };
+
+  return (
+    <>
+      <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3 2xl:grid-cols-4'>
+        {blogs.map((blog, index) => {
+          return (
+            <>
+              <BlogCard
+                key={index}
+                title={blog.title}
+                organizer={blog.event_organizer}
+                img="https://images.unsplash.com/photo-1549451371-64aa98a6f660?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                description="A fun-filled event to bring out the gamer in you and compete to be the best gamer out there. Register in teams of 5 or individually and showcase your gaming talent! Individual registrants will be teamed up with other individual registrants to form teams of 5."
+                slug={blog.event_slug}
+                date={blog.event_date}
+              />
+            </>
+          )
+        })}
+      </div>
+    </>
+  );
+};
+
+export default BlogList;

src/app/team/page.js

@@ -114,9 +114,9 @@ const Home = () => {
           {teamMembers.map((member, index) => (
             <div
               key={index}
-              className="profile-card relative w-64 h-140 bg-white p-6 border-4 border--500 rounded-lg shadow-lg transition-all duration-400 hover:border-0 hover:h-140 hover:w-140 text-center mb-8 mx-4 group"
+              className="profile-card overflow-hidden relative w-56 h-140 bg-white p-5 rounded-lg shadow-md border-[1px] transition-all duration-400 hover:border-0 hover:h-140 hover:w-140 text-center mb-8 mx-4 group"
             >
-              <div className="img w-32 h-32 mx-auto mb-4 relative group-hover:-translate-y-5 group-hover:scale-105">
+              <div className="z-10 w-24 h-24 mx-auto mb-4 relative group-hover:-translate-y-2 group-hover:ease-in-out transition-all group-hover:scale-110">
                 <Image
                   src="/man-avatar-clipart-illustration-free-png.webp"
                   alt="Profile"
@@ -146,6 +146,7 @@ const Home = () => {
                   />
                 </div>
               </div>
+              <div className='w-full skew-y-12 h-32 z-0 bg-purple-500/80 absolute -top-10 -right-0 '></div>
             </div>
           ))}
         </div>

src/components/ProjectCard.js

@@ -8,7 +8,7 @@ const ProjectCard = ({ project }) => {
       <Link href={`/projects/${project.id}`} className='h-full'>
         <h6 className="mb-2 text-md font-semibold text-fuchsia-900">{project.project_sig}</h6>
         <h5 className="mb-2 text-2xl font-semibold tracking-tight text-black">{project.title}</h5>
-        <p className="mb-3 font-normal text-gray-700">({project.project_description.slice(0, 250)})</p>
+        <p className="mb-3 font-normal text-gray-700">({project.project_description.slice(0, 150) + "... see more"})</p>
       </Link>
       <a href={project.github_url} className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-teal-600 rounded-lg hover:bg-teal-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-github mr-2" viewBox="0 0 16 16">

src/components/ProjectsPage.js

@@ -19,7 +19,7 @@ const ProjectsPage = ({ projects }) => {
   return (
 
 
-    <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3' >
+    <div className='mt-4 py-4 p-5 md:p-10 md:py-4 grid gap-5 grid-cols-1 md:grid-cols-2 xl:p-20 xl:py-4 lg:grid-cols-3 2xl:grid-cols-4' >
       {currentProjects.map((project) => {
         return (
           <>