feat: initial frontend build for RIT Freshers Hub

src/pages/Notes/Notes.tsx

@@ -0,0 +1,212 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Search, Download, Filter, BookOpen, FileText, ScrollText, BookMarked, ChevronRight } from 'lucide-react';
+import SectionTitle from '@/components/SectionTitle/SectionTitle';
+import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
+import { TOOLKIT_ITEMS, DEPARTMENTS } from '@/constants';
+
+const SEMESTERS = ['All', '1st Sem', '2nd Sem', '3rd Sem', '4th Sem', '5th Sem', '6th Sem', '7th Sem', '8th Sem'];
+
+const TYPE_COLORS: Record<string, { bg: string; text: string; icon: React.ComponentType<{ className?: string }> }> = {
+  notes: { bg: '#EFF6FF', text: '#3B82F6', icon: BookOpen },
+  pyq: { bg: '#FFF7ED', text: '#F97316', icon: FileText },
+  syllabus: { bg: '#ECFDF5', text: '#10B981', icon: ScrollText },
+  assignment: { bg: '#FDF2F8', text: '#EC4899', icon: BookMarked },
+};
+
+const NOTES_DATA = [
+  { id: '1', title: 'Engineering Mathematics – Unit 1-5', subject: 'Mathematics', department: 'Computer Science & Engineering', semester: 1, type: 'notes', downloads: 348, fileSize: '4.2 MB', uploadedAt: '2025-06-01' },
+  { id: '2', title: 'Physics PYQ 2020-2024', subject: 'Physics', department: 'Computer Science & Engineering', semester: 1, type: 'pyq', downloads: 512, fileSize: '8.1 MB', uploadedAt: '2025-06-10' },
+  { id: '3', title: 'C Programming Complete Notes', subject: 'Programming', department: 'Computer Science & Engineering', semester: 1, type: 'notes', downloads: 734, fileSize: '6.3 MB', uploadedAt: '2025-06-15' },
+  { id: '4', title: 'Data Structures PYQ 2019-2024', subject: 'Data Structures', department: 'Computer Science & Engineering', semester: 3, type: 'pyq', downloads: 621, fileSize: '10.2 MB', uploadedAt: '2025-07-01' },
+  { id: '5', title: 'Circuit Theory Full Notes', subject: 'Circuit Theory', department: 'Electronics & Communication', semester: 2, type: 'notes', downloads: 289, fileSize: '5.7 MB', uploadedAt: '2025-06-20' },
+  { id: '6', title: 'Anna University Syllabus 2021', subject: 'Syllabus', department: 'All Departments', semester: 1, type: 'syllabus', downloads: 890, fileSize: '2.1 MB', uploadedAt: '2025-05-01' },
+  { id: '7', title: 'Thermodynamics Notes', subject: 'Thermodynamics', department: 'Mechanical Engineering', semester: 3, type: 'notes', downloads: 201, fileSize: '3.9 MB', uploadedAt: '2025-06-25' },
+  { id: '8', title: 'Digital Electronics PYQ', subject: 'Digital Electronics', department: 'Electronics & Communication', semester: 4, type: 'pyq', downloads: 445, fileSize: '7.3 MB', uploadedAt: '2025-07-05' },
+];
+
+export default function Notes() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSem, setSelectedSem] = useState('All');
+  const [selectedDept, setSelectedDept] = useState('All Departments');
+  const [selectedType, setSelectedType] = useState('all');
+
+  const filtered = NOTES_DATA.filter((note) => {
+    const matchSearch = note.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      note.subject.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchSem = selectedSem === 'All' || note.semester === parseInt(selectedSem);
+    const matchDept = selectedDept === 'All Departments' || note.department === selectedDept || note.department === 'All Departments';
+    const matchType = selectedType === 'all' || note.type === selectedType;
+    return matchSearch && matchSem && matchDept && matchType;
+  });
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: '#FAFAFA' }}>
+      {/* Header */}
+      <div className="bg-white border-b border-[#E5E7EB] py-10">
+        <div className="container-custom">
+          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
+            <div className="flex items-center gap-2 text-xs text-[#94A3B8] mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
+              <span>Home</span>
+              <ChevronRight className="w-3 h-3" />
+              <span className="text-[#F97316]">Notes & PYQs</span>
+            </div>
+            <h1 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-2" style={{ fontFamily: 'Playfair Display, serif' }}>
+              Notes &{' '}
+              <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
+                PYQs
+              </span>
+            </h1>
+            <p className="text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>
+              Access semester-wise notes, previous year question papers, and study materials.
+            </p>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="container-custom py-10">
+        {/* Search + Filters */}
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.4, delay: 0.1 }}
+          className="bg-white rounded-2xl border border-[#E5E7EB] p-5 mb-8"
+          style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
+        >
+          {/* Search */}
+          <div className="relative mb-4">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-[#94A3B8]" />
+            <input
+              type="text"
+              placeholder="Search notes, subjects..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-11 pr-4 py-3 rounded-xl border border-[#E5E7EB] text-sm text-[#1E293B] placeholder-[#94A3B8] focus:outline-none focus:border-[#F97316] transition-colors"
+              style={{ fontFamily: 'Inter, sans-serif' }}
+            />
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            {/* Type Filter */}
+            <div className="flex items-center gap-2 flex-wrap">
+              <Filter className="w-4 h-4 text-[#94A3B8]" />
+              {['all', 'notes', 'pyq', 'syllabus'].map((type) => (
+                <button
+                  key={type}
+                  onClick={() => setSelectedType(type)}
+                  className="px-3 py-1.5 rounded-lg text-xs font-medium capitalize transition-all"
+                  style={{
+                    fontFamily: 'Poppins, sans-serif',
+                    backgroundColor: selectedType === type ? '#F97316' : '#F8FAFC',
+                    color: selectedType === type ? 'white' : '#475569',
+                    border: `1px solid ${selectedType === type ? '#F97316' : '#E5E7EB'}`,
+                  }}
+                >
+                  {type === 'all' ? 'All Types' : type.toUpperCase()}
+                </button>
+              ))}
+            </div>
+
+            {/* Semester Filter */}
+            <div className="flex gap-2 flex-wrap">
+              {SEMESTERS.slice(0, 5).map((sem) => (
+                <button
+                  key={sem}
+                  onClick={() => setSelectedSem(sem)}
+                  className="px-3 py-1.5 rounded-lg text-xs font-medium transition-all"
+                  style={{
+                    fontFamily: 'Poppins, sans-serif',
+                    backgroundColor: selectedSem === sem ? '#1E293B' : '#F8FAFC',
+                    color: selectedSem === sem ? 'white' : '#475569',
+                    border: `1px solid ${selectedSem === sem ? '#1E293B' : '#E5E7EB'}`,
+                  }}
+                >
+                  {sem}
+                </button>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+
+        {/* Results */}
+        <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-12">
+          {filtered.map((note) => {
+            const typeConfig = TYPE_COLORS[note.type];
+            const TypeIcon = typeConfig.icon;
+            return (
+              <StaggerItem key={note.id}>
+                <motion.div
+                  whileHover={{ y: -4 }}
+                  className="bg-white rounded-2xl border border-[#E5E7EB] p-5 flex flex-col gap-3"
+                  style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style={{ backgroundColor: typeConfig.bg }}>
+                      <TypeIcon className="w-5 h-5" style={{ color: typeConfig.text } as React.CSSProperties} />
+                    </div>
+                    <span
+                      className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase"
+                      style={{ backgroundColor: typeConfig.bg, color: typeConfig.text, fontFamily: 'Poppins, sans-serif' }}
+                    >
+                      {note.type}
+                    </span>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-semibold text-[#1E293B] leading-snug mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                      {note.title}
+                    </h3>
+                    <p className="text-xs text-[#94A3B8]" style={{ fontFamily: 'Inter, sans-serif' }}>
+                      {note.subject} · Sem {note.semester}
+                    </p>
+                  </div>
+                  <div className="flex items-center justify-between text-xs text-[#94A3B8] pt-2 border-t border-[#E5E7EB]">
+                    <span style={{ fontFamily: 'Inter, sans-serif' }}>{note.downloads} downloads · {note.fileSize}</span>
+                  </div>
+                  <motion.button
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.97 }}
+                    className="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-sm font-semibold text-white"
+                    style={{
+                      fontFamily: 'Poppins, sans-serif',
+                      background: 'linear-gradient(135deg, #F97316, #FB923C)',
+                    }}
+                  >
+                    <Download className="w-4 h-4" />
+                    Download
+                  </motion.button>
+                </motion.div>
+              </StaggerItem>
+            );
+          })}
+        </StaggerContainer>
+
+        {/* Toolkit Section */}
+        <SectionTitle tag="Useful Downloads" title="Student" highlight="Toolkit" align="left" />
+        <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {TOOLKIT_ITEMS.map((item) => (
+            <StaggerItem key={item.id}>
+              <motion.a
+                href={item.url}
+                whileHover={{ y: -3 }}
+                className="flex items-center gap-4 p-4 bg-white rounded-2xl border border-[#E5E7EB] cursor-pointer group"
+                style={{ boxShadow: '0 2px 15px -3px rgba(0,0,0,0.07)' }}
+              >
+                <div className="w-10 h-10 rounded-xl flex items-center justify-center bg-[#FFF7ED] shrink-0">
+                  <Download className="w-4.5 h-4.5 text-[#F97316]" />
+                </div>
+                <div>
+                  <div className="text-sm font-semibold text-[#1E293B] group-hover:text-[#F97316] transition-colors" style={{ fontFamily: 'Poppins, sans-serif' }}>
+                    {item.title}
+                  </div>
+                  <div className="text-xs text-[#94A3B8]" style={{ fontFamily: 'Inter, sans-serif' }}>
+                    {item.description}
+                  </div>
+                </div>
+              </motion.a>
+            </StaggerItem>
+          ))}
+        </StaggerContainer>
+      </div>
+    </div>
+  );
+}