add services

frontend/src/App.jsx → frontend/src/App.js

@@ -1,13 +1,10 @@
 import './App.css';
 import { Routes, Route } from "react-router-dom"
 import Layout from './components/Layout';
-import Home from "./components/landing/Home.jsx"
-import About from './components/About.jsx';
-import Internship from './components/Internships/Internship';
-import Footer from './components/Footer';
-import Services from './components/landing/Services';
-import Navbar from './components/Navbar';
-import InternshipDetails from './components/Internships/InternshipDetails';
+import Home from "./components/home/Home"
+import About from './components/About';
+import Internship from './components/internships/Internship';
+import InternshipDetails from './components/internships/InternshipDetails';
 import Accomplishment from './verify/Accomplishment';
 
 

frontend/src/components/About.jsx → frontend/src/components/About.js

@@ -5,7 +5,6 @@ const About = () => {
   return (
 
     <div className='py-10'>
-       <Navbar />
        About
     </div>
   )

frontend/src/components/Footer.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { BsTwitter } from 'react-icons/bs'
+import { FaFacebook } from 'react-icons/fa'
+import { BsLinkedin } from 'react-icons/bs'
+import { BsYoutube } from 'react-icons/bs'
+import img from '../images/codebooter.png'
+import { Link } from 'react-router-dom'
+
+const Footer = () => {
+  return (
+    <>
+      <div className='footer mb-0'>
+
+        <div>
+          <img src={img} className='footer-img' />
+        </div>
+        <div className='footer-deco'>
+          <Link to='/login'>Community</Link> <br />
+          <a href=''>About WEP</a><br />
+          <a href=''>Partners </a><br />
+        </div>
+
+        <div className='footer-deco'>
+          <a href=''>Newsletter</a> <br />
+          <a href=''>Events</a> <br />
+          <a href=''>Disclaimer</a> <br />
+        </div>
+
+        <div className='footer-deco'>
+          <a href=''>FAQ's</a> <br />
+          <a href=''>Feedback</a> <br />
+        </div>
+
+        <div className='footer-deco socials'>
+          <a href=''><BsTwitter /></a> <br />
+          <a href='/'><FaFacebook /></a><br />
+          <a href='' ><BsLinkedin /></a><br />
+          <a href='' ><BsYoutube /></a><br />
+        </div>
+      </div>
+
+      <div className='flex justify-center items-center bg-main-3 pb-6 text-xs copyright'>
+        © 2023 CodeBooter Website. All rights reserved.
+      </div>
+    </>
+
+  )
+}
+
+export default Footer

frontend/src/components/Layout.jsx → frontend/src/components/Layout.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import {Outlet} from "react-router-dom"
-import Navbar from './Navbar.jsx'
-import Footer from './Footer.jsx'
+import Navbar from './Navbar'
+import Footer from './Footer'
 
 
 
 const Layout = () => {
   return (
-
     <div>
      <Navbar />
      <Outlet />

frontend/src/components/Navbar.jsx → frontend/src/components/Navbar.js

@@ -10,24 +10,24 @@ function Navbar() {
   const activeStyles = {
     fontWeight: "bold",
     textDecoration: "underline",
-    color: "#FFA8A8"
+    color: "#ff8ba8"
   }
 
   return (
-    <div className="flex justify-between items-center fixed top-0 left-0 right-0 text-white bg-white p-4 h-20 mx-20">
+    <div className="nav flex justify-between items-center fixed top-0 left-0 right-0 p-4 px-8 sh-20">
       <div>
-      <NavLink to='/' className="text-2xl text-black">
+      <NavLink to='/' className="text-2xl nav-text">
       <motion.h6
         whileHover={{scale: 1.1 }}
         transition={{type: 'spring', stiffness: 300
         }}>
-        Code<span className="text-main">Booter</span>
+        <span className="code">Code</span><span className="text-main">Booter</span>
         </motion.h6>
         </NavLink>
       </div>
 
       <div className="flex">
-      <NavLink to='/about' className="p-2 text-black"
+      <NavLink to='/about' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
         <motion.h6
         whileHover={{scale: 1.1 }}
@@ -36,7 +36,7 @@ function Navbar() {
         About
         </motion.h6>
         </NavLink>
-      <NavLink to='/internship' className="p-2 text-black"
+      <NavLink to='/internship' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
       <motion.h6
         whileHover={{scale: 1.1 }}
@@ -45,7 +45,7 @@ function Navbar() {
         Internship
         </motion.h6>
         </NavLink>
-      <NavLink to='/project' className="p-2 text-black"
+      <NavLink to='/project' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
       <motion.h6
         whileHover={{scale: 1.1 }}
@@ -54,7 +54,7 @@ function Navbar() {
         Live Projects
         </motion.h6>
         </NavLink>
-      <NavLink to='/product' className="p-2 text-black"
+      <NavLink to='/product' className="p-2 nav-text"
       style={({ isActive }) => isActive ? activeStyles : null}>
       <motion.h6
         whileHover={{scale: 1.1 }}
@@ -64,7 +64,7 @@ function Navbar() {
         </motion.h6>
         </NavLink>
       <NavLink to='/login'>
-        <motion.button className="text-black border border-2 border-black py-2 px-5 rounded-full"
+        <motion.button className="nav-text border border-2 border-main py-2 px-5 rounded-full"
          whileHover={{scale: 1.1 }}
          transition={{type: 'spring', stiffness: 300
          }}>

frontend/src/components/Contact.jsx → frontend/src/components/home/Contact.js

@@ -4,32 +4,35 @@ import { motion } from "framer-motion"
 const Contact = () => {
   return (
 
-      <div className="mt-20 p-20 flex justify-around bg-cyan-100">
+      <div className="mt-20 flex justify-around">
         <div className="">
-          <p className="text-2xl font-bold">
+          <motion.p className="text-2xl font-bold"
+           whileHover={{scale: 1.1, originX: 0 }}
+           transition={{type: 'spring', stiffness: 300
+           }}>
             Contact
-          </p>
-          <p className="py-6">Submit the form below to get in touch with us</p>
+          </motion.p>
+          <p className="py-6">Submit the form to get in touch with us</p>
         </div>
 
           <form className="flex flex-col">
             <input
               type="text"
               name="name"
               placeholder="Enter your Name"
-              className="p-2 bg-transparent border-2 rounded-md text-white focus:outline-none hover:scale-110 duration-100"
+              className="p-2 bg-transparent border-2 rounded-md text-white"
             />
             <input
               type="text"
               name="email"
               placeholder="Enter your email"
-              className="my-4 p-2 bg-transparent border-2 rounded-md text-white focus:outline-none hover:scale-110 duration-100"
+              className="my-4 p-2 bg-transparent border-2 rounded-md text-white"
             />
             <textarea
               name="message"
               placeholder="Enter your message"
               rows="10"
-              className="p-2 bg-transparent border-2 rounded-md text-white focus:outline-none hover:scale-110 duration-100"
+              className="p-2 bg-transparent border-2 rounded-md text-white"
             ></textarea>
 
             <button className="text-white bg-gradient-to-b from-cyan-500 to-blue-500 px-6 py-3 my-8 mx-auto flex items-center rounded-md hover:scale-110 duration-300">

frontend/src/components/home/Hero.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import image from '../../images/study.png'
+import { Link } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import videoFile from './hero-img.mp4'
+
+
+
+
+const Hero = () => {
+
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const handleLoadedData = () => {
+    setIsLoading(false);
+  };
+  return (
+
+    <div className='flex justify-around items-center my-24 hero-container'>
+
+      <div className='fade-in-from-left bg-' >
+        <h1 className="text-5xl text-bold">WE BUILD<br /><span className='pt-8'>WE PUBLISH</span></h1>
+        <p className="py-5 text-1xl font-bold">We are a Community of Tech Learners. <br />Come on, Let's Learn Together. Join Us.</p>
+        <Link to='/about'>
+          <motion.button className='hero-btn my-5 py-3 px-8 text-lg border-2 border-main-3 rounded-full mr-5'
+            whileHover={{ scale: 1.1 }}
+            transition={{
+              type: 'spring', stiffness: 300
+            }}>
+            JOIN COMMUNITY
+          </motion.button>
+        </Link>
+      </div>
+
+      <div>
+        <video className='image-top' controls={false} autoPlay muted
+          onLoadedData={handleLoadedData}
+          style={{ display: isLoading ? 'none' : 'block' }}
+        >
+          <source src={videoFile} type="video/mp4" />
+          Sorry, your browser doesn't support videos.
+        </video>
+      </div>
+
+    </div>
+
+  )
+}
+
+export default Hero

frontend/src/components/landing/Home.jsx → frontend/src/components/home/Home.js

@@ -1,14 +1,12 @@
 import React from 'react'
 import Hero from './Hero'
 import Services from './Services'
-import Navbar from '../Navbar'
-import Internship from '../Internships/Internship'
-import Contact from '../Contact'
+import Internship from '../internships/Internship'
+import Contact from './Contact'
 
 const Home = () => {
   return (
-    <div className='m-5'>
-      <Navbar />
+    <div className=''>
       <Hero />
       <Services />
       <Internship />

frontend/src/components/home/Services.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FaRegHeart, FaRegLightbulb, FaRegChartBar } from 'react-icons/fa';
+import img1 from './1.png';
+import img2 from './2.png';
+import img3 from './3.png';
+import img4 from './4.png';
+
+
+
+const Services = () => {
+  return (
+    <section id="services" className="services-section">
+      <h2 className="section-title">Our Services</h2>
+      <div className="service-list">
+        <div className="service-item">
+          <img src={img1} className='img-icon' />
+          <h3 className="service-title">Android and IOs</h3>
+        </div>
+        <div className="service-item">
+          <img src={img2} className='img-icon' />
+          <h3 className="service-title">Web Solution</h3>
+        </div>
+        <div className="service-item">
+          <img src={img3} className='img-icon' />
+          <h3 className="service-title">Hosting and cloud</h3>
+        </div>
+        <div className="service-item">
+          <img src={img4} className='img-icon' />
+          <h3 className="service-title">Training</h3>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Services;

frontend/src/components/internships/Internship.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { FaRegHeart, FaRegLightbulb, FaRegChartBar } from 'react-icons/fa';
+
+
+const Internship = () => {
+  return (
+    <section id="services" className="services-section">
+      <h2 className="section-title">Internships</h2>
+      <div className="service-list">
+        <div className="service-item">
+          <div className="service-icon"><FaRegHeart /></div>
+          <h3 className="service-title">Internship 1</h3>
+          <p className="service-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        </div>
+        <div className="service-item">
+          <div className="service-icon"><FaRegLightbulb /></div>
+          <h3 className="service-title">Internship 2</h3>
+          <p className="service-description">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        </div>
+        <div className="service-item">
+          <div className="service-icon"><FaRegChartBar /></div>
+          <h3 className="service-title">Internship 3</h3>
+          <p className="service-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+        </div>
+        <div className="service-item">
+          <div className="service-icon"><FaRegChartBar /></div>
+          <h3 className="service-title">Internship 3</h3>
+          <p className="service-description">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Internship