Merge pull request #8 from ComputerSocietyVITC/sinchan

header,partial homepage
ComputerSocietyVITC · Jun 5, 2024 · 2644205 · 2644205
2 parents bb4f532 + 50c7819
commit 2644205
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "homepage": "https://beta.ieeecsvitc.com",
   "dependencies": {
     "@fontsource/raleway": "^5.0.19",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -1,44 +1,71 @@
 import React from 'react';
 import logo from '../ICON.png'; // Adjust the path to your image
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 const Header = ({ type }) => {
   return (
     <header className={`w-full bg-gradient-to-b from-black to-slate-950 text-white p-4 shadow-md ${type ? "fixed top-0 left-0 z-50" : ""}`}>
-      <div className="container mx-auto flex justify-between items-center">
-        <img src={logo} alt="IEEE Logo" className="absolute h-12 w-12" />
+      <div className="px-10 py-4 px-7 flex justify-between items-center relative">
+        <img src={logo} alt="IEEE Logo" className=" absolute h-12 w-12" />
         <nav className="flex-1">
-          <ul className="flex justify-center space-x-20 my-2 font-normal text-lg">
+          <ul className="flex justify-end space-x-16 text-slate-500 my-2 font-bold font-montserrat text-xl ">
             <li>
-              <Link
+              <NavLink
                 to="/"
-                className="custom-underline"
+                className="custom-underline hover:text-white  "
+                activeClassName="link-activee"
+
               >
                 Home
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 to='/events'
-                className="custom-underline"
+                className="custom-underline hover:text-white "
+                activeClassName="link-activee"
+
+              >
+                Team
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to='/events'
+                className="custom-underline hover:text-white"
+                activeClassName="link-activee"
+
               >
                 Events
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 to="/projects"
-                className="custom-underline"
+                className="custom-underline hover:text-white "
+                activeClassName="link-activee"
+
               >
                 Projects
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink exact
                 to="/gallery"
-                className="custom-underline"
+                className="custom-underline hover:text-white"
+                activeClassName="link-activee"
               >
                 Gallery
-              </Link>
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to="/gallery"
+                className="custom-underline hover:text-white"
+                activeClassName="link-activee"
+
+              >
+                Blogs
+              </NavLink>
             </li>
           </ul>
         </nav>
@@ -48,3 +75,4 @@ const Header = ({ type }) => {
 };
 
 export default Header;
+
diff --git a/src/index.css b/src/index.css
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
+
 /* Hide scrollbars in WebKit-based browsers (Chrome, Safari) */
 ::-webkit-scrollbar {
   display: none;
@@ -75,3 +76,6 @@ div {
   bottom: -2px; /* Adjust the distance from the text */
   left: 0;
 }
+.link-activee {
+  color: white;
+}
diff --git a/src/pages/homepage.jsx b/src/pages/homepage.jsx
@@ -1,38 +1,22 @@
 import React from "react";
-import image1 from '../1-min.jpeg'; // Adjust the path
-import image2 from '../2-min.jpeg'; // Adjust the path
-import image4 from '../3-min.jpeg'; // Adjust the path
+
 
 const Homepage = () => {
     return (
         <>
-            <div className="min-h-screen bg-slate-950 text-white">
-                <div className="container mx-auto grid grid-cols-1 md:grid-cols-2 items-center justify-center min-h-screen px-12">
-                    <div className="ml-24 md:col-span-1 flex justify-center md:justify-center mb-8 md:mb-0">
-                        <h1 className="text-7xl font-bold leading-tight text-left">
+            <div className="min-h-screen bg-slate-950 ">
+                <div className="container mx-auto grid grid-cols-1 items-center justify-center min-h-screen ">
+
+                        <h1 className="text-7xl font-bold leading-tight text-center text-emerald-400">
                             We are The<br />
-                            IEEE Computer<br />
-                            Society<br />
+                            IEEE Computer Society<br />
                             VIT Chennai..
                         </h1>
-                    </div>
-                    <div className="md:col-span-1 flex justify-center items-center mr-24">
-                        <div className="relative w-full max-w-lg flex justify-center items-center">
-                            <img src={image4} alt="Main Event" className="w-80 h-80 rounded-full object-cover" />
-                            <div className="absolute border-4 border-green-400 rounded-full" style={{ width: 'calc(16rem + 200px)', height: 'calc(16rem + 200px)' }}></div>
-                            <div className="absolute border-2 border-gray-500 rounded-full" style={{ width: 'calc(18rem + 240px)', height: 'calc(18rem + 240px)' }}></div>
-                            <div className="absolute border-2 border-gray-700 rounded-full" style={{ width: 'calc(20rem + 280px)', height: 'calc(20rem + 280px)' }}></div>
-                            <div className="absolute w-20 h-20 rounded-full flex items-center justify-center" style={{ top: '-100px', left: '50%', transform: 'translateX(-50%)' }}>
-                                <img src={image1} alt="Event 1" className="w-full h-full rounded-full object-cover" />
-                            </div>
-                            <div className="absolute w-20 h-20 rounded-full flex items-center justify-center" style={{ top: '50%', right: '-55px', transform: 'translateY(-50%)' }}>
-                                <img src={image2} alt="Event 2" className="w-full h-full rounded-full object-cover" />
-                            </div>
-                            <div className="absolute w-20 h-20 rounded-full flex items-center justify-center" style={{ top: '50%', left: '-55px', transform: 'translateY(-50%)' }}>
-                                <img src={image4} alt="Event 4" className="w-full h-full rounded-full object-cover" />
-                            </div>
-                        </div>
-                    </div>
+
+                </div>
+                <div className=' flex flex-col justify-center items-center w-[80%] m-auto gap-y-6'>
+                    <p className='text-white text-montserrat font-thin text-[40px] max-[1px] tracking-[-0.025em] p-8 leading-25'>DISCOVER | DEVELOP | DEPLOY</p>
+                    <button className='border border-2 border-solid border-teal-500 p-3 rounded-full bg-gradient-to-r from-b_col1  to-b_col2 ' ><p className='text-teal-500 text-montserrat font-light text-lg'>Gateway to Tech &#x25BC;</p></button>
                 </div>
             </div>
         </>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,8 +7,15 @@ module.exports = {
     extend: {
       fontFamily: {
         raleway: ['Raleway', 'sans-serif'],
+        'montserrat': ['Montserrat']
+      },
+      colors: {
+        b_col1: '#123838',
+        b_col2: '#0C2B38',
+
       },
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/line-clamp'),
+],
 }