Merge pull request #20 from ComputerSocietyVITC/samShervin

made the root html bg black, footer fix, header fix --main, splash sc…
ComputerSocietyVITC · Jun 17, 2024 · 75d0ddd · 75d0ddd
2 parents 7cf64aa + 3be786a
commit 75d0ddd
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 58 deletions.
diff --git a/public/index.html b/public/index.html
@@ -29,7 +29,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body class="bg-black">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

diff --git a/src/assets/polkabg.png b/src/assets/polkabg.png
diff --git a/src/components/Accordian/imageAccordian.jsx b/src/components/Accordian/imageAccordian.jsx
@@ -13,16 +13,16 @@ const ImageAccordian = ({ itemms, setActiveItem }) => {
             {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 className='rounded-[20px] p-0.5 bg-gradient-to-b from-b_col3 to-b_col4 h-[456px] text-center'>
                 <div
                 key={item.header}
                 className={`image-accordion-item ${isActive}`}
                 onClick={() => handleToggle(index)}
                 >
-                <h2 className='out_content -rotate-90'>{item.header}</h2>
-                <div className="content">
+                <h2 className='out_content -rotate-90 flex'>{item.header}</h2>
+                <div className="content text-center">
 
-                    <h2>{item.header2}</h2>
+                    <h2>{item.header}</h2>
                 </div>
                 </div>
                 </div>

diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -11,8 +11,9 @@ import devto from "../assets/socialmedia/devto.png";
 import { Link } from "react-router-dom";
 
 const Footer = () => {
-	return (
-		<div className="bg-slate-950 relative z-0 p-12 border-t-2">
+	return (<>
+		<div className="w-[90vw] border mx-auto"></div>
+		<div className="bg-transparent relative z-0 p-16 scale-90">
 			<footer className="font-montserrat">
 				<div className="text-gray-800 flex flex-wrap lg:flex-nowrap items-stretch">
 
@@ -97,7 +98,7 @@ const Footer = () => {
 							Social Media
 						</div>
 						<div>
-						<div className="grid grid-cols-4 plac e-items-center">
+						<div className="grid grid-cols-4 place-items-center">
 							<div>
 								<a
 									href="https://www.instagram.com/compsoc.vitcc/"
@@ -207,7 +208,7 @@ const Footer = () => {
 					</div>
 				</div>
 			</footer>
-		</div>
+		</div></>
 	);
 };
 

diff --git a/src/components/header.jsx b/src/components/header.jsx
@@ -3,11 +3,11 @@ 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 text-white p-4  bg-slate-950`}>
-      <div className="px-10 py-4 flex justify-between items-center relative ">
+    <header className="w-full text-white p-1 bg-transparent absolute">
+      <div className="px-10 py-4 mt-2 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 ">
+          <ul className="flex justify-end space-x-16 text-slate-500 my-1 font-bold font-montserrat text-xl ">
             <li>
               <NavLink
                 to="/"

diff --git a/src/components/ui/splashscreen.jsx b/src/components/ui/splashscreen.jsx
@@ -15,25 +15,14 @@ const SplashScreen = () => {
         <motion.div
           initial={{ opacity: 1 }}
           animate={{ opacity: 0 }}
-          transition={{ duration: 0.5, delay: 3 }}
-          style={{
-            backgroundColor: 'black',
-            width: '100vw',
-            height: '100vh',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            zIndex: 100
-          }}
+          transition={{ duration: 1, delay: 3 }}
+          className='absolute flex bg-black h-screen w-screen justify-center z-[100]'
           onAnimationComplete={onAnimationComplete} // Call onAnimationComplete when animation completes
         >
           <motion.img
             src={icon}
             alt="Icon"
-            style={{ width: '25%', height: 'auto' }}
+            className="self-center ml-36 scale-125"
           />
         </motion.div>
       )}

diff --git a/src/index.css b/src/index.css
@@ -87,17 +87,9 @@ div {
   margin: 0 auto;
 }
 
-.swiper-container {
-  height: 36rem;
-  padding: 2rem 0;
-  position: relative;
-}
 
-.swiper-slide {
-  width: 28rem;
-  height: 36rem;
-  position: relative;
-}
+
+
 
 .swiper-slide img {
   max-width: 600px;
@@ -157,9 +149,6 @@ div {
   object-fit: cover;
 }
 
-.gradient {
-    background: linear-gradient(to bottom, #0E1C31, #040414);
-}
 
 .img-hover:hover .img1 {
   transform: rotate(0deg);

diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import App from './App';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <section className='bg-gradient-to-t from-[#040414] to-[#0E1C31]'>
+    <App /></section>
   </React.StrictMode>
 );
diff --git a/src/pages/blogs.jsx b/src/pages/blogs.jsx
@@ -7,7 +7,7 @@ const Blogs = () => {
 
     return (
         <>
-            <div className={"min-h-screen gradient flex flex-col items-center"}>
+            <div className="min-h-screen flex flex-col items-center scale-80 py-36">
                 <div className="text-white text-9xl font-bold text-center pb-16">Blogs</div>
 
                 <div className="w-full max-w-6xl mb-16">

diff --git a/src/pages/homedata.js b/src/pages/homedata.js
@@ -1,24 +1,20 @@
 const items = [
     {
         header: "ABOUT US",
-        header2: "ABOUT US",
         content3: "this is about us.",
     },
 
     {
         header: "OUR VISION",
-        header2: "OUR VISION",
         content3: "this is our vision.",
     },
 
     {
         header: "NEWSLETTER",
-        header2: "NEWSLETTER",
         content3: "this is Newsssss.",
     },
     {
         header: "CONTACT",
-        header2: "CONTACT",
         content3: "contact details in the footer.",
     },
 ];

diff --git a/src/pages/homepage.jsx b/src/pages/homepage.jsx
@@ -2,34 +2,39 @@ import React,{useState} from "react";
 import ImageAccordian from '../components/Accordian/imageAccordian'
 import Footer from "../components/footer";
 import items from './homedata'
-import AnimeGif from '../data/AnimeGif'
+import {useRef} from 'react';
 const Homepage = () => {
     const [activeItem, setActiveItem] = useState(items[0]);
+    const ref = useRef(null);
+    const handleClick = () => {
+    ref.current?.scrollIntoView({behavior: 'smooth'});
+  };
     return (
         <>
-            <div className="min-h-screen gradient">
+            <div>
                 <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">
+                        <h1 className="text-7xl font-bold leading-tight text-center text-[#7DFEF7]">
                             We are The<br />
                             IEEE Computer Society<br />
                             VIT Chennai..
                         </h1>
 
                 </div>  
-                <div className=' flex flex-col justify-center items-center w-[80%] m-auto gap-y-6'>
+                <div className='min-h-screen flex flex-col justify-center items-center w-[80%] m-auto gap-y-6'>
                     <p className='text-white text-montserrat font-light text-[45px] 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>
+                    <button onClick={handleClick} 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 font-light text-2xl'>Gateway to Tech &#x25BC;</p>
+                    </button>
                 </div>
-                <div className='h-[900px] pt-[12%]'>   {/*mt-[15%] pb-32 */}
+                <div ref={ref} className='min-h-screen h-[900px] pt-[12%]'>   {/*mt-[15%] pb-32 */}
                     <div className='flex justify-center gap-[10%]'>
                         <ImageAccordian itemms={items} setActiveItem={setActiveItem}/>
                         <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)]  bg-gradient-to-b  from-[#061b24] from-2% via-[#072031] to-[#000b11] to-9% h-[549px] relative' >
 
                                 <div className='absolute -right-[100px] -bottom-14 z-15'>
-                            <AnimeGif  src='https://s3-alpha-sig.figma.com/img/bcc3/97cf/bf818f6c77769aec7e4706340f467fe1?Expires=1718582400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=BX6ZV8Fw0c8aQ7E--NMP-HYMGaGwHjWAAsW6CN5v~WXiE5E0Rh8GY60UbrUuA-xs4PL58el1s-HC8h4FdP5xPRExWq-8y60I~R1Qq2dsA8OYVrBa4HQqVR6aQLmzyfDhV8TAt1ZgtaIBnJt3ftyaCny6ceMqzS-3LOtw-jN5ZKKsZkZ~gJPjxX35AjGmumFIGewTT4bA0EJHvFRfeJXyfmp1hljKEDixM3E1QP3TO2x9RxzEAL93MZS~Vp~a4ESkByPGlbveP169AIqsdi6rP8nPyjd9edspGE4JNg9eUVm37xhLqXkz9XJOzVrz-HygG4OhBP9kC1GXU~JRv6eZlw__' alt='anime Gif' />
-                                </div>
+                            </div>
                                 <div className='flex flex-col rounded-[calc(36px-1px)] justify-evenly text-center backdrop-blur-sm z-20 w-[100%] h-[100%]'>
                                     <h2 className="text-4xl font-light text-teal-500">{activeItem.header}</h2>
                                     <p className='text-xl text-b_col3'>{activeItem.content3}</p>

diff --git a/src/pages/projects.jsx b/src/pages/projects.jsx
@@ -20,9 +20,10 @@ const Project = () => {
     // Add more slides as needed
   ];
 
-  return (
-    <div className='min-h-screen bg-slate-950 container mx-auto py-10'>
-        <div className="text-white text-9xl font-bold text-center pb-16">Projects</div>
+  return (<><section className='min-h-screen text-white grid grid-cols-1 place-items-center'>
+    <><div section="">
+    <div className='w-screen px-12'>
+        <div className="text-white text-7xl font-bold text-center pb-24 -mt-24">Projects</div>
       <Swiper
         modules={[Navigation, Pagination]}
         navigation
@@ -46,7 +47,8 @@ const Project = () => {
           </SwiperSlide>
         ))}
       </Swiper>
-    </div>
+    </div></div></>
+    </section></>
   );
 };
 

diff --git a/src/pages/team.jsx b/src/pages/team.jsx
@@ -6,7 +6,7 @@ import Footer from "../components/footer";
 const Team = () => {
   return (
       <>
-        <div className='min-h-screen gradient  py-20 flex flex-col items-center'>
+        <div className='min-h-screen scale-80 py-36 flex flex-col items-center'>
           <h1 className='text-7xl text-white font-bold text-center pb-16'>Our Team</h1>
           <div className="w-full max-w-6xl mb-16 px-14" >
                       <div className='flex justify-around flex-wrap'>