Skip to content

feat: add hover animation and shadow effect to subject cards #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KaushalxPrajapati wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add hover animation and shadow effect to subject cards #296

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
272 changes: 97 additions & 175 deletions app/components/subjects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,195 +1,117 @@
"use client";
import Link from "next/link";
'use client';
import Link from 'next/link';

const subjects = {
"Semester-1": [
"Basic Electrical and Electronics",
"Basics of Mechanical Engineering",
"C Programming",
"Engineering Mathematics-1",
"Engineering Physics",
"Engineering Graphics & Design",
"English Communication",
],
"Semester-2": [
"Digital Electronics & Logic Circuits",
"OOPs with Java",
"Engineering Mathematics-2",
"Data Structures using C",
"Modern Biology",
"Environmental Studies",
],
"Semester-3": [
"Problem Solving using Python",
"Data Science using Python Libraries",
"Computer Organization & Architecture",
"Probability & Statistics",
"Theory of Computation",
"Information Technology",
"Technical Writing",
],
"Semester-4": [
"Discrete Mathematics",
"Computer Networks",
"Database Management Systems",
"Operating Systems",
"Web Technologies",
"DevOps & Linux Administration",
"Organizational Behavior",
],
"Semester-5": [
"Artificial Intelligence",
"Algorithm Design and Analysis",
"Cloud Computing",
"Economics for Engineers",
"IoT (Internet of Things)",
"Compiler Design",
"Cyber Laws and Ethics",
"Cryptography & Network Security",
],
"Semester-6": [
"Machine Learning",
"Natural Language Processing",
"Deep Learning",
"Computer Vision and Image Processing",
"Blockchain Technology",
"Information Retrieval",
"Management Information Systems",
],
"Semester-7": [
"VLSI and Embedded Systems",
"Entrepreneurship & Startup",
"Financial Management",
"Robotic Access Automation",
"Marketing Management",
"Big-data Analytics",
"Decision Sciences",
],
"Semester-8": [
"Software Engineering",
],
'Semester-1': ['Basic Electrical and Electronics', 'Basics of Mechanical Engineering', 'C Programming', 'Engineering Mathematics-1', 'Engineering Physics', 'Engineering Graphics & Design', 'English Communication'],
'Semester-2': ['Digital Electronics & Logic Circuits', 'OOPs with Java', 'Engineering Mathematics-2', 'Data Structures using C', 'Modern Biology', 'Environmental Studies'],
'Semester-3': ['Problem Solving using Python', 'Data Science using Python Libraries', 'Computer Organization & Architecture', 'Probability & Statistics', 'Theory of Computation', 'Information Technology', 'Technical Writing'],
'Semester-4': ['Discrete Mathematics', 'Computer Networks', 'Database Management Systems', 'Operating Systems', 'Web Technologies', 'DevOps & Linux Administration', 'Organizational Behavior'],
'Semester-5': ['Artificial Intelligence', 'Algorithm Design and Analysis', 'Cloud Computing', 'Economics for Engineers', 'IoT (Internet of Things)', 'Compiler Design', 'Cyber Laws and Ethics', 'Cryptography & Network Security'],
'Semester-6': ['Machine Learning', 'Natural Language Processing', 'Deep Learning', 'Computer Vision and Image Processing', 'Blockchain Technology', 'Information Retrieval', 'Management Information Systems'],
'Semester-7': ['VLSI and Embedded Systems', 'Entrepreneurship & Startup', 'Financial Management', 'Robotic Access Automation', 'Marketing Management', 'Big-data Analytics', 'Decision Sciences'],
'Semester-8': ['Software Engineering'],
};

// Short codes for subjects
const subjectCodes: Record<string, string> = {
"Basic Electrical and Electronics": "bee",
"C Programming": "c",
"Engineering Mathematics-1": "em1",
"Engineering Physics": "ep",
"Engineering Graphics & Design": "egd",
"English Communication": "ec",
"Basics of Mechanical Engineering": "bme",
'Basic Electrical and Electronics': 'bee',
'C Programming': 'c',
'Engineering Mathematics-1': 'em1',
'Engineering Physics': 'ep',
'Engineering Graphics & Design': 'egd',
'English Communication': 'ec',
'Basics of Mechanical Engineering': 'bme',

"Digital Electronics & Logic Circuits": "delc",
"OOPs with Java": "oops",
"Engineering Mathematics-2": "em2",
"Data Structures using C": "dsc",
"Modern Biology": "mb",
"Environmental Studies": "es",
'Digital Electronics & Logic Circuits': 'delc',
'OOPs with Java': 'oops',
'Engineering Mathematics-2': 'em2',
'Data Structures using C': 'dsc',
'Modern Biology': 'mb',
'Environmental Studies': 'es',

"Problem Solving using Python": "py",
"Computer Organization & Architecture": "coa",
"Probability & Statistics": "ps",
"Theory of Computation": "toc",
"Information Technology": "it",
"Technical Writing": "tw",
'Problem Solving using Python': 'py',
'Computer Organization & Architecture': 'coa',
'Probability & Statistics': 'ps',
'Theory of Computation': 'toc',
'Information Technology': 'it',
'Technical Writing': 'tw',

"Computer Networks": "cn",
"Database Management Systems": "dbms",
"Operating Systems": "os",
"Web Technologies": "wt",
"DevOps & Linux Administration": "dops",
"Organizational Behavior": "ob",
"Discrete Mathematics": "dm",
'Computer Networks': 'cn',
'Database Management Systems': 'dbms',
'Operating Systems': 'os',
'Web Technologies': 'wt',
'DevOps & Linux Administration': 'dops',
'Organizational Behavior': 'ob',
'Discrete Mathematics': 'dm',

"Data Science using Python Libraries": "dsp",
"Artificial Intelligence": "ai",
"Algorithm Design and Analysis": "ada",
"Cloud Computing": "cc",
"Economics for Engineers": "ee",
"IoT (Internet of Things)": "iot",
"Compiler Design": "cd",
"Cyber Laws and Ethics": "cle",
"Cryptography & Network Security": "cns",
"Machine Learning": "ml",
"Natural Language Processing": "nlp",
"Deep Learning": "dl",
"Computer Vision and Image Processing": "cvip",
"Blockchain Technology": "bt",
"Information Retrieval": "ir",
"Management Information Systems": "mis",
"VLSI and Embedded Systems": "vlsi",
"Entrepreneurship & Startup": "es",
"Financial Management": "fm",
"Robotic Access Automation": "raa",
"Marketing Management": "mm",
"Big-data Analytics": "bda",
"Decision Sciences": "des",
"Software Engineering": "se",
'Data Science using Python Libraries': 'dsp',
'Artificial Intelligence': 'ai',
'Algorithm Design and Analysis': 'ada',
'Cloud Computing': 'cc',
'Economics for Engineers': 'ee',
'IoT (Internet of Things)': 'iot',
'Compiler Design': 'cd',
'Cyber Laws and Ethics': 'cle',
'Cryptography & Network Security': 'cns',
'Machine Learning': 'ml',
'Natural Language Processing': 'nlp',
'Deep Learning': 'dl',
'Computer Vision and Image Processing': 'cvip',
'Blockchain Technology': 'bt',
'Information Retrieval': 'ir',
'Management Information Systems': 'mis',
'VLSI and Embedded Systems': 'vlsi',
'Entrepreneurship & Startup': 'es',
'Financial Management': 'fm',
'Robotic Access Automation': 'raa',
'Marketing Management': 'mm',
'Big-data Analytics': 'bda',
'Decision Sciences': 'des',
'Software Engineering': 'se',
};

// Available subjects
const available = ["ep", "c", "em1", "em2", "oops", "dsc", "coa", "os", "ml", "dops", "cd", "cle", "ec", "dbms", "bme", "cns", "vlsi", "mb"];
const available = ['ep', 'c', 'em1', 'em2', 'oops', 'dsc', 'coa', 'os', 'ml', 'dops', 'cd', 'cle', 'ec', 'dbms', 'bme', 'cns', 'vlsi', 'mb'];

export default function SubjectsSection() {
return (
<section id="subjects" className="px-6 pb-12 md:pt-12 text-center scroll-mt-20">
<h2
className="text-7xl flex px-6 mb-0"
style={{ fontFamily: '"Road Rage", sans-serif' }}
>
Browse Subjects
</h2>
<p
className="mb-8 text-2xl flex px-6"
style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
>
Explore Subjects divided Semester-wise for your convenience.
</p>
<div
className="space-y-10 px-6 py-6 text-3xl flex flex-col"
style={{ fontFamily: "'Rockwell', 'Serif', serif" }}
>
{Object.entries(subjects).map(([semester, list]) => {
const semCode = semester.toLowerCase().replace("semester-", "sem");
return (
<div key={semester}>
<h3 className="text-3xl flex mb-4">{semester}</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{list.map((subj) => {
const code = subjectCodes[subj];
const href = `/${semCode}/${code}/ch0`;
const isAvailable = available.includes(code);
return (
<section id="subjects" className="px-6 pb-12 md:pt-12 text-center scroll-mt-20">
<h2 className="text-7xl flex px-6 mb-0" style={{ fontFamily: '"Road Rage", sans-serif' }}>
Browse Subjects
</h2>
<p className="mb-8 text-2xl flex px-6" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
Explore Subjects divided Semester-wise for your convenience.
</p>
<div className="space-y-10 px-6 py-6 text-3xl flex flex-col" style={{ fontFamily: "'Rockwell', 'Serif', serif" }}>
{Object.entries(subjects).map(([semester, list]) => {
const semCode = semester.toLowerCase().replace('semester-', 'sem');
return (
<div key={semester}>
<h3 className="text-3xl flex mb-4">{semester}</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{list.map((subj) => {
const code = subjectCodes[subj];
const href = `/${semCode}/${code}/ch0`;
const isAvailable = available.includes(code);

const baseClass =
"relative bg-[#d2b48c] text-[#2b1b0e] flex items-center justify-center font-medium py-4 px-6 shadow-md";
const baseClass = 'relative bg-[#d2b48c] text-[#2b1b0e] flex items-center justify-center font-medium py-4 px-6 shadow-md';

return isAvailable ? (
<Link
key={subj}
href={href}
className={`${baseClass} hover:scale-[98%]`}
>
{subj}
</Link>
) : (
<div
key={subj}
className={`${baseClass} opacity-50 cursor-not-allowed`}
>
{subj}
<span className="absolute bottom-1 right-1 text-xs bg-[#2b1b0e] text-white px-2 py-0.5 rounded">
Coming Soon
</span>
</div>
);
return isAvailable ? (
<Link key={subj} href={href} className={`${baseClass} transition-all duration-200 ease-in-out hover:-translate-y-1 hover:scale-[1.02] hover:shadow-[0_2px_24px_rgba(210,180,140,0.5)]`}>
{subj}
</Link>
) : (
<div key={subj} className={`${baseClass} opacity-50 cursor-not-allowed transition-all duration-200 ease-in-out hover:-translate-y-0.5 hover:shadow-[0_2px_24px_rgba(210,180,140,0.5)]`}>
{subj}
<span className="absolute bottom-1 right-1 text-xs bg-[#2b1b0e] text-white px-2 py-0.5 rounded">Coming Soon</span>
</div>
);
})}
</div>
</div>
);
})}
</div>
</div>
);
})}
</div>

</section>
);
</section>
);
}