Styled Dashboard component

CONTRIBUTING.md

@@ -60,7 +60,7 @@ We welcome all types of contributions! Here are some ways you can help:
 ### 🔧 Frontend Development
 
 - **React Components**: Build new UI components or improve existing ones
-- **Styling**: Enhance CSS, animations, and responsive design
+- **Styling**: Enhanced UI, improved responsiveness using tailwindcss or animations using framer motion
 - **User Experience**: Improve navigation, accessibility, and usability
 - **Performance**: Optimize bundle size, loading times, and rendering
 
@@ -220,6 +220,9 @@ function myComponent(props) {
 }
 ```
 
+<<<<<<< HEAD
+### 🎨 **CSS Guidelines**
+=======
 ### CSS & Styling Guidelines
 
 **We use Tailwind CSS for styling in this project!** 🎨
@@ -256,9 +259,43 @@ const BadComponent = () => {
 ```
 
 #### Custom CSS (when needed)
+>>>>>>> upstream/main
 
+> ⚠️ We **strictly use TailwindCSS** for all styling — no other external CSS frameworks or raw css (unless asked or needed).  
+> The goal is to **ship fast**, **keep it consistent**, and **avoid redundancy** in code.
+```javascript
+---
+
+/* ✅ Good Practice  */
+
+/*Reduce Class Redundancy*/
+/*Use shared Tailwind utility classes or component-level wrappers to avoid repeating the same styles across multiple elements.*/
+const MyComponent = () => {
+  return (
+    <div className="common-tailwind-class">
+      <h1>{title}</h1>
+      <button>Count: {count}</button>
+    </div>
+  );
+};
+
+
+/* ❌ Bad  */
+
+/*Avoid applying the same Tailwind classes repeatedly to multiple child elements.*/
+/*This causes verbosity and makes future style updates harder.*/
+
+const MyComponent = () => {
+  return (
+    <div>
+      <h1 className="some-font">{title}</h1>
+      <button className="some-font">Count: {count}</button>
+    </div>
+  );
+};
+```
 ```css
-/* ✅ Good - Use CSS custom properties and consistent naming */
+/*Avoid using raw css until and unless you don't have other options */
 .landing-page {
   background: linear-gradient(135deg, rgb(28, 28, 64) 0%, rgb(20, 20, 48) 100%);
   color: rgb(160, 160, 255);
@@ -270,16 +307,6 @@ const BadComponent = () => {
   font-weight: 600;
   margin-bottom: 1rem;
 }
-
-/* ❌ Bad - Inconsistent naming and hard-coded colors */
-.page {
-  background: #1c1c40;
-  color: #a0a0ff;
-}
-
-.title1 {
-  font-size: 32px;
-}
 ```
 
 #### Styling Guidelines Summary

README.md

@@ -106,26 +106,37 @@ docker compose up
 
 ```
 src/
-├── components/          # Reusable UI components
-│   ├── TopBar.jsx      # Navigation header
-│   └── TopBar.css      # TopBar styling
-├── pages/              # Page components
-│   ├── LandingPage.jsx # Main landing page
-│   ├── LandingPage.css # Landing page styles
-│   ├── LoginPage.jsx   # User authentication
-│   ├── RegisterPage.jsx# User registration
-│   └── AuthPages.css   # Auth pages styling
-├── routes/             # Route protection
+├── components/                      # Reusable UI components
+│   ├── TopBar.jsx                   # Navigation header
+│   ├── TopBar.css                   # TopBar styling
+│   ├── Footer.jsx                   # Footer section
+│   ├── animations/                  # Animations present on site
+│   │     ├── HeroAnimation.jsx      # Animation related to hero section
+│   │     └── animation.css          # custom animation
+│   └── ui/                          # Animations present on site
+│        ├── About.jsx               # About ui component
+│        ├── Community.jsx           # Community ui component
+│        ├── Hero.jsx                # Hero ui component
+│        ├── InfoCard.jsx            # InfoCard ui component
+│        └── Terminal.jsx            # Terminal animation ui component
+│
+├── pages/                           # Page components
+│   ├── LandingPage.jsx              # Main landing page
+│   ├── AboutPage.jsx                # About page 
+│   ├── LoginPage.jsx                # User authentication
+│   ├── RegisterPage.jsx             # User registration
+│   └── AuthPages.css                # Auth pages styling
+├── routes/                          # Route protection
 │   ├── ProtectedRoute.jsx
 │   └── PublicRoute.jsx
-├── context/            # React Context
-│   └── MyContext.jsx   # Global state management
-├── api/                # API integration
-│   ├── api.config.js   # Axios configuration
+├── context/                         # React Context
+│   └── MyContext.jsx                # Global state management
+├── api/                             # API integration
+│   ├── api.config.js                # Axios configuration
 │   ├── api.intercepter.js
-│   └── auth/           # Authentication APIs
-├── utils/              # Utility functions
-└── assets/             # Static assets
+│   └── auth/                        # Authentication APIs
+├── utils/                           # Utility functions
+└── assets/                          # Static assets
 ```
 
 ## 🎭 Features Showcase

src/components/ui/BlogCard.jsx

@@ -0,0 +1,77 @@
+import { motion } from "framer-motion";
+import { FiHeart, FiEdit2, FiTrash2 } from "react-icons/fi";
+import { TbMoodSadSquint } from "react-icons/tb";
+
+function BlogCard({ title, likes, abstract, image, likedByUser, createdByUser, onEdit, onDelete }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      whileHover={{ scale: 1.02, x: 5 }}
+      className="bg-slate-900 rounded-lg border border-slate-700 hover:border-[rgb(0,255,0)] transition-all overflow-hidden"
+    >
+      <div className="w-full h-40 sm:h-48 bg-slate-800 overflow-hidden relative">
+        {image ? (
+          <img 
+            src={image} 
+            alt={title}
+            className="w-full h-full object-cover opacity-80 hover:opacity-100 transition-opacity"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900">
+            <div className="text-center">
+              <TbMoodSadSquint className="text-slate-600 mx-auto mb-2" size={60} />
+              <span className="font-google-code text-slate-600 text-xs">No Image</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Content Section */}
+      <div className="p-4 sm:p-6">
+        <h3 className="font-google-code font-bold text-[rgb(0,255,0)] text-lg sm:text-xl mb-3 line-clamp-2">
+          {title}
+        </h3>
+
+        <p className="font-google-code text-slate-400 text-xs sm:text-sm mb-4 line-clamp-3">
+          {abstract}
+        </p>
+
+        <div className="flex items-center justify-between pt-3 border-t border-slate-700">
+          {/*footer of card */}
+          <div className="flex items-center gap-2">
+            <FiHeart 
+              size={18} 
+              className={likedByUser ? "fill-[rgb(0,255,0)] text-[rgb(0,255,0)]" : "text-slate-500"}
+            />
+            <span className="font-google-code text-slate-300 text-sm">
+              {likes}
+            </span>
+          </div>
+
+          {/*if post is created by user, give them action buttons */}
+          {createdByUser && (
+            <div className="flex items-center gap-2">
+              <button
+                onClick={onEdit}
+                className="p-2 text-[rgb(0,170,255)] hover:bg-slate-800 rounded transition-colors"
+                aria-label="Edit post"
+              >
+                <FiEdit2 size={16} />
+              </button>
+              <button
+                onClick={onDelete}
+                className="p-2 text-red-400 hover:bg-slate-800 rounded transition-colors"
+                aria-label="Delete post"
+              >
+                <FiTrash2 size={16} />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+export default BlogCard;