diff --git a/package-lock.json b/package-lock.json index b52eabf..f56f5e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,8 @@ "react": "^18", "react-dom": "^18", "react-icons": "^5.1.0", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1", "typewriter-effect": "^2.21.0", "web-vitals": "^3.5.2" }, @@ -4682,6 +4684,11 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -4862,6 +4869,11 @@ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -5243,6 +5255,12 @@ "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==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -5253,6 +5271,14 @@ "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/legacy-swc-helpers": { "name": "@swc/helpers", "version": "0.4.14", @@ -5911,6 +5937,22 @@ } } }, + "node_modules/react-slick": { + "version": "0.30.2", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz", + "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", @@ -5973,6 +6015,11 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -6087,6 +6134,14 @@ "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", @@ -6111,6 +6166,11 @@ "node": ">=10.0.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", diff --git a/package.json b/package.json index 621350a..b284960 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,6 @@ "lint": "next lint" }, "dependencies": { - "next": "14.2.3", - "react": "^18", - "react-dom": "^18", "@chakra-ui/icons": "^2.1.1", "@chakra-ui/next-js": "^2.2.0", "@chakra-ui/react": "^2.8.2", @@ -19,7 +16,12 @@ "@emotion/styled": "^11.11.5", "@nextui-org/react": "^2.3.6", "framer-motion": "^11.1.7", + "next": "14.2.3", + "react": "^18", + "react-dom": "^18", "react-icons": "^5.1.0", + "react-slick": "^0.30.2", + "slick-carousel": "^1.8.1", "typewriter-effect": "^2.21.0", "web-vitals": "^3.5.2" }, diff --git a/public/grid.png b/public/grid.png new file mode 100644 index 0000000..63a7e2e Binary files /dev/null and b/public/grid.png differ diff --git a/public/gridwhole.png b/public/gridwhole.png new file mode 100644 index 0000000..1c68c01 Binary files /dev/null and b/public/gridwhole.png differ diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx index 4f761c0..715a2ee 100644 --- a/src/Components/Footer/Footer.jsx +++ b/src/Components/Footer/Footer.jsx @@ -1,49 +1,49 @@ import React from "react"; -import { FaInstagram } from "react-icons/fa6"; -import { FaLinkedin } from "react-icons/fa"; -import { FaYoutube } from "react-icons/fa6"; -import { FaSquareXTwitter } from "react-icons/fa6"; -import Link from "next/link"; -import smily from "../../imgs/smily.png" -import Logo from "../../imgs/logos/Group 122.359fbdf94648632fa2326ddddf001f55.svg" import Image from "next/image"; -export default function Footer(){ - - - - return( -
-
- -
-
-

At Leadlly, we believe every student has the potential to excel. We're a passionate team dedicated to helping school-going students reach their academic goals through a unique blend of technology and personalized mentorship.

+import logo from "../.././app/assets/logo.png"; + +export default function Footer() { + return ( + <> +
+
+ +
- ) - -} +
+ + ) +} \ No newline at end of file diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx index 582d93a..787a303 100644 --- a/src/Components/Navbar/Navbar.jsx +++ b/src/Components/Navbar/Navbar.jsx @@ -1,8 +1,8 @@ -"use client" +"use client"; import React from "react"; import Link from "next/link"; import logo2 from "./../../imgs/logos/Group 122.svg"; -import logo from "../../imgs/logos/logo1.png" +import logo from "../../imgs/logos/logo1.png"; import Image from "next/image"; import { Box, @@ -18,8 +18,6 @@ import { IconButton, Hide, Divider, - - } from "@chakra-ui/react"; import { MoonIcon, @@ -29,121 +27,125 @@ import { AddIcon, } from "@chakra-ui/icons"; -import "./Navbar.css" -import { Navbar as Navbar_} from "@nextui-org/react"; - -import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem} from "@nextui-org/react"; +import "./Navbar.css"; +import { Navbar as Navbar_ } from "@nextui-org/react"; +import { + Dropdown, + DropdownTrigger, + DropdownMenu, + DropdownItem, +} from "@nextui-org/react"; export default function Navbar() { const { colorMode, toggleColorMode } = useColorMode(); const { isOpen, onOpen, onClose } = useDisclosure(); - - return ( ); diff --git a/src/app/About/About.css b/src/app/About/About.css new file mode 100644 index 0000000..2634552 --- /dev/null +++ b/src/app/About/About.css @@ -0,0 +1,741 @@ +.about_p { + border-radius: 20px; + border: 1.5px solid #5a10d960; + background-color: #f9f5ff; + font-size: 1.25rem; + font-weight: 400; + line-height: 2rem; + } + + @media (max-width: 640px) { + .about_p { + font-size: 1.2rem; + line-height: 2.5rem; + } + .about-left { + margin-right: 1rem !important; + } + } + .mission { + width: 60vw; + } + + .top_image { + max-height: 80vh; + max-width: 100%; + } + + .about-left { + display: flex; + align-items: center; + } + + .features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, auto); + gap: 20px; + padding: 20px; + max-width: 1200px; + margin: 0 auto; + } + + .feature-item { + background-color: #eee4fb; + border: 1px solid #ddd; + border-radius: 40px; + box-shadow: 0px 0px 2.44px 0.45px #5a10d985; + text-align: center; + } + + .feature-item h2 { + font-size: 1.5em; + margin-bottom: 10px; + text-align: start; + color: #000000; + padding: 20px 0px 0px 20px; + } + + .feature-item p { + font-size: 1em; + margin-bottom: 20px; + text-align: start; + color: #000000; + padding: 0px 0px 0px 20px; + } + + .feature-item img { + max-width: 100%; + height: auto; + border-radius: 40px; + } + .growth1 { + width: 50%; + height: auto; + } + .workshop { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .workshop-images { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + } + + .workshop-text { + width: 8.5rem; + margin-top: 10rem; + text-align: start; + margin-left: 1rem; + } + + .workshop-text p { + width: 22rem; + } + + .workshop1 { + width: 50%; + height: auto; + border-radius: 10px; + } + .planner { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .planner-images { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; + } + + .planner1 { + width: 50%; + height: auto; + margin-bottom: 9rem; + } + + .plan { + width: 8.5rem; + margin-top: 10rem; + text-align: start; + margin-left: 1rem; + } + + .plan p { + width: 22rem; + } + + .planner2 { + width: 50%; + height: auto; + border-radius: 10px; + } + .more-coming h2 { + margin-top: 2rem; + } + + .more-coming h2 { + margin-top: 2rem; + } + .library h2 { + margin-top: 5rem; + } + + .growth-meter { + display: flex; + flex-direction: row; + } + + .growth-meter-images { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 100%; + } + + .growth { + margin-top: 4rem; + text-align: start; + margin-left: 2rem; + } + + .growth1 { + width: 100%; + height: auto; + } + + .growth2 { + width: 100%; + height: auto; + } + + .workshop-images { + width: 50%; + margin-bottom: 5.7rem; + } + + .workshop-text { + margin-top: 0rem; + text-align: start; + margin-left: 2rem; + } + + .workshop-text p { + width: 20rem; + } + .revision p{ + margin-bottom: 5rem; + } + .workshop1 { + width: 100%; + height: auto; + margin-left: auto; + } + + .dashboard { + grid-column: span 1/2; + grid-row: span 2; + } + + .planner { + grid-column: span 2; + grid-row: span 1; + } + + .quizzes { + grid-column: span 1; + grid-row: span 1; + } + .workshop { + grid-column: span 2; + grid-row: span 1; + } + + .error-book { + grid-column: span 1; + grid-row: span 1; + } + + .revision { + grid-column: span 1/2; + grid-row: span 2; + } + + .growth-meter { + grid-column: span 2; + grid-row: span 1; + } + + .library { + grid-column: span 1; + grid-row: span 1; + } + + .team { + width: 60%; + border-radius: 40px; + background-color: #cfb0fa54; + text-align: start; + padding: 32px 36px 36px 36px; + border: 1.5px solid #cfb0fa; + } + + @media (max-width: 1024px) { + .dashboard p { + margin-bottom: 2.5rem; + } + .revision p { + margin-bottom: 8rem !important; + } + .plan { + margin-top: 5rem !important; + } + .plan p { + width: 11rem !important; + } + .workshop-text p { + width: 18rem; + } + .workshop-images { + width: 60%; + margin-bottom: 5rem !important; + } + + .library h2 { + margin-top: 5rem !important; + } + } + + @media (max-width: 820px) { + .plan { + width: 8rem; + margin-top: 1rem; + } + .plan p { + width: 15rem; + } + .dashboard p { + margin-bottom: 5rem !important; + } + .growth p { + width: 12rem; + } + .library h2 { + margin-top: 3rem !important; + } + .workshop-text { + margin-top: 0rem; + } + .revision p { + margin-bottom: 4rem; + } + .workshop-text p { + width: 15rem; + } + + .study-room p { + font-size: 0.9rem; + } + .more-coming h2 { + margin-top: 0; + } + } + + @media (max-width: 768px) { + .plan { + width: 7rem; + margin-top: 1rem; + font-size: 0.9rem; + } + .plan p { + width: 9rem; + } + .dashboard p { + margin-bottom: 3.2rem !important; + } + .growth { + margin-top: 1rem; + } + .growth-meter p { + width: 9rem; + font-size: 0.9rem; + } + .library h2 { + margin-top: 3rem; + } + .workshop-text { + margin-top: 0.9rem; + } + .workshop-text p { + width: 9rem !important; + } + .more-coming h2{ + margin-top: 0; + } + .study-room p{ + font-size: 0.9rem; + } + .mission { + width: 80vw; + } + } + + + @media (max-width: 540px) { + .features-grid { + gap: 10px; + } + .feature-item { + border-radius: 20px; + } + .feature-item h2 { + font-size: 1rem; + } + .feature-item p { + font-size: 0.8rem; + } + .plan h2 { + margin-top: 0; + } + + .feature-item img { + border-radius: 15px; + } + .dashboard p { + margin-bottom: 4rem !important; + } + .plan { + margin-left: 0rem !important; + width: 8rem; + margin-top: 0 !important; + font-size: 0.9rem; + } + .plan p { + width: 7rem !important; + font-size: 0.6rem; + } + .planner-images{ + flex-direction: column; + justify-content: space-between; + } + .planner2{ + margin-left: 6.8rem; + } + .planner1{ + margin-bottom: 5.9rem; + margin-left: 3rem; + } + .quizzes p{ + font-size: 0.5rem !important; + } + .error-book p{ + font-size: 0.5rem ; + } + .growth { + margin-top: 1.5rem; + margin-left: 0.3rem !important; + width: 6rem !important; + } + .growth-meter h2 { + font-size: 1rem; + } + .growth-meter p { + width: 5rem; + font-size: 0.6rem; + } + .library h2 { + margin-top: 1rem !important; + } + .workshop-text { + margin-left: 0.1rem; + } + + .workshop-text p { + font-size: 0.6rem !important; + width: 5.9rem; + } + .more-coming h2 { + /* margin-top: 0.2rem; */ + font-size: 0.9rem !important; + } + .more-coming p { + font-size: 0.6rem !important; + } + .study-room p { + font-size: 0.6rem !important; + } + .revision p { + margin-bottom: 1.3rem !important; + font-size: 0.5rem !important; + } + .team{ + width: 90%; + } + } + + @media (max-width: 430px) { + .about-left{ + margin-right: 1rem !important; + } + .about_p { + font-size: 0.9rem !important; + } + .mission { + width: 100vw; + } + .features-grid { + gap: 10px; + } + .feature-item { + border-radius: 15px; + } + .feature-item h2 { + font-size: 0.9rem; + } + .feature-item p { + font-size: 0.6rem; + } + .dashboard p { + margin-bottom: 6.2rem !important; + font-size: 0.5rem; + } + + .plan { + margin-left: 0rem !important; + width: 8rem; + margin-top: 0 !important; + font-size: 0.9rem; + } + .plan p { + width: 7rem !important; + font-size: 0.5rem; + } + .planner-images{ + flex-direction: column; + justify-content: space-between; + } + .planner2{ + margin-left: 4.6rem; + } + .planner1{ + margin-bottom: 4.2rem; + margin-left: 3rem; + } + .quizzes h2 { + font-size: 0.7rem !important; + } + .quizzes p { + font-size: 0.4rem !important; + } + .error-book h2 { + font-size: 0.7rem !important; + } + .error-book p { + font-size: 0.4rem !important; + } + .growth { + margin-top: 0rem; + margin-left: 0rem !important; + width: 6rem !important; + } + .growth-meter h2 { + font-size: 0.7rem; + margin-top: 2rem; + } + + .growth-meter p { + font-size: 0.5rem; + } + .growth1{ + width: 100%; + } + .growth2{ + width: 100%; + } + .workshop-text { + margin-left: 0.1rem; + } + .workshop-text h2{ + font-size: 0.8rem; + } + + .workshop-text p { + font-size: 0.5rem !important; + width: 5.9rem; + } + .more-coming h2 { + font-size: 0.9rem !important; + } + .more-coming p { + font-size: 0.6rem !important; + } + .study-room p { + font-size: 0.6rem !important; + } + .more-coming h2{ + font-size: 0.8rem !important; + } + .study-room h2{ + font-size: 0.8rem !important; + } + .revision h2{ + font-size: 0.8rem !important; + } + .revision p { + font-size: 0.4rem !important; + } + } + @media (min-width: 412px) and (max-width: 414px) { + .dashboard p{ + margin-bottom: 6.8rem !important; + font-size: 0.5rem; + } + .plan { + margin-left: 0rem !important; + width: 7rem; + margin-top: 0 !important; + font-size: 0.8rem; + } + .plan p { + width: 7rem !important; + font-size: 0.5rem !important; + } + .planner2{ + margin-left: 4.6rem; + } + .planner1{ + margin-bottom: 5.2rem; + margin-left: 3rem; + } + + + } + @media (max-width: 360px) { + .plan p { + width: 6rem !important; + font-size: 0.5rem; + } + .growth h2 { + width: 5rem !important; + margin-top: 3rem; + margin-bottom: 0px; + padding-top: 0px; + } + .library p{ + font-size: 0.5rem; + } + .growth1{ + width: 100vw; + } + .growth2{ + width: 100vw; + } + .workshop-text{ + width: 6rem; + } + .workshop-images{ + margin-bottom: 13rem !important; + } + .more-coming p{ + font-size: 0.3rem; + } + } + @media (max-width: 390px) { + .planner2{ + margin-left: 3.6rem !important; + } + .planner1{ + margin-bottom: 4.2rem; + margin-left: 3rem; + } + .growth { + width: 4rem !important; + } + .revision h2{ + margin-top: 0.3rem; + } + .revision p{ + font-size: 0.5rem !important; + } + .workshop-images{ + width: 100%; + margin-bottom: 14.2rem !important; + } + .workshop-text p { + font-size: 0.5rem !important; + width: 9.4rem !important; + } + .workshop-text h2{ + margin-top: 0.8rem !important; + } + .more-coming p{ + font-size: 0.5rem !important; + } + + .more-coming h2{ + padding-top: 2px !important; + margin-top: 0; + } + .study-room h2{ + padding-top: 2px !important; + margin: 0; + } + } + @media (max-width: 344px) { + + .growth { + margin-top: 1rem !important; + } + .revision p{ + font-size: 0.6rem !important; + } + .workshop-images{ + margin-bottom: 16rem !important; + } + } + @media (max-width: 853px) { + .dashboard p{ + margin-bottom: 4rem !important; + } + .workshop-images{ + margin-bottom: 5.8rem !important; + } + + } + @media (max-width: 375px){ + .dashboard p { + margin-bottom: 6rem !important; + font-size: 0.4rem; + } + .growth{ + width: 3rem !important; + margin: 0; + } + .growth h2{ + font-size: 0.5rem !important; + + } + .growth-meter p{ + width: 2rem !important; + font-size: 0.5rem; + } + .planner2{ + margin-left: 4rem !important; + margin: auto; + } + .library p{ + font-size: 0.5rem; + } + .revision p { + margin-bottom: 10rem !important; + } + .more-coming h2{ + font-size: 0.6rem !important; + margin: 0; + } + .more-coming p{ + font-size: 0.4rem !important; + } + } + @media (max-width: 414px){ + .planner2{ + margin-left: 4.2rem !important; + } + } + @media (max-width: 375px) { + .planner2{ + margin-left: 3.5rem !important; + margin-top: 1.5rem !important; + } + .growth-meter p{ + width: 5rem !important; + } + } + @media (max-width: 912px) { + + .growth-meter p{ + width: 14rem !important; + } + .workshop-text p{ + width: 10rem; + } + .revision p{ + margin-bottom: 9.2rem !important; + } + .more-coming h2{ + margin-top: 0rem; + } + .study-room p { + font-size: 1rem; + } + } + \ No newline at end of file diff --git a/src/app/About/Different.jsx b/src/app/About/Different.jsx new file mode 100644 index 0000000..5a6b24e --- /dev/null +++ b/src/app/About/Different.jsx @@ -0,0 +1,108 @@ +import { Heading } from "@chakra-ui/react"; +import Image from "next/image"; +import React from "react"; +import dashboard from "../assets/about/dashboard.png"; +import planner1 from "../assets/about/planner1.png"; +import planner2 from "../assets/about/planner2.png"; +import growth1 from "../assets/about/growth1.png" +import growth2 from "../assets/about/growth2.png" +import revision from "../assets/about/revision.png" +import workshop from "../assets/about/workshop.png" +import "./About.css" +export const Different = () => { + return ( +
+
+ + + How are we + +
+ Diffferent? + +
+ +
+
+

Dashboard

+

It provides an overview of courses, progress, performance metrics, tasks, notifications, resources, and communication tools.

+ Dashboard +
+
+
+

Planner

+

It helps organize study schedules, topics that need to be covered.

+
+
+ Planner 1 + Planner 2 +
+
+
+

Quizzes

+

It will monitor progress, pinpoint areas needing improvement, and strategically allocate your revision time.

+
+
+

Error Book

+

It will help you identify and overcome pitfalls specific to your learning style and subject matter.

+
+
+
+

Growth Meter

+

Track your grades, identify areas where you've excelled, and witness your academic progress unfold throughout the year.

+
+
+ Growth Meter 1 + Growth Meter 2 +
+
+
+

Library

+

It provides access to educational resources, such as e-books, articles, and videos, for research and study.

+
+ +
+

Revision Tracker

+

It will monitor progress, pinpoint areas needing improvement, and strategically allocate your revision time.

+ Dashboard +
+
+
+

Workshop

+

Develop critical thinking skills, master problem-solving strategies, and discover effective study methods.

+
+
+ Planner 1 + +
+
+
+

More coming soon

+

We are currently doing lots of interviews to make this platform more helpful.

+
+
+

Study Room

+

Mentors will provide you guidance, answer your doubts, offer subject-specific support, and motivate you like your sibling.

+
+ + +
+
+ ); +}; diff --git a/src/app/About/page.jsx b/src/app/About/page.jsx index 433bd79..bfa5ec9 100644 --- a/src/app/About/page.jsx +++ b/src/app/About/page.jsx @@ -1,124 +1,95 @@ -import React from 'react' -import features from "../../imgs/features.svg" -import teamwork from '../../imgs/teamwork.svg' -import explaination from '../../imgs/explaination.png' -import holding_hand from '../../imgs/holding_hand.png' -import object1 from '../../imgs/object1.png' -import Image from 'next/image' +import Image from "next/image"; +import React from "react"; +import about from "../assets/about/about-top.png"; +import { Heading } from "@chakra-ui/react"; +import mission from "../assets/about/mission.png"; +import { Different } from "./Different"; +import "./About.css" export default function About() { return ( -<> - -
- - - -
-
At Leadlly, we're revolutionizing student success. We believe every student possesses the potential to excel, and our mission is to bridge the gap between that potential and academic achievement. We do this through a unique blend of cutting-edge technology, personalized mentorship from recent toppers, and a focus on developing essential intellectual skills.
- -
Our Mission: "To empower students with a holistic learning experience that cultivates academic success, intellectual growth, and a resilient mindset." + <> +
+
+
+

+ At Leadlly, we're revolutionizing student success. We believe every student possesses the potential to excel, and our mission is to bridge the gap between that potential and academic achievement. We do this through a unique blend of cutting-edge technology, personalized mentorship from recent toppers, and a focus on developing essential intellectual skills. +

+
+
+ about +
+
-
-
- -
- - - - -
-

What Sets us Apart


-

Seamless Tech Integration:
Ditch the bulky binders and scattered notes! Our interactive planners keep you organized, focused, and in control of your academic journey. Set personalized goals, efficiently track assignments, and access a treasure trove of valuable learning materials – all within one user-friendly, digital hub.

-Growth Meter: Visualize Your Success:
Celebrate your achievements and stay motivated with our interactive growth meter. Track your grades, identify areas where you've excelled, and witness your academic progress unfold throughout the year.

-Strategic Revision Tools:
Don't waste time revising aimlessly. Our revision tracker helps you monitor progress, pinpoint areas needing improvement, and strategically allocate your revision time for maximum effectiveness.

-Your Big Brother/Sister in Learning: Personalized Mentorship:
 Get matched with a dedicated mentor – a recent topper who's been through it all! They'll provide invaluable guidance, answer your questions, offer subject-specific support, and motivate you just like a trusted older sibling.

-Learn from Your Mistakes: Interactive Error Book:
 Go beyond rote memorization. Our interactive error book helps you identify and overcome common pitfalls specific to your learning style and subject matter. This personalized guide ensures you avoid repeating past mistakes and maximize your understanding.

-Sharpen Your Thinking: Intellectual Techniques Workshops:
 We empower you beyond content knowledge. Our engaging workshops equip you with essential intellectual techniques crucial for academic success and lifelong learning. Develop critical thinking skills, master problem-solving strategies, and discover effective study methods. These workshops unlock your true potential to approach learning strategically, independently, and with confidence.

- +
+
+ + + Our + +
+ Mission! +
-
-
- - - -
-
-
-

Why Choose Leadlly

-

Expert-Curated Content:
Gain access to a comprehensive library of learning materials, meticulously curated by subject matter experts, packed with valuable study tips and exam strategies.
- Prioritizing Student Well-being:
We understand the pressure students face. Our platform promotes healthy habits and provides resources to help you combat stress and maintain a positive mindset for optimal learning.
- Supportive Community:
Connect with fellow students, share experiences, motivate each other on your academic journey, and build a network of like-minded individuals.
-

- +
+ mission
- -
- -
- -
-

The Leadlly Team:

-

- -We're a diverse team of passionate educators, technologists, and student success advocates. We believe in the power of education to transform lives, and we're driven by the desire to empower students, unlock their potential, and help them not just achieve academic success but also develop the intellectual skills and well-being to thrive in the ever-evolving world

- + + + +
+
+ + + The Leadlly + +
+ Team +
-
-
- - -{/* phone */} -
- -
-

What Sets us Apart


-

Seamless Tech Integration:
Ditch the bulky binders and scattered notes! Our interactive planners keep you organized, focused, and in control of your academic journey. Set personalized goals, efficiently track assignments, and access a treasure trove of valuable learning materials – all within one user-friendly, digital hub.

-Growth Meter: Visualize Your Success:
Celebrate your achievements and stay motivated with our interactive growth meter. Track your grades, identify areas where you've excelled, and witness your academic progress unfold throughout the year.

-Strategic Revision Tools:
Don't waste time revising aimlessly. Our revision tracker helps you monitor progress, pinpoint areas needing improvement, and strategically allocate your revision time for maximum effectiveness.

-Your Big Brother/Sister in Learning: Personalized Mentorship:
 Get matched with a dedicated mentor – a recent topper who's been through it all! They'll provide invaluable guidance, answer your questions, offer subject-specific support, and motivate you just like a trusted older sibling.

-Learn from Your Mistakes: Interactive Error Book:
 Go beyond rote memorization. Our interactive error book helps you identify and overcome common pitfalls specific to your learning style and subject matter. This personalized guide ensures you avoid repeating past mistakes and maximize your understanding.

-Sharpen Your Thinking: Intellectual Techniques Workshops:
 We empower you beyond content knowledge. Our engaging workshops equip you with essential intellectual techniques crucial for academic success and lifelong learning. Develop critical thinking skills, master problem-solving strategies, and discover effective study methods. These workshops unlock your true potential to approach learning strategically, independently, and with confidence.

- -
-
- - - - -
- -
-

Why Choose Leadlly

-

Expert-Curated Content:
Gain access to a comprehensive library of learning materials, meticulously curated by subject matter experts, packed with valuable study tips and exam strategies.
- Prioritizing Student Well-being:
We understand the pressure students face. Our platform promotes healthy habits and provides resources to help you combat stress and maintain a positive mindset for optimal learning.
- Supportive Community:
Connect with fellow students, share experiences, motivate each other on your academic journey, and build a network of like-minded individuals.
-

- +
+

+ Our group of passionate educators, technologists, and supporters of + student achievement believes education can significantly impact + people's lives, working tirelessly to help students reach their full + potential. +

-
- -
- -
- -
-

The Leadlly Team:

-

- -We're a diverse team of passionate educators, technologists, and student success advocates. We believe in the power of education to transform lives, and we're driven by the desire to empower students, unlock their potential, and help them not just achieve academic success but also develop the intellectual skills and well-being to thrive in the ever-evolving world

- -
-
-
- - -
- - - - - ) + + + ); } diff --git a/src/app/Courses/page.jsx b/src/app/Courses/page.jsx index 502cf37..37ecec0 100644 --- a/src/app/Courses/page.jsx +++ b/src/app/Courses/page.jsx @@ -7,4 +7,4 @@ export default function Courses() {
) -} +} \ No newline at end of file diff --git a/src/app/Pages/Home.css b/src/app/Pages/Home.css new file mode 100644 index 0000000..ebf37bc --- /dev/null +++ b/src/app/Pages/Home.css @@ -0,0 +1,223 @@ + +@media (min-width: 250px) and (max-width: 540px) { + .solution { + width: 100vw; + } + .problem { + width: 100vw; + } + .solution-button { + width: 40vw; + padding: 0.3rem; + font-size: 0.9rem; + } + .contact-button { + margin: 0 !important; + width: 80vw !important; + font-size: 1rem !important; + } + .card-container { + padding: 0.5rem; + width: 100% !important; + height: 40vh !important; + } + .card { + margin: 0 !important; + } + .contact { + margin-left: 0 !important; + } + } + @media (min-width: 540px) and (max-width: 768px) { + .contact-button { + width: 40vw !important; + font-size: 0.9rem !important; + margin: 0 !important; + width: 50% !important; + height: 45vh !important; + } + .card { + margin: 0 !important; + } + .contact { + margin-left: 0 !important; + } + } + @media (min-width: 768px) and (max-width: 1024px) { + .solution { + width: 70vw; + } + .contact-button { + width: 40vw !important; + font-size: 0.9rem !important; + } + .card-container { + padding: 0.5rem; + width: 50% !important; + height: 30vh !important; + } + .card { + margin-left: 0rem !important; + } + .contact { + margin-left: 0rem !important; + } + .problem { + width: 180vw; + } + .gradient-text { + font-weight: 800; + } + .solution-button { + width: 25vw; + padding: 0.3rem; + } + .hero-button { + width: 40vw !important; + padding: 0.5rem; + font: 18px; + } + } + .solution { + width: 50vw; + } + .problem { + width: 50vw; + } + + .contact-us-container { + display: flex; + flex-direction: row; + align-items: center; + padding: 0rem 20rem 10rem 20rem; + border-radius: 20px; + width: 100%; + } + .contact-us { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + border-radius: 20px; + width: 80%; + } + + .contact-us-card { + background-color: #eee4fb; + border-radius: 50px; + padding: 22px; + max-width: 800px; + display: flex; + flex-direction: column; + /* justify-content: space-between; */ + width: 70%; + height: 40vh; + } + .rectangle { + width: 40%; + height: 20%; + background-color: #ffffff; + } + .contact-us-card h2 { + font-size: 34px; + font-weight: bold; + padding-bottom: 1rem; + } + + .underline { + width: 2px; + height: 202px; + background-color: #8000ff; + } + + .contact-us-card p { + font-size: 16px; + color: #555; + line-height: 33px; + padding: 2rem 8rem 2rem 0rem; + } + + .integer-button { + background-color: transparent; + border: 2px solid #8000ff; + color: #000; + border-radius: 20px; + padding: 10px 20px; + cursor: pointer; + font-size: 14px; + width: 12rem; + } + .integer-button:hover { + background-color: #8000ff; + color: #fff; + } + + .contact-us-side { + display: flex; + justify-content: center; + align-items: center; + } + + .side-image { + max-width: 300px; + max-height: 300px; + border-radius: 20px; + } + .contact-button { + background-color: #ffb35c; + color: white; + border: none; + border-radius: 50px; + padding: 1rem 3rem; + font-size: 2rem; + font-weight: 500; + line-height: 1; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 1rem; + width: 30vw; + align-items: center; + cursor: pointer; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + + @media (max-width: 768px) { + .contact-button { + font-size: 4vw; + padding: 1rem 2rem; + width: 80vw; + } + } + + .card-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #eee4fb; + border-radius: 20px; + width: 30%; + height: 40vh; + max-width: 90%; + max-height: 80vh; + } + + .card-content { + background-color: #fff; + border-radius: 20px; + width: 90%; + height: 80%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .horizontal-bar { + width: 90%; /* Relative width */ + height: 0.5rem; + background-color: #ffffff; + border-radius: 10px; + margin-bottom: 20px; + } \ No newline at end of file diff --git a/src/app/Pages/Home.jsx b/src/app/Pages/Home.jsx index befd7a1..9a99645 100644 --- a/src/app/Pages/Home.jsx +++ b/src/app/Pages/Home.jsx @@ -1,19 +1,21 @@ import React from 'react' import Hero from './Sections/Hero/Hero' import Problem from'./Sections/Problem/Problem.jsx'; -import WhyUs from './Sections/WhyUs/WhyUs.jsx'; +import Solutions from './Sections/Solutions/Solutions.jsx'; import Testimonial from './Sections/Testimonials/Testimonial.jsx'; +import {Contact} from './Sections/Contact/Contact'; +import "./Home.css"; export default function Main() { return ( -
-
+ +
- + +
-
) } diff --git a/src/app/Pages/Sections/Contact/Contact.jsx b/src/app/Pages/Sections/Contact/Contact.jsx new file mode 100644 index 0000000..cb0d41f --- /dev/null +++ b/src/app/Pages/Sections/Contact/Contact.jsx @@ -0,0 +1,97 @@ +import { Heading } from "@chakra-ui/react"; +import Image from "next/image"; +import React from "react"; +import vector from "../../../assets/Vector.png"; +import qrcode from "../../../../imgs/qrcode.png" + +export const Contact = () => { + return ( +
+
+ + Want to know more? +
+ Contact Us + +
+ +
+
+
+
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ qrcode +
+
+
+ +
+ +
+ +
+ ); +}; diff --git a/src/app/Pages/Sections/Hero/Hero.jsx b/src/app/Pages/Sections/Hero/Hero.jsx index f22a442..56cabaa 100644 --- a/src/app/Pages/Sections/Hero/Hero.jsx +++ b/src/app/Pages/Sections/Hero/Hero.jsx @@ -1,102 +1,188 @@ import React from "react"; -import {Box,Center ,Spacer,Stack,Flex ,Text,Heading,useColorModeValue , extendTheme, Button} from "@chakra-ui/react" -import Typewriter from 'typewriter-effect'; -import { MdOutlineArrowOutward } from "react-icons/md"; -import Link from "next/link"; -import backimg from "../../../../imgs/backimg1.png"; -import student from "../../../../imgs/student_hero.png"; -import mentor from "../../../../imgs/mentor_hero.png" +import { Box, Heading, Button } from "@chakra-ui/react"; +import Typewriter from "typewriter-effect"; import Image from "next/image"; +import student from "../../../../app/assets/student.png"; +import mentor from "../../../../app/assets/mentor.png"; +import arrow from "../../../../app/assets/arrow.png"; +import Star from "../../../../app/assets/star.png"; +import left from "../../../../app/assets/left.png"; +import right from "../../../../app/assets/right.png"; +import Pencil from "../../../../app/assets/pencil.png"; +import Book from "../../../../app/assets/book.png"; +import vector from "../../../../app/assets/Vector.png"; -import { Icon } from "@chakra-ui/react"; - - -const Home = () => { +const Hero = () => { return ( <> - -
- -
- -
- +
+ {/* Desktop and Tablet Section */} +
+
+ mentor
+ +
+
+ +
+ arrow + star + lineright + lineleft + pencil + book +
-
-
- Get your own to hold your hand - -
- -
- < h4 className="text-[1rem] leading-tight font-sans font-semibold "> Say goodbye to one-size-fits-all! We tailor study plans and resources to your individual learning style and goals. - +
+ + Get your own +
+ + + +
+ to hold your Hand + +

+ Say goodbye to one-size-fits-all! We tailor study plans and resources to your individual learning style and goals. +

+
+ +
+ +
-
-
- student -
- +
+ +
+ student +
- - {/* phone */} -
+ {/* Mobile Section */} +
+
+
+
+
+ arrow + star + lineright + lineleft + pencil + book +
-
-
-
- Get your own to hold your hand - -
-
- student -
+ + Get your own +
+ + + +
+ to hold your hand + +
+
+ student +
+
+
+
+ mentor +
-
-
-
- -
+
+

+ Say goodbye to one-size-fits-all! We tailor study plans and resources to your individual learning style and goals. +

-
- - - < h4 className="text-[0.8rem] leading-tight py-4 font-sans font-semibold "> Say goodbye to one-size-fits-all! We tailor study plans and resources to your individual learning style and goals. - - -
-
+ +
+
+
- - -
- - +
); }; -export default Home; +export default Hero; diff --git a/src/app/Pages/Sections/Problem/Problem.jsx b/src/app/Pages/Sections/Problem/Problem.jsx index aa0ef27..9e00f62 100644 --- a/src/app/Pages/Sections/Problem/Problem.jsx +++ b/src/app/Pages/Sections/Problem/Problem.jsx @@ -1,114 +1,47 @@ +import { Heading } from "@chakra-ui/react"; +import problems from "../../../assets/problems.png"; import React from "react"; -import { motion } from "framer-motion"; -import { img } from "@nextui-org/react"; -import bgimg from "../../../../imgs/Vector60.png" - -import knocking from "../../../../imgs/Group 203.png" -import backlogs from "../../../../imgs/backlogs.png" -import distractions from "../../../../imgs/distractions.png" -import procastination from "../../../../imgs/procastination.png" -import anxiety from "../../../../imgs/anxiety.png" - import Image from "next/image"; -export default function BouncyCardsFeatures(){ - - - - - return (<> -
- -
-
- background +export default function BouncyCardsFeatures() { + return ( + <> +
+
+ + + Do you have + +
+ + Problems? + + +
+
+ problem
- - - - - - {/* - - - - - */} -
- -
- -

Are you buried under the BACKLOGS?

- - -
-
- -

Bombarded by DISTRACTONS and feeling isolated
and Unheard?

- - - -
-
- -

Lacking a proper Schedule and PROCRASTINATE
a lot?

- - -
-
- -

Which only adds on the Anxiety!

- - -
- -
- -
-
-{/* phone */} -
- -
- - - - - - -
- -
- -

Are you buried under the backlogs?

- - -
-
- -

Bombarded by distractions and feeling isolated
and Unheard?

- - - -
-
- -

Lacking a proper Schedule and Procrastinate a lot?

- - -
-
- -

Which only
adds on the
Anxiety!

- - -
- -
- - - -
+ ); -}; \ No newline at end of file +} diff --git a/src/app/Pages/Sections/Solutions/Solutions.jsx b/src/app/Pages/Sections/Solutions/Solutions.jsx new file mode 100644 index 0000000..d0e6890 --- /dev/null +++ b/src/app/Pages/Sections/Solutions/Solutions.jsx @@ -0,0 +1,56 @@ +import { Heading } from '@chakra-ui/react'; +import solution from "../../../assets/solution.png"; +import React from 'react'; +import Image from 'next/image'; +import vector from "../../../assets/Vector.png"; + +const Solutions = () => { + return ( + <> +
+
+ + + Yes, we have + +
+ + Solution! + + +
+
+ solution +
+
+ +
+
+ + ); +} + +export default Solutions; diff --git a/src/app/Pages/Sections/Testimonials/Carousel.css b/src/app/Pages/Sections/Testimonials/Carousel.css new file mode 100644 index 0000000..bb323f3 --- /dev/null +++ b/src/app/Pages/Sections/Testimonials/Carousel.css @@ -0,0 +1,324 @@ +.carousel { + position: relative; + margin: auto; +} + +.carousel-button { + position: absolute; + top: 22rem; + transform: translateY(-50%); + background-color: transparent; + border-radius: 40px; + border: 3px solid #FFB35C; + padding: 0.5rem 1.2rem; + font-size: 2rem; + cursor: pointer; + z-index: 2; +} + +.button1 { + margin-left: 8rem; +} + +.button2 { + margin-right: 8rem; +} + +.carousel-button:first-of-type { + left: 0; +} + +.carousel-button:last-of-type { + right: 0; +} + +.carousel-item { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px; + text-align: center; + transition: all 0.3s ease; +} + +.carousel-item-inner { + background-color: #ffffff; + padding: 30px; + border-radius: 30px; + transition: all 0.3s ease; + border: 2px solid #290064; +} + +.carousel-circle { + width: 50px; + height: 50px; + background-color: #f5f0fd; + border-radius: 40%; + margin-left: 1rem; +} + +.center-item .title { + font-size: 18px; + font-weight: 600; + line-height: 21.78px; + margin-left: 1.6rem; +} + +.center-item .carousel-item-inner { + background-color: #f5f0fd; + color: rgb(0, 0, 0); + transform: scale(1.2); + border: 2px solid #5A10D9; +} + +.center-item .carousel-circle { + background-color: #ffffff; +} + +.center-item .content { + font-size: 1rem; + font: 'Poppins'; + line-height: 20px; + font-weight: 400; +} + +.carousel-display { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; +} + +.title { + font-size: 15px; + font-weight: 600; + line-height: 21.78px; + margin-left: 1rem; +} + +.content { + text-align: start; + padding: 10px; + font-size: 15px; + line-height: 16px; + font-weight: 400; + +} +@media (min-width: 1025px) and (max-width: 1360px) { + .carousel { + width: 100%; + max-width: 100%; + } + + .carousel-button { + top: 90%; + padding: 0.3rem 0.8rem; + font-size: 1.5rem; + } + + .button1 { + left: 0.5rem; + } + + .button2 { + right: 0.5rem; + } + + .carousel-item { + padding: 30px; + margin-top: 1rem; + margin-bottom: 1rem; + } + + .carousel-item-inner { + padding: 10px; + } + + .carousel-circle { + width: 30px; + height: 30px; + } + + .center-item .title { + font-size: 10px; + margin-left: 0.5rem; + } + + .center-item .content { + font-size: 0.6rem; + font-weight: 500; + } + + .title { + font-size: 10px; + } + + .content { + font-size: 10px; + } + +} +@media (min-width: 768px) and (max-width: 1024px) { + .carousel { + width: 100%; + max-width: 100%; + } + + .carousel-button { + top: 90%; + padding: 0.3rem 0.8rem; + font-size: 1.5rem; + } + + .button1 { + left: 0.5rem; + } + + .button2 { + right: 0.5rem; + } + + .carousel-item { + padding: 30px; + margin-top: 1rem; + margin-bottom: 1rem; + } + + .carousel-item-inner { + padding: 10px; + } + + .carousel-circle { + width: 30px; + height: 30px; + } + + .center-item .title { + font-size: 10px; + margin-left: 0.5rem; + } + + .center-item .content { + font-size: 0.6rem; + font-weight: 500; + } + + .title { + font-size: 10px; + } + + .content { + font-size: 10px; + } +} + +@media (min-width: 540px) and (max-width: 768px) { + .carousel-button { + top: 105%; + font-size: 1rem; + margin-top: 20px; + } + + .button1 { + margin-left: 2rem; + } + + .button2 { + margin-right: 2rem; + } + + .carousel { + width: 70%; + } + + .carousel-item { + padding: 30px; + margin-top: 1rem; + } + + .carousel-item-inner { + padding: 8px; + } + + .carousel-circle { + width: 30px; + height: 30px; + } + + .center-item .title { + font-size: 14px; + } + + .center-item .content { + font-size: 0.6rem; + font-weight: 400; + + } + + .title { + font-size: 12px; + } + + .content { + font-size: 10px; + font-weight: 400; + + } +} + +@media (min-width: 250px) and (max-width: 540px) { + .carousel-button { + position: absolute; + top: 126%; + transform: translateY(-50%); + font-size: 1rem; + } + + .button1 { + margin-left: 4rem; + } + + .button2 { + margin-right: 4rem; + } + + .carousel { + width: 100%; + margin-top: 2rem; + position: relative; + } + + .carousel-item { + padding: 32px; + margin-top: 1rem; + } + + .carousel-item-inner { + padding: 5px; + } + + .carousel-circle { + width: 35px; + height: 35px; + } + + .center-item .title { + font-size: 15px; + margin-left: 4px; + } + + .center-item .content { + font-size: 0.9rem; + font-weight: 400; + } + + .title { + font-size: 10px; + + } + + .content { + font-size: 8px; + font-weight: 400; + } +} diff --git a/src/app/Pages/Sections/Testimonials/Carousel.jsx b/src/app/Pages/Sections/Testimonials/Carousel.jsx new file mode 100644 index 0000000..7c0d4dc --- /dev/null +++ b/src/app/Pages/Sections/Testimonials/Carousel.jsx @@ -0,0 +1,93 @@ +import React, { useRef, useState, useEffect } from 'react'; +import Slider from 'react-slick'; +import './Carousel.css'; +import Image from 'next/image'; +import left from "../../../assets/leftVector.png"; +import right from "../../../assets/rightVector.png"; + +const Carousel = () => { + const sliderRef = useRef(null); + const [currentSlide, setCurrentSlide] = useState(0); + const [slidesToShow, setSlidesToShow] = useState(3); + + useEffect(() => { + const updateSlidesToShow = () => { + if (window.innerWidth <= 540) { + setSlidesToShow(1); + } else if (window.innerWidth <= 768) { + setSlidesToShow(1); + } else { + setSlidesToShow(3); + } + }; + + updateSlidesToShow(); + window.addEventListener('resize', updateSlidesToShow); + + return () => window.removeEventListener('resize', updateSlidesToShow); + }, []); + + const settings = { + className: "center", + centerMode: true, + infinite: true, + centerPadding: "30px", + slidesToShow: slidesToShow, + speed: 500, + arrows: false, + beforeChange: (_, newIndex) => setCurrentSlide(newIndex), + afterChange: (index) => setCurrentSlide(index), + }; + + const items = [ + { + title: "Webflow Team", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, lacus ac dignissim efficitur, ante orci varius turpis, non accumsan urna lorem vitae velit. Nunc accumsan odio nec egestas vulputate. Ut semper aliquet euismod.", + }, + { + title: "Webflow Team1", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, lacus ac dignissim efficitur, ante orci varius turpis, non accumsan urna lorem vitae velit. Nunc accumsan odio nec egestas vulputate. Ut semper aliquet euismod.", + }, + { + title: "Webflow Team2", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, lacus ac dignissim efficitur, ante orci varius turpis, non accumsan urna lorem vitae velit. Nunc accumsan odio nec egestas vulputate. Ut semper aliquet euismod.", + }, + { + title: "Webflow Team3", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, lacus ac dignissim efficitur, ante orci varius turpis, non accumsan urna lorem vitae velit. Nunc accumsan odio nec egestas vulputate. Ut semper aliquet euismod.", + }, + { + title: "Webflow Team4", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, lacus ac dignissim efficitur, ante orci varius turpis, non accumsan urna lorem vitae velit. Nunc accumsan odio nec egestas vulputate. Ut semper aliquet euismod.", + }, + ]; + + return ( +
+ + {items.map((item, index) => ( +
+
+
+
+

{item.title}

+
+

{item.content}

+
+
+ ))} + + + +
+ ); +}; + +export default Carousel; \ No newline at end of file diff --git a/src/app/Pages/Sections/Testimonials/Testimonial.jsx b/src/app/Pages/Sections/Testimonials/Testimonial.jsx index 3d43b02..aff8a25 100644 --- a/src/app/Pages/Sections/Testimonials/Testimonial.jsx +++ b/src/app/Pages/Sections/Testimonials/Testimonial.jsx @@ -1,160 +1,53 @@ -import React from 'react'; -import {motion} from "framer-motion" -import { Avatar } from '@chakra-ui/react'; -const ComponentName = () => { - return ( -
- -

- Lets hear from our
- Happy Learners... -

-
- -
- - -

- Mahip bhaiya is a very good mentor, the way in which he guided me and the tasks that he gave me are very good. I saw improvement in my learning skills. Also tracker and error book ne bhi meri bahut help ki. Overall leadlly helped me a lot in my journey.... -

-
-
V
-

~ Vaibhav JEE Aspirant

- - - -

My mentor was Manan Bhaiya, He is a very good guide. He use to talk in a friendly manner( never felt that I am talking to an elder).He use to motivate me even in bad situations( like getting low grades..). -After all, under his guidance I have seen good changes in my schedule and in myself ...

-
-
BD
-

~ Bhavya Dubey NEET Aspirant

- - - - -

Talking about revision tracker and planners both these things helped me a lot and nearly stopped all my procrastination and anxiousness. And my mentor was Saumya didi. She is really helpful and relatable. She never disappoint me in her responses and I've tried doing what she told me to do and it has helped significantly in my process of learning better.

-
-
A
-

~ Aadhya NEET Aspirant

- - - - - -

This mentorship program is very helpful to me .Techniques that are discussed during workshops were really helpful for me and also my mentor helped me to implement those techniques in my daily routine which helps me a lot. My mentor also provides me lot of study material and motivates me. I really appreciate this program.

-
-
V
-

~ Vishesh JEE Aspirant

- - - -

Leadlly seriously rocks! Their tips, support, and all that expert knowledge totally helped me level up. Thanks for being there every step of the way

-
-
KY
-

~ Krishna Yadav Boards student

-
-
-
- - - - - - - - - -

- Lets hear from our
- Happy Learners... -

-
- - -
- -

- Mahip bhaiya is a very good mentor, the way in which he guided me and the tasks that he gave me are very good. I saw improvement in my learning skills. Also tracker and error book ne bhi meri bahut help ki. Overall leadlly helped me a lot in my journey.... -

-
-
V
-

~ Vaibhav JEE Aspirant

+import { Heading } from "@chakra-ui/react"; +import React from "react"; +import Carousel from "./Carousel"; +import vector from "../../../assets/Vector.png"; +// import vector from "../../../assets/Vector.png"; +import Image from "next/image"; + +const ComponentName = () => { + return ( + <> +
+
+ + + Let's hear from + +
+ + Our Learners + +
-
- -

My mentor was Manan Bhaiya, He is a very good guide. He use to talk in a friendly manner( never felt that I am talking to an elder).He use to motivate me even in bad situations( like getting low grades..). -After all, under his guidance I have seen good changes in my schedule and in myself ...

-
-
BD
-

~ Bhavya Dubey NEET Aspirant

+
+
- - -
- -

Talking about revision tracker and planners both these things helped me a lot and nearly stopped all my procrastination and anxiousness. And my mentor was Saumya didi. She is really helpful and relatable. She never disappoint me in her responses and I've tried doing what she told me to do and it has helped significantly in my process of learning better.

-
-
A
-

~ Aadhya NEET Aspirant

-
- - -
- -

This mentorship program is very helpful to me .Techniques that are discussed during workshops were really helpful for me and also my mentor helped me to implement those techniques in my daily routine which helps me a lot. My mentor also provides me lot of study material and motivates me. I really appreciate this program.

-
-
V
-

~ Vishesh JEE Aspirant

-
-
+ {/*
+ +
*/} -

Leadlly seriously rocks! Their tips, support, and all that expert knowledge totally helped me level up. Thanks for being there every step of the way

-
-
KY
-

~ Krishna Yadav Boards student

-
-
-
- - - ) -} + + + ); +}; export default ComponentName; diff --git a/src/app/assets/Group.png b/src/app/assets/Group.png new file mode 100644 index 0000000..c6f3d25 Binary files /dev/null and b/src/app/assets/Group.png differ diff --git a/src/app/assets/Rectangle 64.png b/src/app/assets/Rectangle 64.png new file mode 100644 index 0000000..7cd1dcd Binary files /dev/null and b/src/app/assets/Rectangle 64.png differ diff --git a/src/app/assets/Vector.png b/src/app/assets/Vector.png new file mode 100644 index 0000000..0f65911 Binary files /dev/null and b/src/app/assets/Vector.png differ diff --git a/src/app/assets/about/about-top.png b/src/app/assets/about/about-top.png new file mode 100644 index 0000000..3e88dc5 Binary files /dev/null and b/src/app/assets/about/about-top.png differ diff --git a/src/app/assets/about/dashboard.png b/src/app/assets/about/dashboard.png new file mode 100644 index 0000000..f7e5fa6 Binary files /dev/null and b/src/app/assets/about/dashboard.png differ diff --git a/src/app/assets/about/growth1.png b/src/app/assets/about/growth1.png new file mode 100644 index 0000000..81a9a10 Binary files /dev/null and b/src/app/assets/about/growth1.png differ diff --git a/src/app/assets/about/growth2.png b/src/app/assets/about/growth2.png new file mode 100644 index 0000000..b35ab74 Binary files /dev/null and b/src/app/assets/about/growth2.png differ diff --git a/src/app/assets/about/mission.png b/src/app/assets/about/mission.png new file mode 100644 index 0000000..42437b4 Binary files /dev/null and b/src/app/assets/about/mission.png differ diff --git a/src/app/assets/about/planner1.png b/src/app/assets/about/planner1.png new file mode 100644 index 0000000..84d1d9d Binary files /dev/null and b/src/app/assets/about/planner1.png differ diff --git a/src/app/assets/about/planner2.png b/src/app/assets/about/planner2.png new file mode 100644 index 0000000..a427d45 Binary files /dev/null and b/src/app/assets/about/planner2.png differ diff --git a/src/app/assets/about/revision.png b/src/app/assets/about/revision.png new file mode 100644 index 0000000..12a8006 Binary files /dev/null and b/src/app/assets/about/revision.png differ diff --git a/src/app/assets/about/workshop.png b/src/app/assets/about/workshop.png new file mode 100644 index 0000000..db4a08f Binary files /dev/null and b/src/app/assets/about/workshop.png differ diff --git a/src/app/assets/areo.svg b/src/app/assets/areo.svg new file mode 100644 index 0000000..3d5d0ec --- /dev/null +++ b/src/app/assets/areo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/app/assets/arrow.png b/src/app/assets/arrow.png new file mode 100644 index 0000000..c5dcda5 Binary files /dev/null and b/src/app/assets/arrow.png differ diff --git a/src/app/assets/backimg1.png b/src/app/assets/backimg1.png new file mode 100644 index 0000000..a7fb1c5 Binary files /dev/null and b/src/app/assets/backimg1.png differ diff --git a/src/app/assets/bhayaDiag.png b/src/app/assets/bhayaDiag.png new file mode 100644 index 0000000..25561dc Binary files /dev/null and b/src/app/assets/bhayaDiag.png differ diff --git a/src/app/assets/book.png b/src/app/assets/book.png new file mode 100644 index 0000000..02ac4b9 Binary files /dev/null and b/src/app/assets/book.png differ diff --git a/src/app/assets/book.svg b/src/app/assets/book.svg new file mode 100644 index 0000000..0aba953 --- /dev/null +++ b/src/app/assets/book.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/assets/contact.png b/src/app/assets/contact.png new file mode 100644 index 0000000..d8a030c Binary files /dev/null and b/src/app/assets/contact.png differ diff --git a/src/app/assets/emojystar.svg b/src/app/assets/emojystar.svg new file mode 100644 index 0000000..2071387 --- /dev/null +++ b/src/app/assets/emojystar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/assets/grid.svg b/src/app/assets/grid.svg new file mode 100644 index 0000000..1b32d33 --- /dev/null +++ b/src/app/assets/grid.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/assets/left.png b/src/app/assets/left.png new file mode 100644 index 0000000..a3ed84f Binary files /dev/null and b/src/app/assets/left.png differ diff --git a/src/app/assets/leftVector.png b/src/app/assets/leftVector.png new file mode 100644 index 0000000..a8a5cec Binary files /dev/null and b/src/app/assets/leftVector.png differ diff --git a/src/app/assets/lineleft.svg b/src/app/assets/lineleft.svg new file mode 100644 index 0000000..0e2068e --- /dev/null +++ b/src/app/assets/lineleft.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/assets/lineright.svg b/src/app/assets/lineright.svg new file mode 100644 index 0000000..b1048f7 --- /dev/null +++ b/src/app/assets/lineright.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/assets/logo.png b/src/app/assets/logo.png new file mode 100644 index 0000000..2356722 Binary files /dev/null and b/src/app/assets/logo.png differ diff --git a/src/app/assets/mentor.png b/src/app/assets/mentor.png new file mode 100644 index 0000000..2676cff Binary files /dev/null and b/src/app/assets/mentor.png differ diff --git a/src/app/assets/mentor.svg b/src/app/assets/mentor.svg new file mode 100644 index 0000000..79e65aa Binary files /dev/null and b/src/app/assets/mentor.svg differ diff --git a/src/app/assets/pencil.png b/src/app/assets/pencil.png new file mode 100644 index 0000000..3f5c587 Binary files /dev/null and b/src/app/assets/pencil.png differ diff --git a/src/app/assets/pencil.svg b/src/app/assets/pencil.svg new file mode 100644 index 0000000..78caf8e --- /dev/null +++ b/src/app/assets/pencil.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/app/assets/problems.png b/src/app/assets/problems.png new file mode 100644 index 0000000..9790217 Binary files /dev/null and b/src/app/assets/problems.png differ diff --git a/src/app/assets/right.png b/src/app/assets/right.png new file mode 100644 index 0000000..df6047d Binary files /dev/null and b/src/app/assets/right.png differ diff --git a/src/app/assets/rightVector.png b/src/app/assets/rightVector.png new file mode 100644 index 0000000..385e7e0 Binary files /dev/null and b/src/app/assets/rightVector.png differ diff --git a/src/app/assets/solution.png b/src/app/assets/solution.png new file mode 100644 index 0000000..d9c8b0b Binary files /dev/null and b/src/app/assets/solution.png differ diff --git a/src/app/assets/star.png b/src/app/assets/star.png new file mode 100644 index 0000000..55bc840 Binary files /dev/null and b/src/app/assets/star.png differ diff --git a/src/app/assets/star.svg b/src/app/assets/star.svg new file mode 100644 index 0000000..c357d96 --- /dev/null +++ b/src/app/assets/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/assets/student.png b/src/app/assets/student.png new file mode 100644 index 0000000..6d0db3f Binary files /dev/null and b/src/app/assets/student.png differ diff --git a/src/app/assets/student.svg b/src/app/assets/student.svg new file mode 100644 index 0000000..82e4d15 --- /dev/null +++ b/src/app/assets/student.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index 0246217..391324b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,19 +3,141 @@ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap'); - +@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@500..900&display=swap"); +@import "slick-carousel/slick/slick.css"; +@import "slick-carousel/slick/slick-theme.css"; @tailwind base; @tailwind components; @tailwind utilities; + body { @apply leading-[normal] m-0; font-family: "Onest", sans-serif; font-optical-sizing: auto; + width: 100%; + height: 100%; } *, ::before, ::after { border-width: 0; } +/* globals.css */ + +.gradient-text { + background: linear-gradient( + 89.91deg, + rgba(125, 62, 255, 0.84) -1.53%, + #ffb35d 46.27%, + rgba(120, 54, 255, 0.84) 99.88% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + display: inline-block; + /* font-size: 90px; */ + font-family: Urbanist; + + font-weight: 800; + text-align: center; +} +.text-gradient { + background: linear-gradient( + 89.91deg, + rgba(125, 62, 255, 0.84) -1.53%, + #ffb35d 46.27%, + rgba(120, 54, 255, 0.84) 99.88% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + display: inline-block; + font-family: Urbanist; + font-size: 3rem; + font-weight: 800; + text-align: center; +} + +.footer { + background-color: #eee4fb; + padding: 40px 20px; + border-radius: 30px; + max-width: 100vw; + width: 70vw; + margin: 20px auto; + color: #000000; +} + +.footer-content { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.footer-section { + flex: 1; + margin: 10px; + padding-bottom: 5rem; +} + +.about .logo { + width: 40%; + margin-bottom: 20px; +} + +.about p { + max-width: 300px; + line-height: 24px; + font-weight: 400; + font-size: 16px; + color: #000000; +} + +.social-icons { + display: flex; + gap: 10px; + margin-top: 20px; +} + +.circle { + width: 27px; + height: 27px; + background-color: #fff; + border-radius: 50%; +} + +.links h2 { + color: #5a10d9; + font-size: 22px; + font-weight: 700; + line-height: 33px; + margin-bottom: 10px; +} + +.links a { + display: block; + color: #000000; + text-decoration: none; + margin-bottom: 5px; + transition: color 0.3s; + font-size: 16px; + line-height: 24px; + font-weight: 400; +} + +.footer-bottom { + display: flex; + flex-direction: row; + align-items: center; + text-align: start; + margin-top: 20px; + border-top: 2px solid #fefbff; + padding-top: 10px; + font-weight: 400; + line-height: 24px; + font-size: 16px; + color: #000000; +} +.footer-bottom p { + margin-left: 12px; +} diff --git a/src/app/layout.js b/src/app/layout.js index 5e51007..2f50b43 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,21 +1,25 @@ +"use client" import { Providers } from './providers' import { Inter } from "next/font/google"; import "./globals.css"; import Navbar from '@/Components/Navbar/Navbar'; import Footer from '@/Components/Footer/Footer'; +import Image from 'next/image'; +import grid from "../imgs/gridwhole.png" const inter = Inter({ subsets: ["latin"] }); -export const metadata = { - title: "Leadlly.in", +const metadata = { + title: "Leadlly", description: "Say goodbye to one-size-fits-all! We tailor study plans and resources to your individual learning style and goals.", }; export default function RootLayout({ children }) { return ( - - + + + Background Grid {children}