changes

Author: tejasviverma

package-lock.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "autoprefixer": "^10.4.20",
@@ -20,6 +21,7 @@
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
+    "styled-components": "^6.1.13",
     "tailwindcss": "^3.4.10"
   },
   "devDependencies": {

package.json

@@ -6,9 +6,9 @@ import Working from './Working';
 export default function About() {
 	return (
         <>
-		<div className='w-full bg-black py-10'>
+		<div className='w-full bg-black py-10 pb-10'>
 			<div className='w-10/12 mx-auto text-white'>
-			<div id="about" className='capitalize font-white text-5xl md:text-6xl inline-block text-center mb-10'>
+			<div id="about" className='capitalize font-white text-5xl md:text-6xl inline-block text-center mb-10 neon-green'>
 					About
 				</div>
 				<div className='gap-y-10 text-sm md:text-base'>
@@ -20,8 +20,9 @@ export default function About() {
 					</p>
 				</div>
 			</div>
+			<Working/>
 		</div>
-        <Working/>
+        
         </>
 	);
 }

public/logo.jpg

@@ -5,14 +5,14 @@ import { faShieldAlt, faServer, faLock, faExclamationTriangle, faBan, faBalanceS
 export default function Theme() {
 
 	const product = [
-		{ title: 'Block Excess Ports', description: '',icon: faShieldAlt },
+		{ title: 'Block Excess Ports', description: 'It blocks excess ports.',icon: faShieldAlt },
 		{ title: 'NGINX configuration', description: 'Open-source web server software used for reverse proxy, load balancing, and caching.', icon: faServer },
 		{ title: 'DDos Protection', description: ' Filter out attack traffic to prevent it from reaching the intended targeted asset. ', icon: faLock },
 		{ title: 'Anomaly Detection', description: 'It is the identification of unexpected events, observations, or items that differ significantly from the norm.', icon: faExclamationTriangle },
 		{ title: 'IP Blacklisting', description: 'IP blacklisting is a method used to filter out illegitimate or malicious IP addresses from accessing your networks.', icon: faBan },
 		{ title: 'Rate Binding', description: 'Commitment not to increase a rate of duty beyond an agreed level.', icon: faBalanceScale },
         { title: 'Traffic Monitoring', description: 'Method of studying the incoming and outgoing traffic on a computer network via specialized hardware and/or software', icon: faTrafficLight },
-        { title: 'Visualizer', description: '', icon: faChartLine },
+        { title: 'Visualizer', description: 'It gives graph of how many times an IP has made requests in a minute. It also shows block listed IPs.', icon: faChartLine },
 
 	];
 
@@ -21,7 +21,7 @@ export default function Theme() {
         <div id="product" className='abosule inset-0 bg-gradient-to-r from-[rgba(0,0,0,0.7)] to-[rgba(0,0,0,0.7)]'>
 			<div className='w-10/12 mx-auto'>
 				<div className='capitalize font-white  text-5xl md:text-6xl inline-block text-center mb-10'>
-				<h3 className='text-white'>Features</h3>
+				<h3 className='text-white neon-green'>Features</h3>
 				</div>
 				<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mx-auto'>
 				{product.map((product, index) => (

src/components/About.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 const Footer = () => (
   <footer className="footer" id="contact">
-    <div>Contact us: [email protected]</div>
-    <div>Follow us on social media links</div>
+    <div ><h1 className="text-white bg-gray-800 p-4 shadow-lg rounded-lg transition-all shadow-white hover:scale-105">Made by Team CyberSentinels</h1></div>
+    <div></div>
   </footer>
 );
 

src/components/Features.jsx

@@ -1,41 +1,78 @@
 import React from 'react';
 import { motion } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGlobe, faShieldAlt, faSearch, faFilter } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components';
+
+// Styled component for the dotted line
+const DottedLine = styled(motion.div)`
+  width: 100px;
+  height: 2px;
+  background: repeating-linear-gradient(
+    90deg,
+    yellow,
+    yellow 5px,
+    transparent 5px,
+    transparent 10px
+  );
+  animation: dash 2s linear infinite;
+  margin: 0 10px; 
+
+  @keyframes dash {
+    to {
+      background-position: 100%;
+    }
+  }
+`;
+
+const IconWrapper = styled(motion.div)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
 
 const Working = () => {
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <motion.div
+      <IconWrapper
         initial={{ opacity: 0, x: -100 }}
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 1 }}
       >
-        <img src="internet-icon.svg" alt="Internet" />
-      </motion.div>
-      <motion.div
+        <FontAwesomeIcon icon={faGlobe} size="3x" alt="Internet" /> Internet
+      </IconWrapper>
+
+      <DottedLine />
+
+      <IconWrapper
         initial={{ opacity: 0, x: -100 }}
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 1, delay: 1 }}
       >
-        <img src="router-icon.svg" alt="Securing" />
-      </motion.div>
-      <motion.div
+        <FontAwesomeIcon icon={faShieldAlt} size="3x" alt="Security" />Security
+      </IconWrapper>
+
+      <DottedLine />
+
+      <IconWrapper
         initial={{ opacity: 0, x: -100 }}
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 1, delay: 2 }}
       >
-        <img src="router-icon.svg" alt="Detection" />
-      </motion.div>
-      <motion.div
+        <FontAwesomeIcon icon={faSearch} size="3x" alt="Detection" /> Detection
+      </IconWrapper>
+
+      <DottedLine />
+
+      <IconWrapper
         initial={{ opacity: 0, x: -100 }}
         animate={{ opacity: 1, x: 0 }}
         transition={{ duration: 1, delay: 3 }}
       >
-        <img src="router-icon.svg" alt="Filtering" />
-      </motion.div>
-      {/* Add more animations for the remaining components */}
+        <FontAwesomeIcon icon={faFilter} size="3x" alt="Filtering" /> Filtering
+      </IconWrapper>
     </div>
   );
 };
 
 export default Working;
-

src/components/Footer.jsx

@@ -162,14 +162,9 @@ body {
     background: #e0e0e0;
   }
 
-  .dotted-line {
-    stroke-dasharray: 5, 5;
-    animation: dash 5s linear infinite;
-  }
-  
-  @keyframes dash {
-    to {
-      stroke-dashoffset: 1000;
+  @layer utilities {
+    .neon-green {
+      color: #39FF14; /* Neon green color */
+      text-shadow: 0 0 5px #39FF14, 0 0 5px #39FF14, 0 0 20px #39FF14, 0 0 40px #39FF14;
     }
-  }
-  
+  }