Skip to content

Commit

Permalink
added slider
Browse files Browse the repository at this point in the history
  • Loading branch information
vwakesahu committed Mar 27, 2024
1 parent 524fb73 commit 1d7cd1a
Show file tree
Hide file tree
Showing 15 changed files with 392 additions and 167 deletions.
35 changes: 35 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^1.0.0",
"embla-carousel-autoplay": "^8.0.0",
"embla-carousel-react": "^8.0.0",
"localforage": "^1.10.0",
"lucide-react": "^0.350.0",
"next": "^14.1.3",
Expand Down
29 changes: 0 additions & 29 deletions src/app/clubs/Cesa.js

This file was deleted.

138 changes: 6 additions & 132 deletions src/app/clubs/page.js
Original file line number Diff line number Diff line change
@@ -1,137 +1,11 @@
// import { Club } from "lucide-react";
import React from "react";
import Cesalogo from "../images/cesalogo.png";
import iiclogo from "../images/iiclogo.jpeg";
import { FaInstagram } from "react-icons/fa6";
import { FaFacebookF } from "react-icons/fa6";
import { FaXTwitter } from "react-icons/fa6";
'use client'

const Clubs = () => {
return (
<div>
<div className="flex flex-col items-center gap-2 mt-10">
<h1 className="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-5xl text-center">
Student Clubs
</h1>
<p className="text-xl font-medium text-gray-500 text-center">
DISCOVER DIFFERENT TEAMS that will infuse vitality into your college
experience
</p>
</div>

<div className=" grid md:grid-cols-3 justify-center items-center md:ml-[135px] mr-12 grid-cols-1 gap-2">
<div className="border h-auto w-64 mt-28 rounded-2xl shadow-xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<a href="https://www.instagram.com/cesa_ltce/">
<FaInstagram className="border h-12 w-12 px-2 py-2 rounded-full" />
</a>
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-xl hover:mt-2 transition-all duration-300 ease-in-out ">
<img src={iiclogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Society of India(CSI)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-2xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>
import Clubs from "@/modules/clubs";

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-2xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-2xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-2xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-2xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>

<div className="border h-auto w-64 mt-28 rounded-2xl shadow-2xl hover:mt-2 transition-all duration-300 ease-in-out">
<img src={Cesalogo} />
<p className="text-center font-medium text-lg ml-5 mr-5">
Computer Engineering Student Association (CESA)sa
</p>
<div className=" flex flex-row items-center justify-center mt-12 gap-3 mb-4">
<FaInstagram className=" border h-12 w-12 px-2 py-2 rounded-full " />
<FaFacebookF className=" border h-12 w-12 px-2 py-2 rounded-full" />
<FaXTwitter className=" border h-12 w-12 px-2 py-2 rounded-full" />
</div>
</div>
</div>
</div>
const Page = () => {
return (
<Clubs />
);
};

export default Clubs;
export default Page;
8 changes: 5 additions & 3 deletions src/app/events/page.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
'use client'
import Events from "@/modules/events";
import React from "react";

const Events = () => {
return <div>Events</div>;
const Page = () => {
return <Events />;
};

export default Events;
export default Page;
8 changes: 5 additions & 3 deletions src/app/zephyr/page.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
'use client'
import Zephyr from "@/modules/zephyr";
import React from "react";

const Zephyr = () => {
return <div>Zephyr</div>;
const Page = () => {
return <Zephyr />;
};

export default Zephyr;
export default Page;
Binary file added src/assets/1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions src/components/carousel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { useRef, useState } from "react"

import { Card, CardContent } from "@/components/ui/card"
import {
Carousel,
CarouselContent,
CarouselItem,
} from "@/components/ui/carousel"
import Autoplay from 'embla-carousel-autoplay';
import Image from "next/image";

export function CarouselDemo({ imgArray }) {
const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));

return (
<Carousel className="w-full max-w-[80vw]" plugins={[plugin.current]}>
<CarouselContent>
{Array.from({ length: 3 }).map((_, index) => (
<CarouselItem key={index}>
<div className="p-1">
<Card className='p-6 py-8'>
<CardContent className="flex items-center justify-center h-[50vh] overflow-hidden">
<Image src={imgArray[index]} width={1920} height={1080} />
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
</Carousel>
)
}
50 changes: 50 additions & 0 deletions src/components/ui/card.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
{...props} />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props} />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
{...props} />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props} />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props} />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
Loading

0 comments on commit 1d7cd1a

Please sign in to comment.