Events and Team

package.json

@@ -19,13 +19,16 @@
     "react": "^18.2.0",
     "react-dom": "^18",
     "react-element-to-jsx-string": "^15.0.0",
+    "react-slick": "^0.30.2",
     "scroll": "^3.0.1",
+    "slick-carousel": "^1.8.1",
     "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-slick": "^0.23.13",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.3",

src/app/spryzen/events.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import Image from "next/image";
+
+const eventItems = [
+    {
+        id: 1,
+        image: "/image/HO.png",
+        title: "Code your way to a good time!",
+        desc: "Hackodisha is brought to you by Webwiz on the occasion of the Diamond Jubilee celebration of NIT Rourkela. It is a community based virtual hackathon that is not limited only to Odisha but is meant for the students and coding enthusiasts all around the country. Scheduled on 18-19th September, Hackodisha is a 36 hour event where participants can showcase their unique ideas and expand their boundaries with sparkles of creativity.",
+    },
+    {
+        id: 2,
+        image: "/image/HO.png",
+        title: "Code your way to a good time!",
+        desc: "Hackodisha is brought to you by Webwiz on the occasion of the Diamond Jubilee celebration of NIT Rourkela. It is a community based virtual hackathon that is not limited only to Odisha but is meant for the students and coding enthusiasts all around the country. Scheduled on 18-19th September, Hackodisha is a 36 hour event where participants can showcase their unique ideas and expand their boundaries with sparkles of creativity.",
+    },
+    {
+        id: 3,
+        image: "/image/HO.png",
+        title: "Code your way to a good time!",
+        desc: "Hackodisha is brought to you by Webwiz on the occasion of the Diamond Jubilee celebration of NIT Rourkela. It is a community based virtual hackathon that is not limited only to Odisha but is meant for the students and coding enthusiasts all around the country. Scheduled on 18-19th September, Hackodisha is a 36 hour event where participants can showcase their unique ideas and expand their boundaries with sparkles of creativity.",
+    },
+];
+
+export default function EventsPage(){
+    return(
+        <div className="w-full pt-10">
+            <h1 className="mx-auto mb-14 text-center py-4 text-xl font-semibold
+            w-32 rounded-full border-2 border-purple-900">
+                Events
+            </h1>
+
+            <div className="event-wrapper xl:w-4/5 w-[90%] space-y-14 mx-auto">
+                {eventItems.map((item) => 
+                <div key={item.id} className="lg:flex even:flex-row-reverse justify-between">
+
+                    <Image src={item.image} alt="" width={453} height={316}
+                    className="md:w-[453px] md:h-[296px] w-[320px] h-[200px] lg:mx-0 mx-auto rounded-md object-cover border-2 border-purple-900" />
+
+                    <div className="lg:w-1/2 w-full lg:mt-0 mt-4">
+                        <div className="lg:text-left text-center">
+                        <h2 className="md:text-3xl text-xl font-bold 
+                        inline-block text-transparent bg-clip-text
+                        bg-gradient-to-r from-[#8C6CEA] via-[#FF5E69] to-[#FFA84B]">
+                            {item.title}
+                        </h2>
+                        </div>
+                        <p className="md:text-lg text-sm mt-4">{item.desc}</p>
+                    </div>
+                </div>
+                )}
+            </div>
+        </div>
+    );
+};

src/app/spryzen/page.tsx

@@ -0,0 +1,14 @@
+"use client"
+import React from 'react';
+import EventsPage from './events';
+import Team from './team';
+function page() {
+    return (
+        <div>
+            <EventsPage />
+            <Team />
+        </div>
+    );
+}
+
+export default page;

src/app/spryzen/team.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Image from "next/image";
+
+
+const teamMembers = [
+    {
+        id: 1,
+        name: "Name",
+        image: "/image/anushrey.jpg",
+        role: "Role",
+    },
+    {
+        id: 2,
+        name: "Name",
+        image: "/image/raj.jpg",
+        role: "Role",
+    },
+    {
+        id: 3,
+        name: "Name",
+        image: "/image/ankit.jpg",
+        role: "Role",
+    },
+    {
+        id: 4,
+        name: "Name",
+        image: "/image/anushrey.jpg",
+        role: "Role",
+    },
+    {
+        id: 5,
+        name: "Name",
+        image: "/image/raj.jpg",
+        role: "Role",
+    },
+];
+
+const settings = {
+    dots: false,
+    infinite: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    speed: 600,
+    fade: true,
+    autoplaySpeed: 7000,
+    pauseOnHover: true,
+    swipeToSlide: true,
+    cssEase: "linear",
+  };
+
+export default function Team(){
+    return(
+        <>
+        <div className="text-center pt-10">
+        <h1 className="text-lg font-semibold text-purple-800">WHO WE ARE</h1>
+        <h2 className="md:text-3xl text-xl font-bold 
+        inline-block text-transparent bg-clip-text
+        bg-gradient-to-r from-[#8C6CEA] via-[#FF5E69] to-[#FFA84B]">
+            Meet our Team
+        </h2>
+        <p className="mx-auto px-4 mt-2 max-w-[550px]">Just take a look - each member of the team is watching your
+            every gesture and will hear your every whisper.
+        </p>
+        </div>
+
+        <div className="hidden sm:flex flex-wrap justify-evenly mt-7 mx-auto w-[90%] space-x-3">
+            {teamMembers.map((member) => 
+                <div key={member.id} className="mb-7">
+                    <Image src={member.image} alt="" width={224} height={467}
+                    className="w-[224px] h-[467px] object-cover rounded-lg" />
+                </div>
+            )}
+        </div>
+
+        <div className="sm:hidden w-3/4 mx-auto py-10 ">
+        <Slider {...settings}>
+            {teamMembers.map((member) => 
+                <div key={member.id} className="flex">
+                    <Image src={member.image} alt="" width={224} height={467}
+                    className="w-[224px] h-[467px] object-cover rounded-lg
+                    mx-auto" />
+                </div>
+            )}
+        </Slider>
+        </div>
+        </>
+    );
+};