diff --git a/src/App.jsx b/src/App.jsx
index 133bf667..2c7ee498 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,7 +19,8 @@ import {
OSINTGame,
Quiz,
Sidebar,
- Sponsors,
+ SpecialSponsors,
+ Support,
} from "./components";
import { Container } from "./components/Other/MixComponents/Layout/LayoutElements";
import Spinner from "./components/Other/MixComponents/Spinner/Spinner";
@@ -141,7 +142,9 @@ const App = () => {
} />
- } />
+ } />
+ } />
+
} />
} />
} />
diff --git a/src/components/Header/Navbar/NavbarElements.jsx b/src/components/Header/Navbar/NavbarElements.jsx
index a70c7bed..4199c982 100644
--- a/src/components/Header/Navbar/NavbarElements.jsx
+++ b/src/components/Header/Navbar/NavbarElements.jsx
@@ -4,7 +4,7 @@ import { AiFillCaretDown } from "react-icons/ai";
import { BsTrophyFill } from "react-icons/bs";
export const DropdownIcon = styled(AiFillCaretDown)`
- margin: 0px 0 0 5px;
+ margin: 2px 0 0 5px;
`;
export const Nav = styled.nav`
diff --git a/src/components/Homepage/Homepage.jsx b/src/components/Homepage/Homepage.jsx
index 07273c30..6ec98c51 100644
--- a/src/components/Homepage/Homepage.jsx
+++ b/src/components/Homepage/Homepage.jsx
@@ -1,5 +1,6 @@
import React from "react";
-import { Hero, Info, Socials } from "../index";
+import { Hero, Info, Socials, SpecialSponsors } from "../index";
+// import { SpecialSponsors } from "./SpecialSponsors/SpecialSponsors"
import { aboutData, ResourcesData, communityData, contributeData } from "./Info/Data";
import ContactForm from "./ContactForm/ContactForm";
@@ -12,6 +13,7 @@ const Homepage = () => {
+
);
diff --git a/src/components/Homepage/SpecialSponsors/SpecialSponsors.jsx b/src/components/Homepage/SpecialSponsors/SpecialSponsors.jsx
new file mode 100644
index 00000000..58d4b950
--- /dev/null
+++ b/src/components/Homepage/SpecialSponsors/SpecialSponsors.jsx
@@ -0,0 +1,121 @@
+import React from "react";
+import { H1 } from "../ContactForm/ContactFormElements";
+// import tailwind from "../../../assets/images/tailwind.svg";
+import {
+ SponsorsWrapper,
+ SponsorsContainer,
+ SponsorsLayout,
+ SponsorsTopHeader,
+ SponsorsH4,
+ SponsorsGrid1,
+ SponsorsGridColTop,
+ SponsorsH1,
+ SponsorsGrid2,
+ SponsorsGrid3,
+ // SponsorsImg,
+ SponsorsGridColLast,
+ SponsorsGridColHidden,
+ SponsorsGridColHiddenSm,
+ SponsorsFooterBar,
+ SponsorButton,
+} from "./SpecialSponsorsElement";
+
+const SpecialSponsors = () => {
+ return (
+
+
+ SPONSORS
+
+
+ Special Sponsors
+
+
+
+
+ TheCyberSEC
+
+
+
+ Thecyberworld
+
+
+ {/* Thecyberworld */}
+ {/* */}
+
+
+
+ Platinum Sponsors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Gold Sponsors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {""}
+
+
+
+ {" "}
+ Sponsor Thecyberworld Community
+
+
+
+ );
+};
+
+export default SpecialSponsors;
diff --git a/src/components/Homepage/SpecialSponsors/SpecialSponsorsElement.jsx b/src/components/Homepage/SpecialSponsors/SpecialSponsorsElement.jsx
new file mode 100644
index 00000000..7db82f5d
--- /dev/null
+++ b/src/components/Homepage/SpecialSponsors/SpecialSponsorsElement.jsx
@@ -0,0 +1,207 @@
+import styled from "styled-components";
+
+export const SponsorsWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ margin-bottom: 100px;
+`;
+
+export const SponsorsH1 = styled.a`
+ font-size: 1.6rem;
+ font-weight: 600;
+ color: #f5f5f5;
+ margin: 0;
+ @media screen and (max-width: 1024px) {
+ font-size: 1.3rem;
+ }
+ @media screen and (max-width: 768px) {
+ font-size: 1rem;
+ } ;
+`;
+
+export const SponsorsH4 = styled.h4`
+ color: #f5f5f5;
+ font-size: 0.8rem;
+ font-weight: 400;
+`;
+
+export const SponsorsContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: #000000;
+ width: 100%;
+ max-width: 1400px;
+ ${"" /* margin: 150px auto; */}
+`;
+
+export const SponsorsLayout = styled.div`
+ width: 100%;
+ padding: 50px;
+ font-size: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ border-radius: 5rem;
+ overflow: hidden;
+`;
+
+export const SponsorsTopHeader = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #101010;
+ padding: 0.8rem 0;
+ ${"" /* border-radius: 1rem 1rem 0 0 ; */}
+`;
+export const SponsorsFooterBar = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #101010;
+ padding: 0.8rem 0;
+ margin-top: 0.6rem;
+ border-radius: 0 0 1rem 1rem;
+ ${"" /* border-radius: 1rem 1rem 0 0 ; */}
+
+ @media screen and (max-width: 768px) {
+ margin-top: 0.3rem;
+ }
+`;
+
+export const SponsorsGrid1 = styled.div`
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-rows: 1fr;
+ grid-gap: 10px;
+ margin: 10px 0;
+ @media screen and (max-width: 768px) {
+ margin: 6px 0;
+ grid-gap: 6px;
+ }
+`;
+
+export const SponsorsGrid2 = styled.div`
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-rows: 1fr;
+ grid-gap: 10px;
+ margin: 10px 0;
+ @media screen and (max-width: 768px) {
+ margin: 6px 0;
+ grid-gap: 6px;
+ }
+`;
+
+export const SponsorsGrid3 = styled.div`
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ grid-auto-rows: 2fr;
+ grid-gap: 10px;
+ margin-top: 10px;
+ @media screen and (max-width: 834px) {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ @media screen and (max-width: 768px) {
+ margin-top: 6px;
+ grid-gap: 6px;
+ }
+ @media screen and (max-width: 510px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+`;
+
+export const SponsorsImg = styled.img`
+ max-height: 2rem;
+ max-width: 60%;
+ filter: grayscale(100) invert(1);
+`;
+
+export const SponsorsGridCol = styled.div`
+ width: 100%;
+ grid-column: span 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: #101010;
+
+ &:hover {
+ background: #f5f5f5;
+ }
+
+ &:hover a {
+ color: #101010;
+ }
+
+ &:hover img {
+ filter: grayscale(0) invert(0);
+ }
+`;
+
+export const SponsorsGridColHidden = styled(SponsorsGridCol)`
+ padding: 3rem 0;
+ @media only screen and (max-width: 834px) {
+ display: none;
+ }
+ @media screen and (max-width: 768px) {
+ padding: 2rem 0;
+ }
+`;
+
+export const SponsorsGridColHiddenSm = styled(SponsorsGridCol)`
+ padding: 3rem 0;
+ @media screen and (max-width: 768px) {
+ padding: 2rem 0;
+ }
+ @media only screen and (max-width: 425px) {
+ display: none;
+ }
+`;
+
+export const SponsorsGridColLast = styled(SponsorsGridCol)`
+ padding: 3rem 0;
+ @media screen and (max-width: 768px) {
+ padding: 2rem 0;
+ }
+`;
+
+export const SponsorsGridColTop = styled(SponsorsGridCol)`
+ padding: 5rem 0;
+ @media screen and (max-width: 768px) {
+ padding: 3rem 0;
+ }
+`;
+
+export const SponsorButton = styled.a`
+ border-radius: 50px;
+ background: transparent;
+ border: 2px solid #5e5959;
+ color: #f5f5f5;
+ white-space: nowrap;
+ padding: 10px 22px;
+ font-size: 16px;
+ outline: none;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+
+ &:hover {
+ transition: all 0.2s ease-in-out;
+ background: #545454;
+ color: #f5f5f5;
+ }
+
+ @media screen and (max-width: 768px) {
+ padding: 8px 16px;
+ font-size: 14px;
+ }
+`;
diff --git a/src/components/index.js b/src/components/index.js
index 498c9052..174fa230 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,8 +4,9 @@ export { default as Sidebar } from "./Header/Sidebar/Sidebar";
export { default as Hero } from "./Homepage/Hero/Hero";
export { default as Info } from "./Homepage/Info/Info";
export { default as Socials } from "./Homepage/Socials/Socials";
+export { default as SpecialSponsors } from "./Homepage/SpecialSponsors/SpecialSponsors";
export { default as Community } from "./Other/Community/Community";
-export { default as Sponsors } from "./Other/Support/Sponsors";
+export { default as Support } from "./Other/Support/Sponsors";
// Learn //
export { default as Learn } from "./Learn/Learn";