Skip to content

Commit

Permalink
fixed some ui bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yash-Ainapure
Yash-Ainapure committed Oct 18, 2024
1 parent 68e03e6 commit 5e6d29d
Show file tree
Hide file tree
Showing 17 changed files with 346 additions and 491 deletions.
28 changes: 26 additions & 2 deletions backend/package-lock.json
View file

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

33 changes: 30 additions & 3 deletions frontend/package-lock.json
View file

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

6 changes: 2 additions & 4 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useState } from "react";
import { Route, Routes, BrowserRouter as Router } from "react-router-dom";
import { Navbar } from "./appComponents/Navbar";
import { Navigation } from "./appComponents/Navbar";
import Hero from "./appComponents/Herosection";
import Clubs from "./appComponents/Clubs";
import Particles from "@/components/magicui/particles";
Expand All @@ -16,7 +16,6 @@ import About from "./appComponents/About";
import Footer from "./appComponents/Footer.tsx";
import ClubsPage from "./appComponents/ClubsPage.tsx";
import EventsPage from "./appComponents/EventsPage.tsx";
import Features from "./appComponents/Features.js";
import HiringPage from "./appComponents/HiringPage.tsx";
import PrivacyPolicy from "./appComponents/PrivacyPolicy.tsx";
import Terms from "./appComponents/Terms.tsx";
Expand All @@ -34,7 +33,7 @@ function App() {
return (
<Router>
<div className="bg-black font-popins">
<Navbar setShowLoginPage={setShowLoginPage} />
<Navigation setShowLoginPage={setShowLoginPage} />
<Routes>
<Route
path="/"
Expand All @@ -50,7 +49,6 @@ function App() {
refresh
/>
<Hero />
<Features />
<Clubs />
<Events />
<Footer />
Expand Down
130 changes: 64 additions & 66 deletions frontend/src/appComponents/About.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,35 @@
import { Card, CardContent } from "@/components/magicui/card"
import { Button } from "@/components/ui/button"
import { ChevronRight, Users, Award, Calendar, Zap } from 'lucide-react'
import {motion} from 'framer-motion'
import { Accordion,AccordionContent,AccordionItem, AccordionTrigger } from "@/components/magicui/accordion"
import { motion } from 'framer-motion'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/magicui/accordion"
import { Input } from "@/components/magicui/input"
import { useState } from "react"
import { useNavigate } from "react-router-dom"
import Footer from "./Footer"
// import { Navigation } from "./Navbar"
//import { Navigation } from "./Navdar"


const About =()=>{
const About = () => {

const [email,setEmail]=useState('')
const route= useNavigate()
const [email, setEmail] = useState('')
const route = useNavigate()
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()

console.log('Signed up with:', email)
setEmail('')
}
return(
}
return (
<div className="min-h-screen w-full bg-gray-50 text-gray-800">

<div className="relative z-10 bg-black text-white py-24 px-4 sm:px-6 lg:px-8 overflow-hidden">
<div className="absolute inset-0 animate-gradient"></div>
<div className="relative z-10 max-w-4xl mx-auto text-center pt-20">
<h1 className="text-5xl font-extrabold mb-4">Discover DYPCET Clubs</h1>
<p className="text-xl mb-8">Where Passion Meets Purpose</p>
<Button
onClick={()=>route('/clubboard')}
className="bg-white text-gray-900 hover:bg-gray-200">Explore Out Clubs</Button>
<Button
onClick={() => route('/clubboard')}
className="bg-white text-gray-900 hover:bg-gray-200">Explore Out Clubs</Button>
</div>
</div>

Expand All @@ -43,32 +41,32 @@ const About =()=>{

<div className="max-w-6xl mx-auto py-16 px-4 sm:px-6 lg:px-8">

<section className="mb-20">
<section className="mb-20">
<h2 className="text-3xl font-bold mb-6">Discover Your Community</h2>
<p className="text-lg text-gray-600 mb-8">
At DYPCET, we believe that education extends far beyond the classroom. Our vibrant club ecosystem is the heart of student life, offering a diverse array of opportunities for personal growth, skill development, and unforgettable experiences. Whether you're passionate about technology, arts, sports, or social causes, there's a place for you to thrive and make lasting connections.
At DYPCET, we believe that education extends far beyond the classroom. Our vibrant club ecosystem is the heart of student life, offering a diverse array of opportunities for personal growth, skill development, and unforgettable experiences. Whether you're passionate about technology, arts, sports, or social causes, there's a place for you to thrive and make lasting connections.
</p>
<div className="grid gap-8 md:grid-cols-3 lg:grid-cols-4">
{[
{ icon: Users, title: "50+ Active Clubs", desc: "Catering to diverse interests and passions" },
{ icon: Award, title: "Leadership Opportunities", desc: "Develop crucial skills for your future career" },
{ icon: Calendar, title: "200+ Annual Events", desc: "From workshops to competitions and social gatherings" },
{ icon: Zap, title: "Innovation Hub", desc: "Where ideas come to life through collaborative projects" }
].map((item,index)=>(
<motion.div
key={index}
className="bg-white rounded-lg border bg-card text-card-foreground shadow-sm"
initial={{scale:0}}
animate={{ rotate:360, scale:1}}
whileHover={{scale:1.04}}
transition={{
type:"spring",
stiffness:30,
damping:20
}}
].map((item, index) => (
<motion.div
key={index}
className="bg-white rounded-lg border bg-card text-card-foreground shadow-sm"
initial={{ scale: 0 }}
animate={{ rotate: 360, scale: 1 }}
whileHover={{ scale: 1.04 }}
transition={{
type: "spring",
stiffness: 30,
damping: 20
}}
>
<CardContent className="p-6 flex flex-col items-center text-center">
<item.icon className="w-12 h-12 text-gray-700 mb-4"/>
<item.icon className="w-12 h-12 text-gray-700 mb-4" />
<h3 className="text-xl font-semibold mb-2">{item.title}</h3>
<p className="text-gray-600">{item.desc}</p>
</CardContent>
Expand All @@ -87,26 +85,26 @@ const About =()=>{
{ year: 2021, title: "National Recognition", desc: "DYPCET Robotics Club won the All India Robotics Challenge" },
{ year: 2022, title: "Expansion and Growth", desc: "Number of active clubs doubled, reaching 50+" },
{ year: 2023, title: "Community Impact Award", desc: "Recognized for outstanding community service initiatives" }
].map((item,index)=>(
<div key={index} className={`flex ${index%2==0 ?'flex-row' :'flex-row-reverse'} items-center mb-8`}>
].map((item, index) => (
<div key={index} className={`flex ${index % 2 == 0 ? 'flex-row' : 'flex-row-reverse'} items-center mb-8`}>
<div className="w-1/2 px-4">
<motion.div
className="bg-white rounded-lg border bg-card text-card-foreground shadow-sm"
initial={{x:index%2==0?-600:600,opacity:0}}
animate={{x:0,opacity:1}}
transition={{
type:"spring",
duration:5,
ease:"easeInOut"

}}
whileHover={{
scale:1.04,
}}
<motion.div
className="bg-white rounded-lg border bg-card text-card-foreground shadow-sm"
initial={{ x: index % 2 == 0 ? -600 : 600, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{
type: "spring",
duration: 5,
ease: "easeInOut"

}}
whileHover={{
scale: 1.04,
}}
>
<CardContent className="p-4">
<h3 className="text-xl font-semibold mb-2">{item.year}:{item.title}</h3>
<p className="text-gray-600">{item.desc}</p>
<h3 className="text-xl font-semibold mb-2">{item.year}:{item.title}</h3>
<p className="text-gray-600">{item.desc}</p>
</CardContent>
</motion.div>
</div>
Expand All @@ -127,15 +125,15 @@ const About =()=>{
{ name: "Priya Sharma", role: "President, Coding Club", quote: "Being part of the Coding Club has not only enhanced my technical skills but also opened doors to amazing internship opportunities." },
{ name: "Rahul Desai", role: "Member, Environmental Club", quote: "Through our club initiatives, I've learned that even small actions can make a big difference in our community and environment." },
{ name: "Ananya Patel", role: "Organizer, Cultural Fest", quote: "Organizing our annual cultural fest taught me invaluable lessons in teamwork, time management, and leadership." }
].map((item,index)=>(
<motion.div
key={index}
className="bg-white rounded-lg border bg-card text-card-foreground shadow-sm"
initial={{ scale: 0.5, rotate: Math.random() * 180 - 90, opacity: 0 }}
animate={{ scale: 1, rotate: 0, opacity: 1 }}
transition={{ duration: 1.5, ease: "easeInOut", delay: index * 0.2 }}
whileHover={{scale:1.04}}
].map((item, index) => (
<motion.div
key={index}
className="bg-white rounded-lg border bg-card text-card-foreground shadow-sm"
initial={{ scale: 0.5, rotate: Math.random() * 180 - 90, opacity: 0 }}
animate={{ scale: 1, rotate: 0, opacity: 1 }}
transition={{ duration: 1.5, ease: "easeInOut", delay: index * 0.2 }}
whileHover={{ scale: 1.04 }}

>
<CardContent className="p-6">
<p className="text-gray-600 mb-4">{item.quote}</p>
Expand All @@ -155,7 +153,7 @@ const About =()=>{
{ question: "Can I start my own club?", answer: "If you have a unique idea for a club, gather a group of interested students and submit a proposal to the Student Activities Office. They'll guide you through the process of officially establishing your club." },
{ question: "Are there any fees to join clubs?", answer: "Most clubs are free to join. Some specialized clubs may have minimal fees to cover equipment or event costs, but this information is always provided upfront." },
{ question: "How much time commitment is required?", answer: "Time commitment varies by club and your level of involvement. Generally, clubs meet weekly or bi-weekly, with additional time for events or projects. You can always discuss expectations with club leaders." }
].map((item,index)=>(
].map((item, index) => (
<AccordionItem key={index} value={`item-${index}`}>
<AccordionTrigger>{item.question}</AccordionTrigger>
<AccordionContent>{item.answer}</AccordionContent>
Expand All @@ -172,11 +170,11 @@ const About =()=>{
<p className="text-gray-600 mb-4">Subscribe to our newsletter for the latest updates on club activites, events, and acchievements</p>
<form onSubmit={handleSubmit} className="flex gap-4">
<Input
type="email"
placeholder="Enter your email"
value={email}
onChange={(e)=>setEmail(e.target.value)}
className="flex-grow"
type="email"
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="flex-grow"
/>
<Button type="submit">Subscribe</Button>
</form>
Expand All @@ -186,21 +184,21 @@ const About =()=>{

<section className="text-center">
<h2 className="text-3xl font-bold mb-4">Ready to Embark on Your Club Journey</h2>
<p className="text-lg text-gray-600 mb-8">
<p className="text-lg text-gray-600 mb-8">
Explore our diverse range of clubs, find your passion, and become part of our vibrant community today!
</p>
<Button
onClick={()=>route('/clubboard')}
className="bg-gray-800 text-white hover:bg-gray-700">
Explore Clubs <ChevronRight className="ml-2"/>
<Button
onClick={() => route('/clubboard')}
className="bg-gray-800 text-white hover:bg-gray-700">
Explore Clubs <ChevronRight className="ml-2" />
</Button>

</section>



</div>
<Footer/>
<Footer />
</div>
)
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/appComponents/Clubs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function Clubs() {
</p>
</div>
{/* Clubs Grid */}
<div className="z-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 px-8">
{displayedClubs?.map((club, index) => (
<ClubCard
key={index}
Expand Down
Loading

0 comments on commit 5e6d29d

Please sign in to comment.