feat: sponsors page (#508)

* fix: alignement of icon and text in the navbar (#486) * chore(release): v0.53.15 [skip ci] * sponsors section added * fix: version * Update CHANGELOG.md * fix: design and add button * fix: design and add button * fix: design and add button * fix: design and add button --------- Co-authored-by: Mario Randrianomearisoa <ranjamario@gmail.com> Co-authored-by: Conventional Changelog Action <conventional.changelog.action@github.com> Co-authored-by: Kabir <44284877+kabir0x23@users.noreply.github.com>
th3cyb3rhub · Oct 19, 2023 · dfcadd9 · dfcadd9
1 parent fb02198
commit dfcadd9
Show file tree

Hide file tree

Showing 6 changed files with 339 additions and 5 deletions.
diff --git 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 = () => {
                         </Route>
 
                         <Route exact path={"/community"} element={<Community />} />
-                        <Route exact path={"/support"} element={<Sponsors />} />
+                        <Route exact path={"/support"} element={<Support />} />
+                        <Route exact path={"/sponsors"} element={<SpecialSponsors />} />
+
                         <Route exact path={"/about"} element={<About />} />
                         <Route exact path={"/terms-conditions"} element={<TermsAndCondition />} />
                         <Route exact path={"/privacy-policy"} element={<PrivacyPolicy />} />

diff --git 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
@@ -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 = () => {
             <Info {...contributeData} />
             <Info {...communityData} />
             <Socials />
+            <SpecialSponsors />
             <ContactForm />
         </>
     );

diff --git a/src/components/Homepage/SpecialSponsors/SpecialSponsors.jsx 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 (
+        <SponsorsWrapper>
+            <SponsorsContainer>
+                <H1>SPONSORS</H1>
+                <SponsorsLayout>
+                    <SponsorsTopHeader
+                        style={{
+                            borderRadius: "1rem 1rem 0 0",
+                        }}
+                    >
+                        <SponsorsH4>Special Sponsors</SponsorsH4>
+                    </SponsorsTopHeader>
+                    <SponsorsGrid1>
+                        <SponsorsGridColTop>
+                            <SponsorsH1 href={"https://thecyber-sec.com"} target={"_blank"} rel={"noreferrer"}>
+                                TheCyberSEC
+                            </SponsorsH1>
+                        </SponsorsGridColTop>
+                        <SponsorsGridColTop>
+                            <SponsorsH1>Thecyberworld</SponsorsH1>
+                        </SponsorsGridColTop>
+                        <SponsorsGridColTop>
+                            {/* <SponsorsH1>Thecyberworld</SponsorsH1> */}
+                            {/* <SponsorsImg src={tailwind} alt="tailwind"/> */}
+                        </SponsorsGridColTop>
+                    </SponsorsGrid1>
+                    <SponsorsTopHeader>
+                        <SponsorsH4>Platinum Sponsors</SponsorsH4>
+                    </SponsorsTopHeader>
+                    <SponsorsGrid2>
+                        <SponsorsGridColTop>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColTop>
+                        <SponsorsGridColTop>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColTop>
+                        <SponsorsGridColTop>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColTop>
+                        <SponsorsGridColTop>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColTop>
+                        <SponsorsGridColTop>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColTop>
+                        <SponsorsGridColTop>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColTop>
+                    </SponsorsGrid2>
+                    <SponsorsTopHeader>
+                        <SponsorsH4>Gold Sponsors</SponsorsH4>
+                    </SponsorsTopHeader>
+                    <SponsorsGrid3>
+                        <SponsorsGridColLast>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColLast>
+                        <SponsorsGridColLast>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColLast>
+                        <SponsorsGridColLast>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColLast>
+                        <SponsorsGridColLast>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColLast>
+                        <SponsorsGridColLast>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColLast>
+                        <SponsorsGridColLast>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColLast>
+                        <SponsorsGridColHiddenSm>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColHiddenSm>
+                        <SponsorsGridColHiddenSm>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColHiddenSm>
+                        <SponsorsGridColHidden>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColHidden>
+                        <SponsorsGridColHidden>
+                            <SponsorsH1></SponsorsH1>
+                        </SponsorsGridColHidden>
+                    </SponsorsGrid3>
+                    <SponsorsFooterBar>
+                        <SponsorsH4>{""}</SponsorsH4>
+                    </SponsorsFooterBar>
+                </SponsorsLayout>
+                <SponsorButton href={"https://github.com/sponsors/Thecyberworld"} target={"_blank"} rel={"noreferrer"}>
+                    {" "}
+                    Sponsor Thecyberworld Community
+                </SponsorButton>
+            </SponsorsContainer>
+        </SponsorsWrapper>
+    );
+};
+
+export default SpecialSponsors;
diff --git a/src/components/Homepage/SpecialSponsors/SpecialSponsorsElement.jsx 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
@@ -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";