diff --git a/src/Pages/CommunityEvangelist/CommunityEvangelist.jsx b/src/Pages/CommunityEvangelist/CommunityEvangelist.jsx index 7cdf5df2..715a8ef3 100644 --- a/src/Pages/CommunityEvangelist/CommunityEvangelist.jsx +++ b/src/Pages/CommunityEvangelist/CommunityEvangelist.jsx @@ -7,111 +7,199 @@ const Section = styled.div` align-items: center; justify-content: space-between; background-color: #010116; + padding: 50px 20px; `; - const Container = styled.div` scroll-snap-align: center; - width: 1440px; - padding-top: 100px; - @media only screen and (max-width: 738px) { - width: 100vw; - justify-content: center; - align-items: center; + max-width: 1440px; + width: 100%; + padding-top: 50px; + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +`; + +const Card = styled.div` + background-color: #1c1c2b; + border-radius: 10px; + padding: 20px; + width: 80%; + max-width: 800px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: row; + + @media only screen and (max-width: 768px) { + flex-direction: column; } - @media only screen and (max-width: 1030px) { - width: 100vw; - justify-content: center; - align-items: center; +`; + +const LeftSection = styled.div` + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 20px; + + h3 { + color: white; + margin-bottom: 15px; + font-size: 36px; + text-align: center; } - @media only screen and (max-width: 1030px) { - width: 100vw; + svg { + width: 100px; + height: 100px; + } + + @media only screen and (max-width: 768px) { justify-content: center; - align-items: center; } `; +const RightSection = styled.div` + flex: 1; + padding: 20px; + + ul { + list-style: disc; + padding-left: 20px; + color: #d1d1e9; + + li { + margin-bottom: 10px; + } + } +`; + +const GradientText = styled.span` + background: linear-gradient(to right, #70a1ff, #3a8dff); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +`; + +const Title = styled.h2` + text-align: center; + font-size: 3rem; + font-weight: bold; + background: linear-gradient(to right, #4fd1c5, #f6e05e); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + padding: 2rem 0; +`; + +const Description = styled.p` + max-width: 4xl; + margin: 1rem auto 3rem; + text-align: center; + font-size: 1.25rem; + font-weight: bold; + background: linear-gradient(to right, #fbbf24, #f472b6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +`; + +const Graphic = ({ emoji }) => ( + + + {emoji} + + +); + function CommunityEvangelist() { return ( - <> -
- -
-

- Become a Community Evangelist -

- -

- We are excited to introduce the role of Community Evangelists, who will play a vital part in expanding our reach, strengthening our network, promoting engagement, and fostering leadership within the community. As a Community Evangelist, you will have the opportunity to create public groups for nameSpace, market public events and meetups, and lead initiatives that align with our mission. -

- -

- Role and - - Responsibilities - +
+ + Become a Community Evangelist + + We are excited to introduce the role of Community Evangelists, who will play a vital part in expanding our reach, strengthening our network, promoting engagement, and fostering leadership within the community. As a Community Evangelist, you will have the opportunity to create public groups for nameSpace, market public events and meetups, and lead initiatives that align with our mission. + + + + +

+ Role and Responsibilities

-
    + + + +
    • Create and Manage Public Groups: Foster a collaborative environment for members.
    • Promote Public Events and Meetups: Actively market our events, ensuring high participation.
    • Expand Community Reach: Engage students from various colleges to build a diverse network.
    • Collaboration Opportunities: Collaborate with other tech communities in upcoming events.
    +     + -

    - Perks and - - Benefits - + + +

    + Perks and Benefits

    -
      + + + +
      • Selection Letter and Completion Certificate
      • Expand your network and exchange ideas within a dynamic community.
      • Leadership Experience: Work under the established brand of the nameSpace Community.
      • Exclusive Invitations: Attend all public meetups and flagship events.
      +       + -

      - Why This is a - - Great Deal for You - + + +

      + Why This is a Great Deal for You

      -
        + + + +
        • Career Advancement: Boost your resume with valuable experience.
        • Skill Development: Enhance leadership, project management, and marketing skills.
        • Mentorship: Receive guidance from experienced professionals.
        • Be a Changemaker: Shape the future of one of the largest tech communities in Delhi-NCR.
        +         + -

        - Eligibility - - Criteria - + + +

        + Eligibility Criteria

        -
          + + + +
          • Current Enrollment: 2nd or 3rd-year bachelorโ€™s degree student.
          • Community Passion: Genuine interest in building and supporting tech communities.
          • Leadership Qualities: Ability to inspire and guide others.
          • Technical Proficiency: Strong development skills.
          +           + - -

- -
- +
+ + + +
+ + ); } diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 19c20c8e..49fd5588 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -38,10 +38,11 @@ const ContentWrapper = styled.div` const RightText = styled.div` display: flex; align-items: center; - width: 25rem; + p { margin-right: 1rem; + width: } a { @@ -75,7 +76,6 @@ const RightText = styled.div` const LeftText = styled.div` text-align: left; - width: 25rem; @media only Screen and (max-width: 48em) { text-align: center; } diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 7e95f468..53d023f7 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -272,7 +272,7 @@ function Navbar() { )} - @@ -286,7 +286,7 @@ function Navbar() {
)} - + */} {/* */} + + + + + +