From af3691e72767c290426225587123e8e91036a754 Mon Sep 17 00:00:00 2001
From: RoBWarrior <122681672+RoBWarrior@users.noreply.github.com>
Date: Tue, 24 Dec 2024 15:43:39 +0530
Subject: [PATCH 1/4] added carouselhome
---
src/components/CarouselHome.jsx | 182 ++++++++++++++++++++++++++++++++
1 file changed, 182 insertions(+)
create mode 100644 src/components/CarouselHome.jsx
diff --git a/src/components/CarouselHome.jsx b/src/components/CarouselHome.jsx
new file mode 100644
index 0000000..e07e206
--- /dev/null
+++ b/src/components/CarouselHome.jsx
@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from "react";
+import Codingclasses from "../assets/images/Codingclasses.jpg";
+import ama from "../assets/images/AMMA.jpg";
+import rechase from "../assets/images/rechase.jpg";
+
+const CarouselWithContent = () => {
+ const [activeIndex, setActiveIndex] = useState(0); // State for active index
+
+ // Array of slide objects containing images, headers, and descriptions
+ const slides = [
+ {
+ image: Codingclasses,
+ header: "Coding Classes",
+ description:
+ "Dive into the world of programming with our dynamic and interactive coding classes! Whether you're a complete beginner or looking to advance your skills, our classes are designed to cater to all levels.",
+ },
+ {
+ image: ama,
+ header: "Ask Me Anything (AMA)",
+ description:
+ "Ask Me Anything (AMA) is an interactive session with our esteemed alumni for career-related tips and advice.",
+ },
+ {
+ image: rechase,
+ header: "REChase",
+ description:
+ "Annual treasure hunt competition which involves solving riddles and reaching the various locations inside the campus",
+ },
+ {
+ image: Codingclasses,
+ header: "RECode",
+ description:
+ "Put your coding skills to the test in our monthly RECode contest where programmers of all levels come together to solve challenging problems, showcase their talents, and compete for amazing prizes.",
+ },
+ {
+ image: Codingclasses,
+ header: "ICPC",
+ description:
+ "We offer a range of support programs specifically designed to improve student participation and performance in The International Collegiate Programming Contest, which is an annual multi-tiered competitive programming competition among the universities of the world.",
+ },
+ {
+ image: Codingclasses,
+ header: "Alohomora",
+ description:
+ "Alohomora, an ACM-ICPC style competitive programming contest, where teams from all over the world will be battling against each other to come out at the top and be the best.",
+ },
+ ];
+
+ // Function to handle next slide
+ const handleNext = () => {
+ setActiveIndex((prevIndex) => (prevIndex + 1) % slides.length);
+ };
+
+ // Function to handle previous slide
+ const handlePrev = () => {
+ setActiveIndex((prevIndex) =>
+ prevIndex === 0 ? slides.length - 1 : prevIndex - 1
+ );
+ };
+
+ // Function to handle dot click
+ const handleDotClick = (index) => {
+ setActiveIndex(index);
+ };
+
+ // Optional: Automatic sliding
+ useEffect(() => {
+ const interval = setInterval(() => {
+ handleNext();
+ }, 12000); // Change slide every 12 seconds
+
+ return () => clearInterval(interval); // Cleanup on unmount
+ }, []);
+
+ return (
+
+
+
+ {/* Map through slides to create items */}
+ {slides.map((slide, index) => (
+
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 3728723..8d0a2fb 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -14,22 +14,11 @@ import bulb from "../assets/images/bulb.svg";
import angularr from "../assets/images/angular.svg";
import people from "../assets/images/people.svg";
-
import { useEffect, useLayoutEffect, useState, useRef } from "react";
+import { Link } from "react-router-dom";
import {
- Box,
Image,
- Badge,
- Text,
- Stack,
- Button,
- Flex,
- Spacer,
useToast,
- SlideFade,
- StackDivider,
- // SimpleGrid,
- Card,
HStack,
VStack,
useBreakpointValue,
@@ -41,10 +30,10 @@ import FlipCard from "./FlipCard";
import CarouselWithContent from "./CarouselHome";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { getHome } from "../api/home";
+// import { getHome } from "../api/home";
import "../test.css";
import "../App.css";
-import { motion } from 'framer-motion';
+import { motion } from "framer-motion";
gsap.registerPlugin(ScrollTrigger);
@@ -57,7 +46,6 @@ function Home() {
const [isHovered3, setIsHovered3] = useState(false);
const toast = useToast();
-
const StackComponent = useBreakpointValue({ base: VStack, md: HStack });
const screenWidth = window.innerWidth;
@@ -66,38 +54,76 @@ function Home() {
) : (
-
+
+
+
-
-
-
The Official Programming Community of NIT Durgapur
-
We are programming community of NIT Durgapur, with focus on improving coding culture institute wide by conducting regular lectures from beginner to advance topics of programming. Our goal is to increase student's participation in inter-collegiate contest like ACM-ICPC and help them get better.
-
-
+
+
+
+ The Official Programming Community of NIT Durgapur
+
+
+ We are programming community of NIT Durgapur, with focus on
+ improving coding culture institute wide by conducting regular
+ lectures from beginner to advance topics of programming. Our goal is
+ to increase student's participation in inter-collegiate contest like
+ ACM-ICPC and help them get better.
+
+ {/* Optional overlay for aesthetics */}
+
+