diff --git a/index.html b/index.html index 10f1139..7894c34 100644 --- a/index.html +++ b/index.html @@ -1,68 +1,75 @@ - + - - - - + + + + - + - - + +
-
+
- - + domain: "www.chatbase.co", + }; + + + + - - - \ No newline at end of file + + diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..dd37823 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "module": "ESNext", + "moduleResolution": "Bundler", + "target": "ES2022", + "jsx": "react", + "allowImportingTsExtensions": true, + "strictNullChecks": true, + "strictFunctionTypes": true + }, + "exclude": ["node_modules", "**/node_modules/*"] +} diff --git a/src/App.css b/src/App.css index 0f97161..9e63d73 100644 --- a/src/App.css +++ b/src/App.css @@ -23,13 +23,14 @@ html { } .progress-bar { - height: 100%; + height: inherit; width: 0; background: linear-gradient(90deg, #6a529a, #7434ff); box-shadow: 0 0 15px rgba(59, 58, 132, 0.8), 0 0 30px rgba(146, 120, 199, 0.8); transition: width 0.4s ease; } +/* scrollbar styles aren't working in firefox */ ::-webkit-scrollbar { width: 12px; height: 12px; @@ -67,17 +68,15 @@ body { } nav { - height: 20px; + height: 80px; display: flex; justify-content: space-between; align-items: center; - padding-top: 30px; position: fixed; top: 0; width: 100%; background: #13072e; z-index: 2; - padding-bottom: 25px; } .nav-up { @@ -85,6 +84,8 @@ nav { } .nav-icon { + /* margin-top: 6px; */ + height: 80px; display: flex; align-items: center; justify-content: center; @@ -92,7 +93,7 @@ nav { .logo { height: 80px; - margin-left: 5% + margin-left: 5%; } .nav-icon p { @@ -108,41 +109,50 @@ nav { } .nav-list { - list-style: none; display: flex; + flex: 1; + justify-content: center; + list-style: none; } .nav-item { + width: auto; + text-align: center; margin-left: 5vw; font-size: 1.15rem; cursor: pointer; position: relative; } -.nav-item::before{ - content: ''; +.nav-item::before { + content: ""; position: absolute; - bottom:-10px; + bottom: -10px; left: -5%; width: 0%; height: 3px; background-color: #ffcc4a; border-radius: 3px; - transition: width 0.4s ease-in-out; + transition: width 0.28s ease-in-out; } -.nav-item:hover{ + +.nav-item:hover { color: #ffcc4a; - &::before{ + &::before { width: 110%; } } + .nav-item a { + font-weight: 500; color: white; text-decoration: none; - opacity: 0.8; + opacity: 0.4; + transition: all 0.15s ease-in-out; } .nav-item a:hover { opacity: 1; + transform: scale(1.1); font-weight: 500; } @@ -152,8 +162,11 @@ nav { .nav-button a { text-decoration: none; - color: black; - font-weight: 300; + color: #b3aaff; + font-weight: 400; + display: flex; + justify-content: center; + align-items: center; } .nav-content { @@ -164,28 +177,28 @@ nav { } .nav-button .btn { - font-size: 1.25rem; + font-size: 1.05rem; height: 2.5rem; width: 8rem; margin-right: 2vw; border-radius: 30px; border: none; cursor: pointer; - background: white; + background-color: transparent; transition: all 0.3s ease-in-out; - border: 2px solid white; + border: 2px solid #7434ff; transition: all 0.3s ease-in-out; } .btn i { - color: black; + color: #7434ff; border: none; margin-left: 10px; transition: rotate 0.3s ease-in-out; } .btn:hover { - background: transparent; + background: #3f2182; color: white; font-weight: 400; } @@ -203,7 +216,6 @@ nav { display: none; } - .home-text { height: fit-content; width: 95vw; @@ -212,7 +224,6 @@ nav { margin-left: 2.5vw; border-radius: 30px; display: flex; - } .top-button { @@ -273,6 +284,7 @@ nav { .explore-btn:hover { box-shadow: 1px 1px 10px rgb(255, 234, 182); + filter: brightness(1.05); } .home-image { @@ -285,6 +297,9 @@ nav { /* General layout improvements */ .course-page { width: 100vw; + display: flex; + justify-content: center; + align-items: center; margin-top: 80px; } @@ -306,15 +321,15 @@ nav { .search-icon h2 { font-size: 6rem; font-weight: 700; + width: 50%; color: white; - padding-left: 100px; + text-align: center; } .search-bar { display: flex; align-items: center; justify-content: center; - width: 50%; position: relative; } @@ -339,8 +354,9 @@ nav { border: none; background-color: transparent; cursor: pointer; + height: 3.5rem; position: absolute; - right: 200px; + right: 26%; } .search-icon i { @@ -355,58 +371,56 @@ nav { .courses { display: grid; - grid-template-columns: repeat(4, 2fr); + grid-template-columns: repeat(4, 1fr); gap: 28px; - justify-content: center; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + justify-items: center; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .course-box { - height: 55vh; - width: 21%; + height: 26rem; + width: 20rem; + min-width: 16rem; border-radius: 20px; - border: 1px solid #ececf9; position: relative; overflow: hidden; - transition: all 0.3s ease; - margin-bottom: 10vh; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, + all 0.3s ease; background-color: rgba(255, 255, 255, 0.1); + border: 1px solid transparent; backdrop-filter: blur(10px); - border: 1px solid rgba(255, 255, 255, 0.2); + display: grid; + grid-template-rows: auto 6rem; + cursor: pointer; } .course-box:hover { transform: translateY(-10px); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.2); } .course-image { - width: 100%; - height: 68%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; overflow: hidden; - display: grid; - place-items: center; } .course-image a img { - width: 88%; - height: 60%; - margin-top: 20px; - margin-left: 20px; - border-top-left-radius: 20px; - border-top-right-radius: 20px; + width: 70%; filter: contrast(1.5); } .course-text { - padding: 20px; + padding: 20px 10px; text-align: left; + position: relative; } -.courses h2{ +.courses h2 { font-size: 6rem; } @@ -418,7 +432,7 @@ nav { .course-name { font-size: 1.5rem; font-weight: 600; - margin-bottom: 10px; + margin-bottom: 12px; color: #fff; } @@ -434,11 +448,20 @@ nav { .lessons { font-size: 0.95rem; + width: fit-content; color: #ccc; cursor: pointer; + padding: 5px 10px; + position: absolute; + top: 20px; + right: 10px; + border-radius: 10px; + transition: all 0.15s ease-in-out; + border: 1px solid rgba(255, 255, 255, 0.2); } -.lessons:hover{ +.lessons:hover { + border: 1px solid #007bff; color: #007bff; } @@ -447,9 +470,11 @@ nav { } .arrow-container { - text-align: center; /* Center align the arrow */ - margin-top: 20px; /* Add some spacing */ - margin-left: 20px; /* Add some spacing */ + display: flex; + column-span: all; + justify-content: center; + align-items: center; + width: 100%; } .arrow-image { @@ -457,11 +482,6 @@ nav { height: auto; /* Maintain aspect ratio */ } -.course-box:hover { - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); -} - .course-box:hover .course-name { color: #007bff; } @@ -474,7 +494,7 @@ nav { box-shadow: 0 0 10px rgba(0, 123, 255, 0.3); } -.slideshow-container{ +.slideshow-container { padding-top: 3%; } @@ -495,7 +515,7 @@ nav { /* Carousel Container */ .wrapper { position: relative; - padding:20px; + padding: 20px; } .wrapper .carousels { @@ -505,6 +525,7 @@ nav { scroll-behavior: smooth; padding: 60px 10px; white-space: nowrap; /* Prevent wrapping of items */ + overflow-x: hidden; } .carousels::-webkit-scrollbar { @@ -595,6 +616,7 @@ nav { height: 50px; width: 50px; border-radius: 50%; + border: none; background-color: #bdb4ff; /* Light purple */ color: black; font-size: 1.5rem; @@ -604,13 +626,15 @@ nav { } /* Position the Next button */ -.slider:nth-of-type(2) { /* Select the second slider button (Next) */ +.slider:nth-of-type(2) { + /* Select the second slider button (Next) */ right: 15px; bottom: 45%; } /* Position the Previous button */ -.slider:nth-of-type(1) { /* Select the first slider button (Previous) */ +.slider:nth-of-type(1) { + /* Select the first slider button (Previous) */ left: 15px; /* Position it on the left */ bottom: 45%; } @@ -625,7 +649,6 @@ nav { transform: scale(0.95); /* Slightly shrink on click */ } - /* Custom scrollbar removal */ .testimonals::-webkit-scrollbar { display: none; @@ -651,31 +674,9 @@ nav { background-color: #4caf50; /* Active dot color */ } -/* Responsive Design */ -@media (max-width: 768px) { - .testimonals .why { - font-size: 3rem; - } - - .carousels .card { - min-width: 250px; - } - - .user img { - width: 80px; - height: 80px; - } - - .slider { - height: 40px; - width: 40px; - font-size: 1.25rem; - } -} - .contact-us { height: auto; - margin-top: 5vw; + margin: 5vw 0; width: 100%; display: flex; } @@ -699,7 +700,7 @@ textarea { font-size: 1.1rem; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); - &::placeholder{ + &::placeholder { color: #ccc; } } @@ -816,8 +817,8 @@ h1 { margin: auto; margin-top: -60px; } -.foot p{ - font-family:'FontAwesome'; +.foot p { + font-family: "FontAwesome"; letter-spacing: 2px; } @@ -830,7 +831,7 @@ h1 { flex-basis: 30%; } -.resources li a:hover{ +.resources li a:hover { text-decoration-line: underline; color: white; } @@ -913,7 +914,7 @@ h1 { border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; transition: box-shadow 0.3s ease; - &::placeholder{ + &::placeholder { color: #ccc; } } @@ -950,7 +951,7 @@ h1 { object-fit: cover; } -@media (max-width:660px) { +@media (max-width: 660px) { .home-text { flex-direction: column; } @@ -970,9 +971,13 @@ h1 { margin-right: 20px; } - /* .nav-text, .nav-button { - display: none; - } */ + .nav-up { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + flex-direction: row !important; + } .nav-icon p { font-size: 2rem; @@ -1026,9 +1031,16 @@ h1 { width: 80vw; } + .right-image { + display: flex; + justify-content: center; + padding: 1rem; + } + .home-image { + width: 80%; margin: 0px; - width: -webkit-fill-available; + /* width: -webkit-fill-available; */ padding: 20px; } @@ -1053,7 +1065,7 @@ h1 { position: static; } - .course-box{ + .course-box { height: 20rem; width: 17rem; margin-bottom: 0; @@ -1078,8 +1090,8 @@ h1 { } .contact-us { + display: flex; flex-direction: column; - margin-top: 20vw; } .form { @@ -1136,10 +1148,77 @@ h1 { .third .search { margin-left: 0px; } +} +@media (min-width: 601px) and (max-width: 840px) { + nav { + padding: 20px 0; + height: auto; + display: flex; + flex-direction: column; + } + + .nav-up { + display: flex; + flex-direction: column; + } + + .nav-icon p { + font-size: 2rem; + } + .nav-item { + font-size: 1.1rem; + margin-left: 4px; + } + + .nav-content { + margin-top: 1rem; + } + + .nav-list { + margin-right: 5%; + gap: 14px; + } + + .nav-button .btn { + margin-right: 2vw; + width: 7.2rem; + height: 2.4rem; + } + + #introduction { + margin-top: 12rem; + padding-bottom: 1rem; + } + + .search-icon { + flex-direction: column; + justify-content: space-between; + } + + .search-icon h2 { + padding: 1rem; + font-size: 4rem; + } + + .right-image { + display: flex; + justify-content: center; + align-items: center; + } + + .home-image { + width: 80%; + display: flex; + margin-left: 10%; + } + + .courses { + grid-template-columns: repeat(2, 1fr); + } } -@media (min-width: 661px) and (max-width: 1200px) { +@media (min-width: 841px) and (max-width: 1200px) { nav { padding: 20px 0; height: auto; @@ -1157,27 +1236,35 @@ h1 { } .nav-item { - font-size: 1.5rem; + font-size: 1.3rem; + } + + .nav-content { + margin-top: 1rem; + } + + .nav-list { + margin-right: 5%; + } + + #introduction { + height: fit-content; + padding-bottom: 1rem; } .home-text { - flex-direction: row; - justify-content: space-between; - width: 90%; margin-top: 200px; - padding: 20px 0; } - .mid-text { - width: 60vw; - /* Adjusted for better readability */ + .right-image { + display: flex; + justify-content: center; + align-items: center; } .home-image { - width: 100%; - /* Scaled for medium-sized screens */ - margin: 10px auto; - padding: 20px 0; + width: 80%; + margin-left: 10%; } .search-icon { @@ -1188,7 +1275,6 @@ h1 { .search-icon h2 { padding: 1rem; font-size: 4rem; - } .search-bar { @@ -1206,23 +1292,11 @@ h1 { } .courses { - grid-template-columns: repeat(3, 2fr); - padding: 20px; - width: 100%; - gap: 20px; - margin: 0px; - } - - .course-box { - width: auto; - height: 20rem; - margin-bottom: 0; + grid-template-columns: repeat(3, 1fr); } .course-page { - padding: 10px; - margin-top: 0px; - width: 90vw; + display: flex; } .wrapper .carousels { @@ -1287,7 +1361,6 @@ h1 { justify-content: space-around; flex-direction: column; gap: 20px; - } .footer .right { @@ -1317,7 +1390,8 @@ h1 { @media (min-width: 1201px) and (max-width: 1700px) { .home-image { - margin-left: 100px; + margin-left: 20%; + margin-top: 15%; } .explore-btn { @@ -1330,24 +1404,11 @@ h1 { } .courses { - margin: 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; + grid-template-columns: repeat(3, 1fr); } - .course-box{ - margin-bottom: 0; - } - .course-page a { - width: 20rem; - height: 25rem; - } - - .contact-us { - margin-bottom: 20px; - width: 100%; - height: auto; + .search-icon h2 { + font-size: 5rem; + flex: 70%; } -} \ No newline at end of file +} diff --git a/src/App.jsx b/src/App.jsx index ee5feff..b1803f5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,25 +1,22 @@ -import React from "react"; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; import "./App.css"; import AllCourses from "./components/AllCourses"; import Home from "./components/Home"; import Login from "./components/Login"; import Signup from "./components/Signup"; -import PrivacyPolicy from "./components/PrivacyPolicy"; +import PrivacyPolicy from "./components/PrivacyPolicy"; import TermsOfUse from "./components/TermsOfUse"; - function App() { return ( - } /> - } /> - } /> - } /> - } /> - } /> - + } /> + } /> + } /> + } /> + } /> + } /> ); diff --git a/src/assets/assembly.png b/src/assets/assembly.png index 1eebbe2..e97c295 100644 Binary files a/src/assets/assembly.png and b/src/assets/assembly.png differ diff --git a/src/assets/elixir.png b/src/assets/elixir.png index 7754433..e282a0b 100644 Binary files a/src/assets/elixir.png and b/src/assets/elixir.png differ diff --git a/src/assets/kotlin.png b/src/assets/kotlin.png index a973e43..1b02ff3 100644 Binary files a/src/assets/kotlin.png and b/src/assets/kotlin.png differ diff --git a/src/assets/lua.png b/src/assets/lua.png index ccdecf6..118359c 100644 Binary files a/src/assets/lua.png and b/src/assets/lua.png differ diff --git a/src/assets/next.png b/src/assets/next.png index 97ae2aa..a4cd08a 100644 Binary files a/src/assets/next.png and b/src/assets/next.png differ diff --git a/src/assets/objc.png b/src/assets/objc.png index af6ce73..e6338d3 100644 Binary files a/src/assets/objc.png and b/src/assets/objc.png differ diff --git a/src/assets/perl.png b/src/assets/perl.png index 936db83..27ece41 100644 Binary files a/src/assets/perl.png and b/src/assets/perl.png differ diff --git a/src/assets/shell.png b/src/assets/shell.png index 09c0632..c5ad897 100644 Binary files a/src/assets/shell.png and b/src/assets/shell.png differ diff --git a/src/assets/sql.png b/src/assets/sql.png index b02624f..20bbe65 100644 Binary files a/src/assets/sql.png and b/src/assets/sql.png differ diff --git a/src/components/AllCourse.jsx b/src/components/AllCourse.jsx index de6488e..bc463d3 100644 --- a/src/components/AllCourse.jsx +++ b/src/components/AllCourse.jsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import CourseCards from './AllCourseCard'; +import { useState } from "react"; +import CourseCards from "./AllCourseCard"; function AllCourse() { const [searchTerm, setSearchTerm] = useState(""); @@ -9,7 +9,7 @@ function AllCourse() { }; return ( -
+

Our Courses

@@ -21,7 +21,9 @@ function AllCourse() { value={searchTerm} onChange={handleSearchChange} /> - +
@@ -30,4 +32,4 @@ function AllCourse() { ); } -export default AllCourse; \ No newline at end of file +export default AllCourse; diff --git a/src/components/AllCourseCard.jsx b/src/components/AllCourseCard.jsx index c0e1b33..14ad19e 100644 --- a/src/components/AllCourseCard.jsx +++ b/src/components/AllCourseCard.jsx @@ -1,313 +1,48 @@ -import React from "react"; -import next from "../assets/next.png"; -import react from "../assets/react.png"; -import php from "../assets/php.png"; -import swift from "../assets/swift.png"; -import go from "../assets/go.png"; -import Ruby from "../assets/ruby.png"; -import node from "../assets/node.png"; -import python from "../assets/python.png"; -import HTML from "../assets/HTML.png"; -import kotlin from "../assets/kotlin.png"; -import java from "../assets/java.png"; -import Chash from "../assets/Chash.png"; -import CSS from "../assets/CSS.png"; -import CPP from "../assets/CPP.png"; -import JS from "../assets/JS.png"; -import c from "../assets/C.png"; -import groovy from "../assets/groovy.png" -import assembly from "../assets/assembly.png"; -import dart from "../assets/dart.png"; -import elixir from "../assets/elixir.png"; -import fsharp from "../assets/fsharp.png"; -import haskell from "../assets/haskell.png"; -import lua from "../assets/lua.png"; -import objc from "../assets/objc.png"; -import perl from "../assets/perl.png"; -import prolog from "../assets/prolog.png"; -import R from "../assets/RL.png"; -import rust from "../assets/rust.png"; -import scala from "../assets/scala.png"; -import shell from "../assets/shell.png"; -import sql from "../assets/sql.png"; -import typescript from "../assets/typescript.png" -import clojure from "../assets/clojure.png" +import courses from "../data/courseData"; import Card from "./Card"; function AllCourseCard({ searchTerm }) { - const courses = [ - { - imgurl: java, - coursename: "Java", - authorname: "Kunal Kushwaha", - ytlink: "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java - gfgLink: "https://www.geeksforgeeks.org/java/", - }, - { - imgurl: c, - coursename: "C", - authorname: "College Wallah", - ytlink: "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/c-programming-language/", - }, - { - imgurl: CPP, - coursename: "C++", - authorname: "Codehelp", - ytlink: "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/c-plus-plus/", - }, - { - imgurl: Chash, - coursename: "C#", - authorname: "Code with Harry", - ytlink: "https://www.youtube.com/watch?v=SuLiu5AK9Ps", // C# Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/csharp-programming-language/", - }, - { - imgurl: Ruby, - coursename: "Ruby", - authorname: "Free Code Camp", - ytlink: "https://youtu.be/t_ispmWmdjY?si=cGPcXmH321aiCWEx", // Ruby Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/ruby/", - }, - { - imgurl: python, - coursename: "Python", - authorname: "Code with Harry", - ytlink: "https://youtu.be/UrsmFxEIp5k?si=MkQ8K4HxBO19sU23", // Python Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/python-programming-language/", - }, - { - imgurl: CSS, - coursename: "CSS", - authorname: "Free Code Camp", - ytlink: "https://www.youtube.com/watch?v=1Rs2ND1ryYc", // CSS Crash Course - gfgLink: "https://www.geeksforgeeks.org/css/", - }, - { - imgurl: go, - coursename: "Go", - authorname: "Alex Mux", - ytlink: "https://youtu.be/8uiZC0l4Ajw?si=QXJnV58ksxBxVRLP", // Go Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/go-programming-language/", - }, - { - imgurl: HTML, - coursename: "HTML", - authorname: "Apna College", - ytlink: "https://youtu.be/HcOc7P5BMi4?si=zw6ntozRp5KCo1M3", // HTML Crash Course - gfgLink: "https://www.geeksforgeeks.org/html/", - }, - { - imgurl: JS, - coursename: "JavaScript", - authorname: "KGCoding", - ytlink: "https://youtu.be/cpoXLj24BDY?si=09lg2YIRb7_bmQn1", // JavaScript Crash Course - gfgLink: "https://www.geeksforgeeks.org/javascript/", - }, - { - imgurl: kotlin, - coursename: "Kotlin", - authorname: "Free Code Camp", - ytlink: "https://youtu.be/F9UC9DY-vIU?si=CmdTnIKtAZlE-QrW", // Kotlin Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/kotlin-programming-language/", - }, - { - imgurl: node, - coursename: "Node.js", - authorname: "Programming with Mosh", - ytlink: "https://www.youtube.com/watch?v=TlB_eWDSMt4", // Node.js Crash Course - gfgLink: "https://www.geeksforgeeks.org/nodejs/", - }, - { - imgurl: swift, - coursename: "Swift", - authorname: "Free Code Camp", - ytlink: "https://youtu.be/comQ1-x2a1Q?si=PO3ITz3xy9Q2DjDf", // Swift Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/swift-programming-language/", - }, - { - imgurl: php, - coursename: "PHP", - authorname: "Free Code Camp", - ytlink: "https://www.youtube.com/watch?v=OK_JCtrrv-c", // PHP for Beginners - gfgLink: "https://www.geeksforgeeks.org/php/", - }, - { - imgurl: react, - coursename: "React.js", - authorname: "Aman Dhattarwal", - ytlink: "https://youtu.be/gY5sGvq-8h8?si=8XOL3vp2xWAmoXdr", // React Crash Course - gfgLink: "https://www.geeksforgeeks.org/reactjs/", - }, - { - imgurl: next, - coursename: "Next.js", - authorname: "Sangam Mukherjee", - ytlink: "https://youtu.be/mQnWCmVErnw?si=ZuYQ3BeAVEIJPU0Q", // Next.js Crash Course - gfgLink: "https://www.geeksforgeeks.org/nextjs/", - }, - { - imgurl: rust, - coursename: "Rust", - authorname: "Harkirat Singh", - ytlink: "https://youtu.be/qP7LzZqGh30?si=-1HbbjzodHaXBGHy", // Rust Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/introduction-to-rust-programming-language/", - }, - { - imgurl: typescript, - coursename: "TypeScript", - authorname: "Hitesh Choudhary", - ytlink: "https://youtu.be/30LWjhZzg50?si=naSRPqBtHSYv3vKy", // TypeScript Crash Course - gfgLink: "https://www.geeksforgeeks.org/typescript/", - }, - { - imgurl: dart, - coursename: "Dart", - authorname: "Codemy", - ytlink: "https://youtu.be/JZukfxvc7Mc?si=TAWdsi8gKgvWEKqJ", // Dart Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/dart-tutorial/", - }, - { - imgurl: R, - coursename: "R", - authorname: "SimpliLearn", - ytlink: "https://youtu.be/KlsYCECWEWE?si=Zu-yLT59bosuyph4", // R Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/r-programming-language/", - }, - { - imgurl: sql, - coursename: "SQL", - authorname: "Apna College", - ytlink: "https://youtu.be/hlGoQC332VM?si=4fDRq-m2GGf21AjI", // SQL Tutorial for Beginners - gfgLink: "https://www.geeksforgeeks.org/sql-tutorial/", - }, - { - imgurl: scala, - coursename: "Scala", - authorname: "Telusko", - ytlink: "https://youtu.be/i9o70PMqMGY?si=iF1biDEtHzw2FFT9", // Scala Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/scala-programming-language/", - }, - { - imgurl: shell, - coursename: "Shell Scripting", - authorname: "Edureka", - ytlink: "https://www.geeksforgeeks.org/introduction-linux-shell-shell-scripting/", // Shell Scripting Tutorial - }, - { - imgurl: groovy, - coursename: "Groovy", - authorname: "Awaix Mirza", - ytlink: "https://youtu.be/vDtENU-3Lwo?si=iGizt4rmeVZnpCe7", // Groovy Programming Tutorial - gfgLink: "https://www.tutorialspoint.com/groovy/index.htm", - }, - { - imgurl: assembly, - coursename: "Assembly", - authorname: "Free Code Camp", - ytlink: "https://youtu.be/gfmRrPjnEw4?si=GISmTpHqN25AbtPp", // Assembly Language Programming - gfgLink: "https://www.tutorialspoint.com/assembly_programming/assembly_introduction.htm", - }, - { - imgurl: elixir, - coursename: "Elixir", - authorname: "Celeb Curry", - ytlink: "https://youtu.be/-lgtb-YSUWE?si=cx9lYEfhp-ouTGEh", // Elixir Programming Crash Course - gfgLink: "https://elixir-lang.org/", - }, - { - imgurl: fsharp, - coursename: "F#", - authorname: "Exercism", - ytlink: "https://youtu.be/AOF9njfbfnY?si=289yof6eRm1gWAGw", // F# Programming Tutorial - gfgLink: "https://fsharp.org/", - }, - { - imgurl: haskell, - coursename: "Haskell", - authorname: "Derek Banas", - ytlink: "https://youtu.be/02_H3LjqMr8?si=f9J-CAUxJ-ERPZq-", // Haskell Crash Course - gfgLink: "haskell.org", - }, - { - imgurl: lua, - coursename: "Lua", - authorname: "Steve Teacher", - ytlink: "https://youtu.be/1srFmjt1Ib0?si=f5Ft8ftiucKiPQc2", // Lua Programming Tutorial - gfgLink: "https://lua.org", - }, - { - imgurl: objc, - coursename: "Objective-C", - authorname: "Alex Paul", - ytlink: "https://youtu.be/2CPt99dnroQ?si=5gcqjPeW2YCo8Ahs", // Objective-C Crash Course - gfgLink: "https://objc.io", - }, - { - imgurl: perl, - coursename: "Perl", - authorname: "Derek Banas", - ytlink: "https://youtu.be/WEghIXs8F6c?si=IAUKdRzQCXlhjB3W", // Perl Programming Tutorial - gfgLink: "https://perl.org", - }, - { - imgurl: prolog, - coursename: "Prolog", - authorname: "Derek Banas", - ytlink: "https://youtu.be/SykxWpFwMGs?si=31iPLIB7BAGlehDm", // Prolog Programming Tutorial - gfgLink: "https://swi-prplog.org", - }, - { - imgurl: clojure, - coursename: "Clojure", - authorname: "Derek Banas", - ytlink: "https://youtu.be/ciGyHkDuPAE?si=Gr_vcXT3Usibp6-9", // Prolog Programming Tutorial - gfgLink: "https://clojure-doc.org/articles/tutorials/introduction/", - } - ]; - - // Filter courses based on the search term - const filteredCourses = courses.filter((course) => - course.coursename.toLowerCase().includes(searchTerm.toLowerCase()) - ); - - return ( -
-
- {filteredCourses.length > 0 ? ( - <> - {filteredCourses.map((course, index) => ( - - ))} - - ) : ( - -
- No course found -
-
-

No Courses Found

-

Try searching for something else!

-
- - )} -
-
+ // Filter courses based on the search term + const filteredCourses = courses.filter((course) => + course.coursename.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + return ( +
+
+ {filteredCourses.length > 0 ? ( + <> + {filteredCourses.map((course, index) => ( + + ))} + + ) : ( + +
+ No course found +
+
+

No Courses Found

+

Try searching for something else!

+
+ + )} +
); } - export default AllCourseCard; diff --git a/src/components/AllCourses.jsx b/src/components/AllCourses.jsx index 3da41d4..41a88b1 100644 --- a/src/components/AllCourses.jsx +++ b/src/components/AllCourses.jsx @@ -1,12 +1,11 @@ -import React from 'react' -import AllCourse from "./AllCourse" +import AllCourse from "./AllCourse"; const AllCourses = () => { -return ( + return ( <> - + -) -} + ); +}; -export default AllCourses \ No newline at end of file +export default AllCourses; diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 4d62964..965908f 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -1,6 +1,11 @@ -import React from 'react'; - -export default function Card({ imgurl, coursename, authorname, notes, ytlink, gfgLink }) { +export default function Card({ + imgurl, + coursename, + authorname, + notes, + ytlink, + gfgLink, +}) { return (
diff --git a/src/components/CourseCards.jsx b/src/components/CourseCards.jsx index 986d27b..481c147 100644 --- a/src/components/CourseCards.jsx +++ b/src/components/CourseCards.jsx @@ -1,175 +1,58 @@ -import React from "react"; -import next from "../assets/next.png"; -import react from "../assets/react.png"; -import php from "../assets/php.png"; -import swift from "../assets/swift.png"; -import go from "../assets/go.png"; -import Ruby from "../assets/ruby.png"; -import node from "../assets/node.png"; -import python from "../assets/python.png"; -import HTML from "../assets/HTML.png"; -import kotlin from "../assets/kotlin.png"; -import java from "../assets/java.png"; -import Chash from "../assets/Chash.png"; -import CSS from "../assets/CSS.png"; -import CPP from "../assets/CPP.png"; -import JS from "../assets/JS.png"; -import c from "../assets/C.png"; +// import next from "../assets/next.png"; import Card from "./Card"; -import arrow from "../assets/arrow.png" +import arrow from "../assets/arrow.png"; +import getCourses from "../data/courseData"; function CourseCards({ searchTerm }) { - const courses = [ - { - imgurl: java, - coursename: "Java", - authorname: "Kunal Kushwaha", - ytlink: "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java - gfgLink: "https://www.geeksforgeeks.org/java/", - }, - { - imgurl: c, - coursename: "C", - authorname: "College Wallah", - ytlink: "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/c-programming-language/", - }, - { - imgurl: CPP, - coursename: "C++", - authorname: "Codehelp", - ytlink: "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/c-plus-plus/", - }, - { - imgurl: Chash, - coursename: "C#", - authorname: "Code with Harry", - ytlink: "https://www.youtube.com/watch?v=SuLiu5AK9Ps", // C# Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/csharp-programming-language/", - }, - { - imgurl: Ruby, - coursename: "Ruby", - authorname: "Free Code Camp", - ytlink: "https://youtu.be/t_ispmWmdjY?si=cGPcXmH321aiCWEx", // Ruby Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/ruby/", - }, - { - imgurl: python, - coursename: "Python", - authorname: "Code with Harry", - ytlink: "https://youtu.be/UrsmFxEIp5k?si=MkQ8K4HxBO19sU23", // Python Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/python-programming-language/", - }, - { - imgurl: CSS, - coursename: "CSS", - authorname: "Free Code Camp", - ytlink: "https://www.youtube.com/watch?v=1Rs2ND1ryYc", // CSS Crash Course - gfgLink: "https://www.geeksforgeeks.org/css/", - }, - { - imgurl: go, - coursename: "Go", - authorname: "Alex Mux", - ytlink: "https://youtu.be/8uiZC0l4Ajw?si=QXJnV58ksxBxVRLP", // Go Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/go-programming-language/", - }, - { - imgurl: HTML, - coursename: "HTML", - authorname: "Apna College", - ytlink: "https://youtu.be/HcOc7P5BMi4?si=zw6ntozRp5KCo1M3", // HTML Crash Course - gfgLink: "https://www.geeksforgeeks.org/html/", - }, - { - imgurl: JS, - coursename: "JavaScript", - authorname: "KGCoding", - ytlink: "https://youtu.be/cpoXLj24BDY?si=09lg2YIRb7_bmQn1", // JavaScript Crash Course - gfgLink: "https://www.geeksforgeeks.org/javascript/", - }, - { - imgurl: kotlin, - coursename: "Kotlin", - authorname: "Free Code Camp", - ytlink: "https://youtu.be/F9UC9DY-vIU?si=CmdTnIKtAZlE-QrW", // Kotlin Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/kotlin-programming-language/", - }, - { - imgurl: node, - coursename: "Node.js", - authorname: "Programming with Mosh", - ytlink: "https://www.youtube.com/watch?v=TlB_eWDSMt4", // Node.js Crash Course - gfgLink: "https://www.geeksforgeeks.org/nodejs/", - }, - { - imgurl: swift, - coursename: "Swift", - authorname: "Free Code Camp", - ytlink: "https://youtu.be/comQ1-x2a1Q?si=PO3ITz3xy9Q2DjDf", // Swift Programming Tutorial - gfgLink: "https://www.geeksforgeeks.org/swift-programming-language/", - }, - { - imgurl: php, - coursename: "PHP", - authorname: "Free Code Camp", - ytlink: "https://www.youtube.com/watch?v=OK_JCtrrv-c", // PHP for Beginners - gfgLink: "https://www.geeksforgeeks.org/php/", - }, - { - imgurl: react, - coursename: "React.js", - authorname: "Aman Dhattarwal", - ytlink: "https://youtu.be/gY5sGvq-8h8?si=8XOL3vp2xWAmoXdr", // React Crash Course - gfgLink: "https://www.geeksforgeeks.org/reactjs/", - }, - ]; + const courses = getCourses(); // Filter courses based on the search term const filteredCourses = courses.filter((course) => course.coursename.toLowerCase().includes(searchTerm) ); - return ( -
-
- {filteredCourses.length > 0 ? ( - <> - {filteredCourses.map((course, index) => ( - - ))} -
- Arrow -
- - ) : ( - -
- No course found -
-
-

No Courses Found

-

Try searching for something else!

-
- - )} -
-
+ return ( +
+
+ {filteredCourses.length > 0 ? ( + <> + {filteredCourses.map((course, index) => ( + + ))} +
+ + Arrow + +
+ + ) : ( + +
+ No course found +
+
+

No Courses Found

+

Try searching for something else!

+
+ + )}
- ); +
+ ); } export default CourseCards; diff --git a/src/components/Courses.jsx b/src/components/Courses.jsx index 48a4573..975d40d 100644 --- a/src/components/Courses.jsx +++ b/src/components/Courses.jsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import CourseCards from './CourseCards'; +import { useState } from "react"; +import CourseCards from "./CourseCards"; function Courses() { const [searchTerm, setSearchTerm] = useState(""); @@ -9,7 +9,7 @@ function Courses() { }; return ( -
+

Our Courses

@@ -21,7 +21,9 @@ function Courses() { value={searchTerm} onChange={handleSearchChange} /> - +
@@ -30,4 +32,4 @@ function Courses() { ); } -export default Courses; \ No newline at end of file +export default Courses; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 2a4cd37..6f78384 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from "react"; import logo from "../assets/logo.png"; function Footer() { @@ -27,43 +27,72 @@ function Footer() {

Code Book

-
+
-

Welcome to Code Book—your go-to resource hub for mastering coding. Whether you're a beginner or an experienced developer, we provide curated tutorials, coding challenges, and guides to enhance your skills across various programming languages and frameworks. Our mission is to create a community where learning to code is accessible, engaging, and fun for everyone. -

+

+ Welcome to Code Book—your go-to resource hub for mastering + coding. Whether you're a beginner or an experienced + developer, we provide curated tutorials, coding challenges, and + guides to enhance your skills across various programming + languages and frameworks. Our mission is to create a community + where learning to code is accessible, engaging, and fun for + everyone. +

- +

Quick Links

-
+

Connect with us

-
+

Subscribe to our Newsletter

-

Stay in the loop and subscribe to Code Book's Newsletter

+

+ Stay in the loop and subscribe to Code Book's Newsletter +

-
{message &&

{message}

} -
+
-
+

© 2024 Code Book. All Rights Reserved.

@@ -86,4 +115,3 @@ function Footer() { } export default Footer; - diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 25998a4..b34ff0a 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -1,18 +1,17 @@ -import React from 'react' -import Navbar from './Navbar' -import Introduction from './Introduction' +import Navbar from "./Navbar"; +import Introduction from "./Introduction"; import { Courses, Slideshow, Contact, Footer } from "./index"; function Home() { return (
- - - - - -
- ) + ); } -export default Home \ No newline at end of file +export default Home; diff --git a/src/components/Introduction.jsx b/src/components/Introduction.jsx index d5a298b..3b3adb0 100644 --- a/src/components/Introduction.jsx +++ b/src/components/Introduction.jsx @@ -1,28 +1,42 @@ -import React from 'react' -import home from "../assets/home.png" +import home from "../assets/home.png"; function Introduction() { -return ( - <>
+ return ( + <> + {" "} +
-
-
- -
-
-

Welcome to Code Book, your ultimate coding destination. Whether you're a coding novice or a seasoned developer, we've got you covered. Master in-demand languages like Python, JavaScript, and Java while building real-world projects. Join our vibrant community of learners to collaborate and grow together. Start your coding journey today and unlock endless possibilities.

-
-
- -
-
-
- -
+
+
+ +
+
+

+ Welcome to Code Book, your ultimate coding + destination. Whether you're a coding novice or a seasoned + developer, we've got you covered. Master in-demand + languages like Python, JavaScript, and Java while building + real-world projects. Join our vibrant community of learners to + collaborate and grow together. Start your coding journey today + and unlock endless possibilities. +

+
+
+ +
+
+
+ +
-
+
-) + ); } -export default Introduction \ No newline at end of file +export default Introduction; diff --git a/src/components/Login.css b/src/components/Login.css deleted file mode 100644 index 9d5179b..0000000 --- a/src/components/Login.css +++ /dev/null @@ -1,190 +0,0 @@ -/* Container to center the card */ -.container { - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - background: linear-gradient(to bottom, #e0c8ff, #000000); - padding: 16px; - animation: fadeIn 1s ease-in-out; - } - - /* Basic card styling */ - .card { - width: 100%; - max-width: 400px; - margin: 0 auto; - padding: 20px; - border: 1px solid #ddd; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - background: #13072e; - transition: transform 0.3s ease, box-shadow 0.3s ease; - animation: slideIn 0.5s ease-in-out; - } - - .card:hover { - transform: translateY(-5px); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - } - - /* Card header styling */ - .card-header { - margin-bottom: 20px; - text-align: center; - } - - .logo { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 8px; - } - - .icon { - font-size: 32px; - margin-right: 8px; - } - - .card-title { - font-size: 24px; - font-weight: bold; - color: #333; - } - - .description { - font-size: 14px; - color: #ffffff; - } - - /* Card content styling */ - .card-content { - display: flex; - flex-direction: column; - } - - /* Form styling */ - .form { - display: flex; - flex-direction: column; - gap: 16px; - } - - .form-group { - display: flex; - flex-direction: column; - gap: 8px; - animation: fadeIn 1s ease-in-out; - } - - .form-label { - font-size: 14px; - font-weight: 500; - color: #333; - } - - .form-input { - padding: 10px; - border: 1px solid #ccc; - border-radius: 4px; - font-size: 14px; - transition: border-color 0.3s ease, box-shadow 0.3s ease; - } - - .form-input:focus { - border-color: #007bff; - box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); - outline: none; - } - - /* Error alert styling */ - .error-alert { - background-color: #f8d7da; - color: #721c24; - padding: 8px; - border-radius: 4px; - margin-top: 8px; - animation: shake 0.3s ease-in-out; - } - - /* Button styling */ - .login-button { - width: 100%; - padding: 12px; - background-color: #401291; - color: white; - font-size: 16px; - border: none; - border-radius: 4px; - cursor: pointer; - margin-top: 16px; - margin-bottom: 20px; - transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - align-items: center; - justify-content: center; - } - - .login-button:hover { - background-color: #e0c8ff; - color: #333; - transform: scale(1.05); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - } - - .login-button i { - margin-left: 8px; - } - - /* Signup link styling */ - .signup-link { - text-align: center; - margin-bottom: 20px; - margin-top: 60px; - font-size: 14px; - } - - .signup-link a { - color: #007bff; - text-decoration: none; - } - - .signup-link a:hover { - text-decoration: underline; - } - - /* Animations */ - @keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } - } - - @keyframes slideIn { - from { - transform: translateY(20px); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } - } - - @keyframes shake { - 0%, 100% { - transform: translateX(0); - } - 25% { - transform: translateX(-5px); - } - 50% { - transform: translateX(5px); - } - 75% { - transform: translateX(-5px); - } - } \ No newline at end of file diff --git a/src/components/Login.jsx b/src/components/Login.jsx index 7b83104..96bc7c4 100644 --- a/src/components/Login.jsx +++ b/src/components/Login.jsx @@ -1,16 +1,15 @@ -import React, { useState } from "react"; -import "./Login.css"; -import { Link } from "react-router-dom"; +import { useState } from "react"; +import "../styles/Login.css"; import { useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; -import {login} from "../services/operations/authAPI" +import { login } from "../services/operations/authAPI"; export default function LoginPage() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const navigate = useNavigate(); - const dispatch = useDispatch(); + const dispatch = useDispatch(); const handleSubmit = (e) => { e.preventDefault(); @@ -25,48 +24,48 @@ export default function LoginPage() { }; return ( -
-
-
-
- 🔒 +
+
+
+
+ 🔒

Login to CodeBook

-

+

Enter your credentials to access your account

-
+
-
- +
+ setEmail(e.target.value)} required />
-
- +
+ setPassword(e.target.value)} required />
- {error &&
{error}
} - -
- Don't have an account? Signup +
+ Don't have an account? Signup
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 6142db7..c65d5f3 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,4 @@ -import React, { useState } from "react"; -import { Link } from "react-router-dom"; +import { useState } from "react"; import Logo from "../assets/logo.png"; import ProgressBar from "./ProgressBar"; @@ -22,14 +21,22 @@ function Navbar() {
- Logo + + Logo +

Code Book

-
- +
+
-
+
  • Home @@ -45,27 +52,30 @@ function Navbar() {
- { - !user? (<> - ) : + + + ) : ( + - } + )}
- + ); } export default Navbar; - diff --git a/src/components/ProgressBar.jsx b/src/components/ProgressBar.jsx index 03bcee8..751af66 100644 --- a/src/components/ProgressBar.jsx +++ b/src/components/ProgressBar.jsx @@ -1,22 +1,22 @@ -import React, { useState, useEffect } from "react"; +import { useState, useEffect } from "react"; const ProgressBar = () => { const [scrollPercentage, setScrollPercentage] = useState(0); const handleScroll = () => { const scrollTop = window.scrollY; - const windowHeight = document.documentElement.scrollHeight - window.innerHeight; + const windowHeight = + document.documentElement.scrollHeight - window.innerHeight; const scrollProgress = (scrollTop / windowHeight) * 100; setScrollPercentage(scrollProgress); }; useEffect(() => { - window.addEventListener('scroll', handleScroll); + window.addEventListener("scroll", handleScroll); return () => { - window.removeEventListener('scroll', handleScroll); + window.removeEventListener("scroll", handleScroll); }; }, []); - return (
diff --git a/src/components/Signup.jsx b/src/components/Signup.jsx index a917cbf..5d65e7c 100644 --- a/src/components/Signup.jsx +++ b/src/components/Signup.jsx @@ -1,5 +1,5 @@ -import React, { useState } from "react"; -import "./Signup.css"; +import { useState } from "react"; +import "../styles/Signup.css"; import { Link } from "react-router-dom"; import { useNavigate } from "react-router-dom"; import { useDispatch } from "react-redux"; @@ -11,7 +11,7 @@ export default function SignupPage() { const [password, setPassword] = useState(""); const [error, setError] = useState(""); const navigate = useNavigate(); - const dispatch = useDispatch(); + const dispatch = useDispatch(); const handleSubmit = (e) => { e.preventDefault(); @@ -27,58 +27,58 @@ export default function SignupPage() { }; return ( -
-
-
-
- 🎓 +
+
+
+
+ 🎓

Join CodeBook

-

+

Create your account and start learning today!

-
+
-
- +
+ setName(e.target.value)} required />
-
- +
+ setEmail(e.target.value)} required />
-
- +
+ setPassword(e.target.value)} required />
- {error &&
{error}
} - -
- Already have an account? Log in +
+ Already have an account? Log in
diff --git a/src/components/Slideshow.jsx b/src/components/Slideshow.jsx index 372d1ce..4e560af 100644 --- a/src/components/Slideshow.jsx +++ b/src/components/Slideshow.jsx @@ -1,101 +1,9 @@ -import React, { useEffect, useRef, useState } from "react"; -import B1 from "../assets/B1.png"; -import G1 from "../assets/G1.png"; -import B2 from "../assets/B2.png"; -import G2 from "../assets/G2.png"; -import B3 from "../assets/B3.png"; -import G3 from "../assets/G3.png"; -import B4 from "../assets/B4.png"; -import G4 from "../assets/G4.png"; -import B5 from "../assets/B5.png"; -import G5 from "../assets/G5.png"; +import { useEffect, useRef, useState } from "react"; +import testimonials from "../data/testimonialData"; import TestimonialCard from "./TestimonialCard"; import "@fortawesome/fontawesome-free/css/all.min.css"; -const testimonials = [ - { - imgurl: B1, - description: - "This platform has revolutionized my coding journey. The content is clear, and the instructors are top-notch. I went from zero to hero in no time!", - name: "Rohan", - role: "Junior developer", - location: "India", - }, - { - imgurl: G1, - description: - "The projects provided are very practical and reflect real-world challenges. I now feel confident in my coding skills and ready to tackle professional projects.", - name: "Ananya Gupta", - role: "Web Developer", - location: "India", - }, - { - imgurl: B2, - description: - "A fantastic resource with a strong community. The mentors are always available to help and provide valuable feedback. My coding skills have improved tremendously.", - name: "Arjun Verma", - role: "Data Analyst", - location: "India", - }, - { - imgurl: G2, - description: - "Highly recommended! The lessons are well-structured and easy to follow. The platform has significantly boosted my confidence in coding.", - name: "Neha Desai", - role: "Software Engineer", - location: "India", - }, - { - imgurl: B3, - description: - "This platform offers a perfect blend of theory and practice. The hands-on projects are incredibly useful in understanding complex concepts.", - name: "Vikram Mehta", - role: "Full Stack Developer", - location: "India", - }, - { - imgurl: G3, - description: - "As a beginner, I found the courses easy to follow and very informative. The step-by-step approach helped me understand and apply coding concepts effectively.", - name: "Priya Singh", - role: "Student", - location: "India", - }, - { - imgurl: B4, - description: - "The mentors are highly knowledgeable and provide excellent guidance. The platform's community is very supportive and encouraging.", - name: "Rahul Patel", - role: "Backend Developer", - location: "India", - }, - { - imgurl: G4, - description: - "Great learning experience! The courses are comprehensive and cover a wide range of topics. The projects are challenging yet achievable.", - name: "Meera Kapoor", - role: "Frontend Developer", - location: "India", - }, - { - imgurl: B5, - description: - "The platform has exceeded my expectations. The quality of content and the level of detail in each course are outstanding.", - name: "Aman Reddy", - role: "Data Scientist", - location: "India", - }, - { - imgurl: G5, - description: - "Excellent platform for learning coding. The variety of courses and projects keep me engaged and motivated to learn more.", - name: "Riya Nair", - role: "UI/UX Designer", - location: "India", - }, -]; - function Slideshow() { const carouselref = useRef(); const btnNext = useRef(); @@ -155,43 +63,46 @@ function Slideshow() { }; return ( -
-
-

Why Choose Us??

-
-
- {testimonials.map((_, index) => ( - handleDotClick(index)} - > - ))} -
-
    - {testimonials.map((testimonial, index) => ( - - ))} -
-
- - -
+ <> +
+
+
+

Why Choose Us??

+
+
+ {testimonials.map((_, index) => ( + handleDotClick(index)} + > + ))} +
+
    + {testimonials.map((testimonial, index) => ( + + ))} +
+
+ + +
+
-
+ ); } diff --git a/src/components/TestimonialCard.jsx b/src/components/TestimonialCard.jsx index 974f15c..348dcc6 100644 --- a/src/components/TestimonialCard.jsx +++ b/src/components/TestimonialCard.jsx @@ -1,22 +1,28 @@ -import React from 'react' -import '@fortawesome/fontawesome-free/css/all.min.css'; +import "@fortawesome/fontawesome-free/css/all.min.css"; -function TestimonialCard({description,imgurl,name,role,location}) { -return ( -
  • -
    -
    - -

    {description}

    - image -
    -

    {name}

    -

    {role}, {location}

    -
    -
    -
    -
    • -) +function TestimonialCard({ description, imgurl, name, role, location }) { + return ( +
  • +
    +
    + +

    {description}

    + image +
    +

    {name}

    +

    + {role}, {location} +

    +
    +
    +
    +
    • + ); } -export default TestimonialCard \ No newline at end of file +export default TestimonialCard; diff --git a/src/components/index.jsx b/src/components/index.jsx index 9edd0bf..9e3eba6 100644 --- a/src/components/index.jsx +++ b/src/components/index.jsx @@ -7,7 +7,19 @@ import Introduction from "./Introduction"; import Navbar from "./Navbar"; import Slideshow from "./Slideshow"; import TestimonialCard from "./TestimonialCard"; -import Home from './Home'; +import Home from "./Home"; import ProgressBar from "./ProgressBar"; -import '@fortawesome/fontawesome-free/css/all.min.css'; -export {Card,Contact,CourseCards,Courses,Footer,Home,Introduction,Navbar,Slideshow,TestimonialCard}; \ No newline at end of file +import "@fortawesome/fontawesome-free/css/all.min.css"; +export { + Card, + Contact, + CourseCards, + Courses, + Footer, + Home, + Introduction, + Navbar, + Slideshow, + TestimonialCard, + ProgressBar, +}; diff --git a/src/components/logo.png b/src/components/logo.png deleted file mode 100644 index 6f493c6..0000000 Binary files a/src/components/logo.png and /dev/null differ diff --git a/src/data/courseData.js b/src/data/courseData.js new file mode 100644 index 0000000..ad8edb2 --- /dev/null +++ b/src/data/courseData.js @@ -0,0 +1,276 @@ +import next from "../assets/next.png"; +import react from "../assets/react.png"; +import php from "../assets/php.png"; +import swift from "../assets/swift.png"; +import go from "../assets/go.png"; +import ruby from "../assets/ruby.png"; +import node from "../assets/node.png"; +import python from "../assets/python.png"; +import HTML from "../assets/HTML.png"; +import kotlin from "../assets/kotlin.png"; +import java from "../assets/java.png"; +import Chash from "../assets/Chash.png"; +import CSS from "../assets/CSS.png"; +import CPP from "../assets/CPP.png"; +import JS from "../assets/JS.png"; +import c from "../assets/C.png"; +import groovy from "../assets/groovy.png"; +import assembly from "../assets/assembly.png"; +import dart from "../assets/dart.png"; +import elixir from "../assets/elixir.png"; +import fsharp from "../assets/fsharp.png"; +import haskell from "../assets/haskell.png"; +import lua from "../assets/lua.png"; +import objc from "../assets/objc.png"; +import perl from "../assets/perl.png"; +import prolog from "../assets/prolog.png"; +import R from "../assets/RL.png"; +import rust from "../assets/rust.png"; +import scala from "../assets/scala.png"; +import shell from "../assets/shell.png"; +import sql from "../assets/sql.png"; +import typescript from "../assets/typescript.png"; +import clojure from "../assets/clojure.png"; + +const courses = [ + { + imgurl: java, + coursename: "Java", + authorname: "Kunal Kushwaha", + ytlink: + "https://www.youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ", // Introduction to Java + gfgLink: "https://www.geeksforgeeks.org/java/", + }, + { + imgurl: c, + coursename: "C", + authorname: "College Wallah", + ytlink: + "https://www.youtube.com/playlist?list=PLxgZQoSe9cg1drBnejUaDD9GEJBGQ5hMt", // C Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/c-programming-language/", + }, + { + imgurl: CPP, + coursename: "C++", + authorname: "Codehelp", + ytlink: + "https://www.youtube.com/playlist?list=PLDzeHZWIZsTryvtXdMr6rPh4IDexB5NIA", // C++ Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/c-plus-plus/", + }, + { + imgurl: Chash, + coursename: "C#", + authorname: "Code with Harry", + ytlink: "https://www.youtube.com/watch?v=SuLiu5AK9Ps", // C# Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/csharp-programming-language/", + }, + { + imgurl: ruby, + coursename: "Ruby", + authorname: "Free Code Camp", + ytlink: "https://youtu.be/t_ispmWmdjY?si=cGPcXmH321aiCWEx", // Ruby Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/ruby/", + }, + { + imgurl: python, + coursename: "Python", + authorname: "Code with Harry", + ytlink: "https://youtu.be/UrsmFxEIp5k?si=MkQ8K4HxBO19sU23", // Python Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/python-programming-language/", + }, + { + imgurl: CSS, + coursename: "CSS", + authorname: "Free Code Camp", + ytlink: "https://www.youtube.com/watch?v=1Rs2ND1ryYc", // CSS Crash Course + gfgLink: "https://www.geeksforgeeks.org/css/", + }, + { + imgurl: go, + coursename: "Go", + authorname: "Alex Mux", + ytlink: "https://youtu.be/8uiZC0l4Ajw?si=QXJnV58ksxBxVRLP", // Go Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/go-programming-language/", + }, + { + imgurl: HTML, + coursename: "HTML", + authorname: "Apna College", + ytlink: "https://youtu.be/HcOc7P5BMi4?si=zw6ntozRp5KCo1M3", // HTML Crash Course + gfgLink: "https://www.geeksforgeeks.org/html/", + }, + { + imgurl: JS, + coursename: "JavaScript", + authorname: "KGCoding", + ytlink: "https://youtu.be/cpoXLj24BDY?si=09lg2YIRb7_bmQn1", // JavaScript Crash Course + gfgLink: "https://www.geeksforgeeks.org/javascript/", + }, + { + imgurl: kotlin, + coursename: "Kotlin", + authorname: "Free Code Camp", + ytlink: "https://youtu.be/F9UC9DY-vIU?si=CmdTnIKtAZlE-QrW", // Kotlin Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/kotlin-programming-language/", + }, + { + imgurl: node, + coursename: "Node.js", + authorname: "Programming with Mosh", + ytlink: "https://www.youtube.com/watch?v=TlB_eWDSMt4", // Node.js Crash Course + gfgLink: "https://www.geeksforgeeks.org/nodejs/", + }, + { + imgurl: swift, + coursename: "Swift", + authorname: "Free Code Camp", + ytlink: "https://youtu.be/comQ1-x2a1Q?si=PO3ITz3xy9Q2DjDf", // Swift Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/swift-programming-language/", + }, + { + imgurl: php, + coursename: "PHP", + authorname: "Free Code Camp", + ytlink: "https://www.youtube.com/watch?v=OK_JCtrrv-c", // PHP for Beginners + gfgLink: "https://www.geeksforgeeks.org/php/", + }, + { + imgurl: react, + coursename: "React.js", + authorname: "Aman Dhattarwal", + ytlink: "https://youtu.be/gY5sGvq-8h8?si=8XOL3vp2xWAmoXdr", // React Crash Course + gfgLink: "https://www.geeksforgeeks.org/reactjs/", + }, + { + imgurl: next, + coursename: "Next.js", + authorname: "Sangam Mukherjee", + ytlink: "https://youtu.be/mQnWCmVErnw?si=ZuYQ3BeAVEIJPU0Q", // Next.js Crash Course + gfgLink: "https://www.geeksforgeeks.org/nextjs/", + }, + { + imgurl: rust, + coursename: "Rust", + authorname: "Harkirat Singh", + ytlink: "https://youtu.be/qP7LzZqGh30?si=-1HbbjzodHaXBGHy", // Rust Programming Tutorial + gfgLink: + "https://www.geeksforgeeks.org/introduction-to-rust-programming-language/", + }, + { + imgurl: typescript, + coursename: "TypeScript", + authorname: "Hitesh Choudhary", + ytlink: "https://youtu.be/30LWjhZzg50?si=naSRPqBtHSYv3vKy", // TypeScript Crash Course + gfgLink: "https://www.geeksforgeeks.org/typescript/", + }, + { + imgurl: dart, + coursename: "Dart", + authorname: "Codemy", + ytlink: "https://youtu.be/JZukfxvc7Mc?si=TAWdsi8gKgvWEKqJ", // Dart Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/dart-tutorial/", + }, + { + imgurl: R, + coursename: "R", + authorname: "SimpliLearn", + ytlink: "https://youtu.be/KlsYCECWEWE?si=Zu-yLT59bosuyph4", // R Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/r-programming-language/", + }, + { + imgurl: sql, + coursename: "SQL", + authorname: "Apna College", + ytlink: "https://youtu.be/hlGoQC332VM?si=4fDRq-m2GGf21AjI", // SQL Tutorial for Beginners + gfgLink: "https://www.geeksforgeeks.org/sql-tutorial/", + }, + { + imgurl: scala, + coursename: "Scala", + authorname: "Telusko", + ytlink: "https://youtu.be/i9o70PMqMGY?si=iF1biDEtHzw2FFT9", // Scala Programming Tutorial + gfgLink: "https://www.geeksforgeeks.org/scala-programming-language/", + }, + { + imgurl: shell, + coursename: "Shell Scripting", + authorname: "Edureka", + ytlink: + "https://www.geeksforgeeks.org/introduction-linux-shell-shell-scripting/", // Shell Scripting Tutorial + }, + { + imgurl: groovy, + coursename: "Groovy", + authorname: "Awaix Mirza", + ytlink: "https://youtu.be/vDtENU-3Lwo?si=iGizt4rmeVZnpCe7", // Groovy Programming Tutorial + gfgLink: "https://www.tutorialspoint.com/groovy/index.htm", + }, + { + imgurl: assembly, + coursename: "Assembly", + authorname: "Free Code Camp", + ytlink: "https://youtu.be/gfmRrPjnEw4?si=GISmTpHqN25AbtPp", // Assembly Language Programming + gfgLink: + "https://www.tutorialspoint.com/assembly_programming/assembly_introduction.htm", + }, + { + imgurl: elixir, + coursename: "Elixir", + authorname: "Celeb Curry", + ytlink: "https://youtu.be/-lgtb-YSUWE?si=cx9lYEfhp-ouTGEh", // Elixir Programming Crash Course + gfgLink: "https://elixir-lang.org/", + }, + { + imgurl: fsharp, + coursename: "F#", + authorname: "Exercism", + ytlink: "https://youtu.be/AOF9njfbfnY?si=289yof6eRm1gWAGw", // F# Programming Tutorial + gfgLink: "https://fsharp.org/", + }, + { + imgurl: haskell, + coursename: "Haskell", + authorname: "Derek Banas", + ytlink: "https://youtu.be/02_H3LjqMr8?si=f9J-CAUxJ-ERPZq-", // Haskell Crash Course + gfgLink: "haskell.org", + }, + { + imgurl: lua, + coursename: "Lua", + authorname: "Steve Teacher", + ytlink: "https://youtu.be/1srFmjt1Ib0?si=f5Ft8ftiucKiPQc2", // Lua Programming Tutorial + gfgLink: "https://lua.org", + }, + { + imgurl: objc, + coursename: "Objective-C", + authorname: "Alex Paul", + ytlink: "https://youtu.be/2CPt99dnroQ?si=5gcqjPeW2YCo8Ahs", // Objective-C Crash Course + gfgLink: "https://objc.io", + }, + { + imgurl: perl, + coursename: "Perl", + authorname: "Derek Banas", + ytlink: "https://youtu.be/WEghIXs8F6c?si=IAUKdRzQCXlhjB3W", // Perl Programming Tutorial + gfgLink: "https://perl.org", + }, + { + imgurl: prolog, + coursename: "Prolog", + authorname: "Derek Banas", + ytlink: "https://youtu.be/SykxWpFwMGs?si=31iPLIB7BAGlehDm", // Prolog Programming Tutorial + gfgLink: "https://swi-prplog.org", + }, + { + imgurl: clojure, + coursename: "Clojure", + authorname: "Derek Banas", + ytlink: "https://youtu.be/ciGyHkDuPAE?si=Gr_vcXT3Usibp6-9", // Prolog Programming Tutorial + gfgLink: "https://clojure-doc.org/articles/tutorials/introduction/", + }, +]; + +export default function getCourses() { + return courses; +} diff --git a/src/data/testimonialData.js b/src/data/testimonialData.js new file mode 100644 index 0000000..3e71127 --- /dev/null +++ b/src/data/testimonialData.js @@ -0,0 +1,95 @@ +import B1 from "../assets/B1.png"; +import G1 from "../assets/G1.png"; +import B2 from "../assets/B2.png"; +import G2 from "../assets/G2.png"; +import B3 from "../assets/B3.png"; +import G3 from "../assets/G3.png"; +import B4 from "../assets/B4.png"; +import G4 from "../assets/G4.png"; +import B5 from "../assets/B5.png"; +import G5 from "../assets/G5.png"; + +const testimonials = [ + { + imgurl: B1, + description: + "This platform has revolutionized my coding journey. The content is clear, and the instructors are top-notch. I went from zero to hero in no time!", + name: "Rohan", + role: "Junior developer", + location: "India", + }, + { + imgurl: G1, + description: + "The projects provided are very practical and reflect real-world challenges. I now feel confident in my coding skills and ready to tackle professional projects.", + name: "Ananya Gupta", + role: "Web Developer", + location: "India", + }, + { + imgurl: B2, + description: + "A fantastic resource with a strong community. The mentors are always available to help and provide valuable feedback. My coding skills have improved tremendously.", + name: "Arjun Verma", + role: "Data Analyst", + location: "India", + }, + { + imgurl: G2, + description: + "Highly recommended! The lessons are well-structured and easy to follow. The platform has significantly boosted my confidence in coding.", + name: "Neha Desai", + role: "Software Engineer", + location: "India", + }, + { + imgurl: B3, + description: + "This platform offers a perfect blend of theory and practice. The hands-on projects are incredibly useful in understanding complex concepts.", + name: "Vikram Mehta", + role: "Full Stack Developer", + location: "India", + }, + { + imgurl: G3, + description: + "As a beginner, I found the courses easy to follow and very informative. The step-by-step approach helped me understand and apply coding concepts effectively.", + name: "Priya Singh", + role: "Student", + location: "India", + }, + { + imgurl: B4, + description: + "The mentors are highly knowledgeable and provide excellent guidance. The platform's community is very supportive and encouraging.", + name: "Rahul Patel", + role: "Backend Developer", + location: "India", + }, + { + imgurl: G4, + description: + "Great learning experience! The courses are comprehensive and cover a wide range of topics. The projects are challenging yet achievable.", + name: "Meera Kapoor", + role: "Frontend Developer", + location: "India", + }, + { + imgurl: B5, + description: + "The platform has exceeded my expectations. The quality of content and the level of detail in each course are outstanding.", + name: "Aman Reddy", + role: "Data Scientist", + location: "India", + }, + { + imgurl: G5, + description: + "Excellent platform for learning coding. The variety of courses and projects keep me engaged and motivated to learn more.", + name: "Riya Nair", + role: "UI/UX Designer", + location: "India", + }, +]; + +export default testimonials; diff --git a/src/main.jsx b/src/main.jsx index d3f4d00..f1937ae 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,21 +1,21 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import App from './App.jsx' -import './index.css' -import { Provider } from 'react-redux' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App.jsx"; +import "./index.css"; +import { Provider } from "react-redux"; import rootReducer from "./reducer"; import { configureStore } from "@reduxjs/toolkit"; import { Toaster } from "react-hot-toast"; const store = configureStore({ - reducer: rootReducer, + reducer: rootReducer, }); createRoot(document.getElementById("root")).render( - - - - - - + + + + + + ); diff --git a/src/styles/Login.css b/src/styles/Login.css new file mode 100644 index 0000000..8bf88da --- /dev/null +++ b/src/styles/Login.css @@ -0,0 +1,192 @@ +/* Container to center the card */ +.container { + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(to bottom, #e0c8ff, #000000); + padding: 16px; + animation: fadeIn 1s ease-in-out; +} + +/* Basic card styling */ +.card { + width: 100%; + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + background: #13072e; + transition: transform 0.3s ease, box-shadow 0.3s ease; + animation: slideIn 0.5s ease-in-out; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Card header styling */ +.card-header { + margin-bottom: 20px; + text-align: center; +} + +.logo { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 8px; +} + +.icon { + font-size: 32px; + margin-right: 8px; +} + +.card-title { + font-size: 24px; + font-weight: bold; + color: #333; +} + +.description { + font-size: 14px; + color: #ffffff; +} + +/* Card content styling */ +.card-content { + display: flex; + flex-direction: column; +} + +/* Form styling */ +.form { + display: flex; + flex-direction: column; + gap: 16px; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 8px; + animation: fadeIn 1s ease-in-out; +} + +.form-label { + font-size: 14px; + font-weight: 500; + color: #333; +} + +.form-input { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 14px; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-input:focus { + border-color: #007bff; + box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); + outline: none; +} + +/* Error alert styling */ +.error-alert { + background-color: #f8d7da; + color: #721c24; + padding: 8px; + border-radius: 4px; + margin-top: 8px; + animation: shake 0.3s ease-in-out; +} + +/* Button styling */ +.login-button { + width: 100%; + padding: 12px; + background-color: #401291; + color: white; + font-size: 16px; + border: none; + border-radius: 4px; + cursor: pointer; + margin-top: 16px; + margin-bottom: 20px; + transition: background-color 0.3s ease, transform 0.3s ease, + box-shadow 0.3s ease; + display: flex; + align-items: center; + justify-content: center; +} + +.login-button:hover { + background-color: #e0c8ff; + color: #333; + transform: scale(1.05); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.login-button i { + margin-left: 8px; +} + +/* Signup link styling */ +.signup-link { + text-align: center; + margin-bottom: 20px; + margin-top: 60px; + font-size: 14px; +} + +.signup-link a { + color: #007bff; + text-decoration: none; +} + +.signup-link a:hover { + text-decoration: underline; +} + +/* Animations */ +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes slideIn { + from { + transform: translateY(20px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes shake { + 0%, + 100% { + transform: translateX(0); + } + 25% { + transform: translateX(-5px); + } + 50% { + transform: translateX(5px); + } + 75% { + transform: translateX(-5px); + } +} diff --git a/src/components/Signup.css b/src/styles/Signup.css similarity index 100% rename from src/components/Signup.css rename to src/styles/Signup.css