Merge pull request #13 from ComputerSocietyVITC/sinchan

Sinchan

package.json

@@ -14,6 +14,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-id-swiper": "^4.0.0",
     "react-photo-album": "^2.4.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.11",

src/components/Accordian/imageAccordian.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { useState } from "react";
+import "./style.css";
+
+const items = [
+    {
+        header: "ABOUT US",
+        header2: "ABOUT US",
+    },
+
+    {
+        header: "OUR VISION",
+        header2: "OUR VISION",
+    },
+
+    {
+        header: "NEWSLETTER",
+        header2: "NEWSLETTER",
+    },
+    {
+        header: "CONTACT",
+        header2: "CONTACT",
+    },
+]; 
+
+const ImageAccordian = () => {
+    const [active, setActive] = useState(0);
+
+    const handleToggle = (index) => setActive(index);
+    return (
+    <>
+        <div className="image-accordion">
+            {items.map((item, index) => {
+            const isActive = active === index ? "active" : "";
+            return (
+                <div className='rounded-[20px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[456px]'>
+                <div
+                key={item.header}
+                className={`image-accordion-item ${isActive}`}
+                onClick={() => handleToggle(index)}
+                >
+
+                <div className="content">
+                    <h2>{item.header2}</h2>
+                </div>
+                </div>
+                </div>
+            );
+            })}
+        </div>
+    </>
+    );
+}
+
+export default ImageAccordian

src/components/Accordian/style.css

@@ -0,0 +1,55 @@
+.image-accordion {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+    font-family: 'montserrat';
+}
+
+.image-accordion-item {
+    position: relative;
+    overflow: hidden;
+    width: 120px;
+    height: 450px;
+    border-radius: 20px;
+    display: flex;
+    align-items: flex-end;
+    background: linear-gradient(to bottom,#061b24, #072031,#061b24);
+    opacity: 1;
+    transition: 1s;
+}
+.image-accordion :is(h2) {
+    margin: 0;
+}
+
+.image-accordion-item h2 {
+    font-size: 28px;
+    font-weight: 700;
+    color: #6CEDFF;
+}
+
+.image-accordion-item.active {
+    width: 240px;
+    opacity: 1;
+}
+
+.image-accordion-item .content {
+    position: absolute;
+    width: auto;
+    top:40%;
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    padding: 20px 20px 20px 20px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    transition: 0.5s;
+  }
+
+  .image-accordion-item.active .content {
+    opacity: 1;
+    visibility: visible;
+  }

src/components/header.jsx

@@ -3,9 +3,8 @@ import logo from '../ICON.png'; // Adjust the path to your image
 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 `}>
-      <div className="px-10 py-4 px-7 flex justify-between items-center relative">
-
+    <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="px-10 py-4 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-end space-x-16 text-slate-500 my-2 font-bold font-montserrat text-xl ">

src/pages/homepage.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ImageAccordian from '../components/Accordian/imageAccordian'
 import Footer from "../components/footer";
 
 
@@ -16,8 +17,19 @@ const Homepage = () => {
 
                 </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>
+                    <p className='text-white text-montserrat font-light text-[50px] max-[1px] tracking-[-0.025em] p-8 leading-25'>DISCOVER | DEVELOP | DEPLOY</p>
+                    <button className=' border-2 border-solid border-teal-500 p-4 rounded-full bg-gradient-to-r from-b_col1  to-b_col2 ' ><p className='text-teal-500 text-montserrat font-light text-2xl'>Gateway to Tech &#x25BC;</p></button>
+                </div>
+                <div className='mt-[15%] pb-16 flex justify-center gap-[13%]'>
+                    <ImageAccordian/>
+                    <div className='rounded-[36px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[555px] w-[430px] shadow-2xl shadow-[#7ac4ec]/30'>
+                        <div className='rounded-[calc(36px-1px)] p-12 bg-gradient-to-b  from-[#061b24] from-2% via-[#072031] to-[#000b11] to-9% h-[549px] flex flex-col justify-evenly text-center'>
+
+                                <h2 className="text-6xl font-light text-teal-500">Hello</h2>
+                                <p className='text-xl text-b_col3'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam beatae placeat architecto fugiat similique esse a optio accusamus, nisi distinctio repellat aut! Inventore excepturi laudantium numquam consequatur culpa quibusdam a!</p>
+
+                        </div>
+                    </div>
                 </div>
             </div>
             <Footer />

tailwind.config.js

@@ -12,6 +12,8 @@ module.exports = {
       colors: {
         b_col1: '#123838',
         b_col2: '#0C2B38',
+        b_col3: '#6CEDFF',
+        b_col4: '#055A98',
 
       },
     },