diff --git a/index.html b/index.html
index 7bcbf13..8f43fc1 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,12 @@
pointer-events: none;
z-index: 9999;
}
+
+ @media (max-width: 780px) {
+ .circle-container{
+ display: none;
+ }
+ }
diff --git a/package-lock.json b/package-lock.json
index b1d6b59..5a0c4a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3205,20 +3205,6 @@
"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
"integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
},
- "node_modules/@types/three": {
- "version": "0.165.0",
- "resolved": "https://registry.npmjs.org/@types/three/-/three-0.165.0.tgz",
- "integrity": "sha512-AJK8JZAFNBF0kBXiAIl5pggYlzAGGA8geVYQXAcPCEDRbyA+oEjkpUBcJJrtNz6IiALwzGexFJGZG2yV3WsYBw==",
- "license": "MIT",
- "peer": true,
- "dependencies": {
- "@tweenjs/tween.js": "~23.1.1",
- "@types/stats.js": "*",
- "@types/webxr": "*",
- "fflate": "~0.8.2",
- "meshoptimizer": "~0.18.1"
- }
- },
"node_modules/@types/webxr": {
"version": "0.5.16",
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.16.tgz",
@@ -5762,13 +5748,6 @@
"jiti": "bin/jiti.js"
}
},
- "node_modules/jquery": {
- "version": "3.7.1",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
- "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
- "license": "MIT",
- "peer": true
- },
"node_modules/js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
diff --git a/src/components/AboutUs.css b/src/components/AboutUs.css
index a52b1e9..b919cf2 100644
--- a/src/components/AboutUs.css
+++ b/src/components/AboutUs.css
@@ -1,6 +1,6 @@
body {
- background-color: #000;
- color: #fff;
+ /* background-color: #000;
+ color: #fff; */
margin: 0;
padding: 0;
overflow-x: hidden;
diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
index 1da43ae..21e6fe4 100644
--- a/src/components/AboutUs.jsx
+++ b/src/components/AboutUs.jsx
@@ -1,21 +1,21 @@
-import React, { useEffect, useState, useMemo } from "react";
-import axios from "axios";
+import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Particles, { initParticlesEngine } from "@tsparticles/react";
-import { loadFull } from "tsparticles";
+import axios from "axios";
+import React, { useEffect, useMemo, useState } from "react";
import Tilty from "react-tilty";
-import "../components/AboutUs.css";
-import aboutImage from "../assets/cartoon.png";
+import { loadFull } from "tsparticles";
import carImage from "../assets/1 1.png";
-import Himank from "../assets/Himank.jpg";
import Akshat from "../assets/Akshat.jpg";
-import Shreya from "../assets/Shreya.jpg";
+import aboutImage from "../assets/cartoon.png";
+import Himank from "../assets/Himank.jpg";
import Naman from "../assets/Naman.jpg";
-import Footer from './Footer';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLinkedin, faGithub } from '@fortawesome/free-brands-svg-icons';
+import Shreya from "../assets/Shreya.jpg";
+import "../components/AboutUs.css";
+import Footer from "./Footer";
// import Tilty from "react-tilty";
-import { particles } from "./Particles.jsx";
import BackToTop from "./BottomToTop";
+import { particles } from "./Particles.jsx";
const AboutUs = () => {
const [contributors, setContributors] = useState([]);
@@ -29,7 +29,9 @@ const AboutUs = () => {
useEffect(() => {
const fetchContributors = async () => {
try {
- const response = await axios.get('https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors');
+ const response = await axios.get(
+ "https://api.github.com/repos/Akshatchaube01/TimeWarp/contributors"
+ );
setContributors(response.data);
} catch (error) {
console.error("Error fetching contributors:", error);
@@ -75,18 +77,18 @@ const AboutUs = () => {
bottomTxt:
"Through our passion for exploration and discovery, we seek to inspire curiosity and ignite imaginations, inviting individuals to embark on a journey through time where they can uncover hidden treasures, explore diverse cultures, and witness the remarkable tapestry of human experience.",
};
- const handlehover=(e)=>{
- e.currentTarget.querySelector(".hovereffect").style.transform="scale(1)";
- }
- const hanleleave=(e)=>{
- e.currentTarget.querySelector(".hovereffect").style.transform="scale(0)";
- }
+ const handlehover = (e) => {
+ e.currentTarget.querySelector(".hovereffect").style.transform = "scale(1)";
+ };
+ const hanleleave = (e) => {
+ e.currentTarget.querySelector(".hovereffect").style.transform = "scale(0)";
+ };
return (
particles, [])} />
-
+
{
About Us
-
-
+
+
{about.topTxt}
-
+
{about.bottomTxt}
@@ -124,10 +125,10 @@ const AboutUs = () => {
Our Vision
-
+
{vision.topTxt}
-
+
{vision.bottomTxt}
{teamMembers.map((member, index) => (
-
+
-
{member.memberName}
+
+ {member.memberName}
+
Member
-
Tech Stack
+
+ Tech Stack
+
-
-
+
+
+
)}
);
};
+
const Wrapper = styled.div`
@media(max-width:481px){
bottom:7%;
diff --git a/src/components/Footer.css b/src/components/Footer.css
index ae8ec54..a99abe2 100644
--- a/src/components/Footer.css
+++ b/src/components/Footer.css
@@ -19,7 +19,7 @@ a:hover {
.footer-content {
display: flex;
flex-direction: column;
- align-items: center;
+ align-items: flex-start;
justify-content: space-around;
max-width: 1200px;
margin: auto;
@@ -154,8 +154,9 @@ a:hover {
.footer-section ul li a:hover,
.footer-section p a:hover {
- color: #90a9bb;
- transform: scale(1.1);
+ color: #90d0fe;
+ text-decoration:solid;
+ transform: scale(1.3);
}
.smedia {
@@ -290,3 +291,67 @@ a:hover {
}
+ .modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ animation: fadeIn 0.5s;
+ }
+
+ .modal-content {
+ background: rgb(255, 255, 255);
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+ animation: fadeIn 0.5s;
+ }
+
+ .modal-content h2 {
+ margin-top: 0;
+ color: #072183;
+ font-weight: bold;
+ }
+
+ .modal-content p {
+ color: #000000;
+ }
+
+
+ .modal-content button {
+ background: #093eba;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-top: 20px;
+ }
+
+ .modal-content button:hover {
+ background: #05286f;
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+ }
+
+ @keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+ }
+
\ No newline at end of file
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 12f85b5..8ef00a2 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -13,10 +13,11 @@ const quotes = [
];
const Footer = () => {
- const [footerStyle, setFooterStyle] = useState({
- color: 'black'
- });
+ const [footerStyle, setFooterStyle] = useState({ color: 'black' });
const [quote, setQuote] = useState(quotes[Math.floor(Math.random() * quotes.length)]);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [email, setEmail] = useState('');
+ const [error, setError] = useState('');
useEffect(() => {
let savedTheme = localStorage.getItem('theme') || 'light';
@@ -52,6 +53,19 @@ const Footer = () => {
return () => clearInterval(intervalId); // cleanup interval on component unmount
}, []);
+ const handleSubscribe = () => {
+ if (!email) {
+ setError('Please enter your email ⚠️.');
+ return;
+ }
+ setIsModalOpen(true);
+ setTimeout(() => {
+ setIsModalOpen(false);
+ }, 9000);
+ setEmail('');
+ setError('');
+ };
+
return (
);
};
-export default Footer;
\ No newline at end of file
+export default Footer;