From 63591244218e96ed21ee294f42f6d5daaf93011e Mon Sep 17 00:00:00 2001 From: Kabir <44284877+kabir0x23@users.noreply.github.com> Date: Thu, 31 Oct 2024 19:10:57 +0530 Subject: [PATCH 1/2] feat: homepage, socials and contact | design --- .../Homepage/ContactForm/ContactForm.jsx | 8 +- .../ContactForm/ContactFormElements.jsx | 9 +- src/components/Homepage/Homepage.jsx | 8 +- src/components/Homepage/Info/Data.jsx | 67 ++--- src/components/Homepage/Info/Info.jsx | 37 +-- src/components/Homepage/Info/InfoElements.jsx | 249 ++++++++++++------ src/components/Homepage/Socials/Socials.jsx | 148 +++++------ .../Homepage/Socials/SocialsElements.jsx | 193 +++++++------- .../MixComponents/Buttons/ButtonElements.jsx | 2 +- .../Tools/CodeSnippets/CodeSnippets.jsx | 0 .../CodeSnippets/CodeSnippetsElements.jsx | 0 11 files changed, 396 insertions(+), 325 deletions(-) create mode 100644 src/components/Tools/CodeSnippets/CodeSnippets.jsx create mode 100644 src/components/Tools/CodeSnippets/CodeSnippetsElements.jsx diff --git a/src/components/Homepage/ContactForm/ContactForm.jsx b/src/components/Homepage/ContactForm/ContactForm.jsx index b9da4d91..567b7b7e 100644 --- a/src/components/Homepage/ContactForm/ContactForm.jsx +++ b/src/components/Homepage/ContactForm/ContactForm.jsx @@ -13,7 +13,6 @@ import { CoverRight, EmailIcon, ErrorMessage, - H1, InternshipIcon, MessageIcon, OrgIcon, @@ -33,9 +32,9 @@ import { validateEmail } from "src/utils/validateEmail.js"; import apiStatus from "src/features/apiStatus.jsx"; import { Wrapper } from "src/components/Dashboard/Profile/ProfileElements.jsx"; import UnderMaintenance from "src/components/Other/UnderMaintenance/UnderMaintenance.jsx"; -// import { volunteerPrograms } from "src/components/Opportunities/Volunteer/VolunteerData"; import { RedirectLink } from "src/components/Learn/Roadmaps/RoadmapElements.jsx"; import { DiscordButtonIcon } from "src/components/Other/Community/CommunityElements.jsx"; +import { SectionTitle } from "src/components/Homepage/Socials/SocialsElements.jsx"; const ContactForm = () => { const { isApiLoading, isApiWorking } = apiStatus(); @@ -207,7 +206,7 @@ const ContactForm = () => { return ( {/*

{"Internship, Volunteer and Speaker Opportunities.".toUpperCase()}

*/} -

{"Internship Opportunities".toUpperCase()}

+ {"Internship Opportunities".toUpperCase()} @@ -216,6 +215,7 @@ const ContactForm = () => { { id="email" value={formData.email} onChange={handleChange} - placeholder={"Email"} + placeholder="Email" /> diff --git a/src/components/Homepage/ContactForm/ContactFormElements.jsx b/src/components/Homepage/ContactForm/ContactFormElements.jsx index ec79993a..ec7f0ec8 100644 --- a/src/components/Homepage/ContactForm/ContactFormElements.jsx +++ b/src/components/Homepage/ContactForm/ContactFormElements.jsx @@ -63,7 +63,7 @@ export const ContactFormContainer = styled.div` color: #fff; font-family: inherit; background-color: transparent; - border: 1px solid #414141; + border: none; } input&::placeholder, @@ -201,14 +201,15 @@ export const ContactFormInput = styled.input` display: flex; flex-direction: row; justify-content: flex-start; - align-items: center; /* Align icon vertically with input field */ + align-items: center; border-radius: 5px; background: transparent; - border: transparent; color: #f5f5f5; width: 100%; text-underline-offset: 5px; font-size: 20px; + outline: none; + border: 1px solid #1a1c1d; &::placeholder { color: #f5f5f5; @@ -216,6 +217,8 @@ export const ContactFormInput = styled.input` &:focus { outline: none; + border: none; + box-shadow: none; } &:hover { diff --git a/src/components/Homepage/Homepage.jsx b/src/components/Homepage/Homepage.jsx index 413ad21f..d2a6c9f4 100644 --- a/src/components/Homepage/Homepage.jsx +++ b/src/components/Homepage/Homepage.jsx @@ -1,11 +1,5 @@ import React from "react"; -import { - Hero, - Info, - Socials, - // SpecialSponsors -} from "src/components/index"; -// import { SpecialSponsors } from "./SpecialSponsors/SpecialSponsors" +import { Hero, Info, Socials } from "src/components/index"; import { aboutData, ResourcesData, communityData, contributeData } from "./Info/Data"; import ContactForm from "./ContactForm/ContactForm"; diff --git a/src/components/Homepage/Info/Data.jsx b/src/components/Homepage/Info/Data.jsx index b8484449..cc2d3705 100644 --- a/src/components/Homepage/Info/Data.jsx +++ b/src/components/Homepage/Info/Data.jsx @@ -1,11 +1,9 @@ import React from "react"; import { getCdnAssets } from "src/features/apiUrl"; - import { FaGithub } from "react-icons/fa"; import { IconsSpacing, IconsSpacing2 } from "src/components/Other/MixComponents/Buttons/ButtonElements"; import { BsFillPlayFill } from "react-icons/bs"; import { List, ListContainer, ListContent, ListIcon } from "src/components/Resources/Jobs/JobDetailsElements"; - import contributeSvg from "src/assets/images/open-source-contribution.svg"; import ResourcesSvg from "src/assets/images/undraw_firmware_re_fgdy.svg"; import VersionControlSvg from "src/assets/images/undraw_version_control_re_mg66.svg"; @@ -24,36 +22,27 @@ export const aboutData = { Welcome to TheCyberHUB, the ultimate destination for cybersecurity enthusiasts.

- Explore what we offer: - + Explore our offerings: + - - Access Cyber Security courses for FREE (coming soon). - + Free Cybersecurity courses (coming soon). - - Our community's goal is to help newcomers get started with Opensource and Cybersecurity. - + Guidance for newcomers in open-source and cybersecurity. - - Join a community with more than 150,000 members. - + A community of over 150,000 members. - - Contribute to Opensource projects; our Website, Mobile App, Web Extensions, and Bots are built - by TheCyberworld community. - + Contribute to open-source projects, including our website and apps. - Become a part of a Hub of Cyber Security. + Become part of a hub for cybersecurity. @@ -61,7 +50,7 @@ export const aboutData = { buttonLabel1: "Join our Community", link1: "/community", buttonType1: "router", - buttonLabel2: "Contribute to Opensource", + buttonLabel2: "Contribute to Open Source", link2: "/opensec-projects", buttonType2: "router", imgStart: false, @@ -83,8 +72,8 @@ export const ResourcesData = { headline: "Cyber Sec Resources", description: ( <> - Explore Cyber Security Resources.
- Courses, CTFs, Events, Blogs, Tools, WriteUps, Roadmaps, and much more. + Explore a variety of Cyber Security Resources, including courses, CTFs, events, blogs, tools, write-ups, and + roadmaps. ), buttonLabel1: ( @@ -106,27 +95,24 @@ export const ResourcesData = { export const communityData = { id: "community", idTo: "join", - buttonLabel1: "Join community", + buttonLabel1: "Join Community", link1: "https://discord.gg/thecyberworld-799183504759324672", buttonType1: "redirect", - buttonLabel2: "All community links", + buttonLabel2: "All Community Links", link2: "https://linktr.ee/th3cyb3rhub", buttonType2: "redirect", lightBg: false, lightText: true, lightTextDesc: true, topLine: "Join our Community", - headline: "150,000+ members", + headline: "150,000+ Members", description: ( <> - Community's goal is to help new folks to get started with open-source, cyber-security and to help - existing folks get more involved in the open-source and cyber-security communities. + Our community helps newcomers get started with open-source and cybersecurity while encouraging existing + members to engage further. ), imgStart: true, - // img: communitySvg, - // video: true, - // alt: "Community Video", dark: true, primary: true, darkText: false, @@ -137,13 +123,12 @@ export const contributeData = { lightBg: false, lightText: true, lightTextDesc: true, - topLine: "Contribute to Thecyberworld", - headline: "Want to contribute?", + topLine: "Contribute to TheCyberworld", + headline: "Want to Contribute?", description: ( <> - That's great! We welcome all sorts of contributions from raising issues, starting discussions, adding - documentation, making pull requests and so much more! Help each other and make improvements! Check the - contributing guidelines in each repository for guidance on how to get started. + We welcome contributions such as raising issues, discussions, documentation, and pull requests. Check the + contributing guidelines in each repository to get started. ), buttonLabel1: ( @@ -156,19 +141,19 @@ export const contributeData = { ), link1: "https://github.com/th3cyb3rhub", buttonType1: "redirect", - buttonLabel2: <>Contribute to Community, + buttonLabel2: "Contribute to Community", link2: "/community", buttonType2: "router", imgStart: false, img: contributeSvg, - alt: "Opensource contribution SVG", + alt: "Open Source Contribution SVG", dark: true, primary: true, darkText: false, }; export const OpenSource = { - id: "contribute", + id: "open-source", lightBg: false, lightText: true, lightTextDesc: true, @@ -176,8 +161,8 @@ export const OpenSource = { headline: "What is Open Source?", description: (

- Open source software (OSS) is software that is distributed with its source code, making it available for - use, modification, and distribution with its original rights. + Open source software (OSS) is distributed with its source code, allowing for use, modification, and + redistribution under its original rights.

), buttonLabel_ContributeToOpensource: ( @@ -185,13 +170,13 @@ export const OpenSource = { - Contribute now + Contribute Now ), buttonLabelNew: "Open Source Projects", imgStart: false, img: VersionControlSvg, - alt: "Secure data", + alt: "Secure Data", dark: true, primary: true, darkText: false, diff --git a/src/components/Homepage/Info/Info.jsx b/src/components/Homepage/Info/Info.jsx index e7b5bdcd..6a6ef8fe 100644 --- a/src/components/Homepage/Info/Info.jsx +++ b/src/components/Homepage/Info/Info.jsx @@ -6,6 +6,7 @@ import { Column2, Heading, Img, + FloatingImage, ImgWrap, InfoContainer, InfoRow, @@ -13,6 +14,8 @@ import { Subtitle, TextWrapper, TopLine, + YouTubeVideoContainer, + YouTubeVideoIFrame, // YouTubeVideoContainer, // YouTubeVideoIFrame, } from "./InfoElements"; @@ -123,21 +126,25 @@ const InfoSection = ({ - {/* {img ? ( */} - - {alt} - - {/* ) : ( */} - {/* */} - {/* */} - {/* */} - {/* )} */} + {img ? ( + + {img?.includes("Thecyberworld_logo_outlined") ? ( + + ) : ( + {alt} + )} + + ) : ( + + + + )} diff --git a/src/components/Homepage/Info/InfoElements.jsx b/src/components/Homepage/Info/InfoElements.jsx index 5a7a7616..13953607 100644 --- a/src/components/Homepage/Info/InfoElements.jsx +++ b/src/components/Homepage/Info/InfoElements.jsx @@ -2,168 +2,251 @@ import styled from "styled-components"; import { Link as ScrollLink } from "react-scroll"; import { BsSquareFill } from "react-icons/bs"; +// Dot symbol for icons export const DotSymbol = styled(BsSquareFill)` color: #ff6b08; margin-bottom: 4px; - margin-right: 4px; + margin-right: 8px; font-size: 0.5rem; - display: inline; - justify-content: center; - text-align: center; + display: inline-flex; + align-items: center; `; +// Container for YouTube video export const YouTubeVideoContainer = styled.div` width: 100%; - height: 300px; + height: auto; display: flex; justify-content: center; align-items: center; - - @media screen and (width <= 768px) { - margin-top: 100px; + padding: 10px; + background: rgb(255 107 8 / 3%); + border-radius: 12px; + box-shadow: 0 8px 32px rgb(0 0 0 / 10%); + margin: 2rem 0; + + @media (width <= 768px) { + padding: 1rem; } `; +// YouTube video iframe styling export const YouTubeVideoIFrame = styled.iframe` - width: 500px; - height: 300px; - - @media screen and (width <= 1000px) { - width: 400px; - height: 300px; - } - - @media screen and (width <= 900px) { - width: 280px; - height: 200px; - } - - @media screen and (width <= 760px) { - width: 500px; - height: 300px; - } - - @media screen and (width <= 600px) { - width: 350px; - height: 250px; - } - - @media screen and (width <= 400px) { - width: 280px; - height: 200px; + width: 100%; + max-width: 560px; + aspect-ratio: 16/9; + border-radius: 8px; + box-shadow: 0 8px 32px rgb(0 0 0 / 20%); + border: 1px solid rgb(255 107 8 / 10%); + + @media (width <= 768px) { + max-width: 100%; } `; +// General info container export const InfoContainer = styled.div` color: #f5f5f5; - background: ${({ lightBg }) => (lightBg ? "#f9f9f9" : "#000000")}; - - @media screen and (width <= 768px) { - padding: 100px 0; + background: ${({ lightBg }) => (lightBg ? "rgba(249, 249, 249, 0.02)" : "#0a0a0a")}; + padding: 5rem 0; + position: relative; + overflow: hidden; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgb(255 107 8 / 20%), transparent); } `; +// Wrapper for info content export const InfoWrapper = styled.div` display: grid; z-index: 1; - height: 700px; width: 100%; - max-width: 1400px; - margin-right: auto; - margin-left: auto; + max-width: 1200px; + margin: 0 auto; padding: 0 24px; - justify-content: center; + gap: 2rem; - @media screen and (width <= 768px) { - height: 100%; + @media (width <= 768px) { + padding: 0 16px; } `; +// Scroll link button style export const ScrollText = styled(ScrollLink)` - margin: 10px 10px 10px 20px; + margin: 10px; cursor: pointer; + padding: 8px 16px; + border-radius: 6px; + transition: all 0.2s ease-in-out; + background: rgb(255 107 8 / 5%); + color: #f5f5f5; + font-weight: 500; + + &:hover { + background: rgb(255 107 8 / 10%); + transform: translateY(-2px); + } `; + +// Info row for layout export const InfoRow = styled.div` - width: 100%; display: grid; - grid-auto-columns: minmax(auto, 1 lf); + grid-template-columns: 1fr 1fr; + gap: 3rem; align-items: center; grid-template-areas: ${({ $imgStart }) => ($imgStart ? `'col2 col1'` : `'col1 col2'`)}; - @media screen and (width <= 768px) { - grid-template-areas: ${({ $imgStart }) => ($imgStart ? `'col1' 'col2'` : `'col1 col1' 'col2 col2'`)}; + @media (width <= 968px) { + grid-template-columns: 1fr; + grid-template-areas: "col1" "col2"; + gap: 2rem; } `; +// Column 1 layout export const Column1 = styled.div` grid-area: col1; display: flex; - justify-content: space-between; - width: 100%; - max-width: 700px; + flex-direction: column; + gap: 1.5rem; `; +// Column 2 layout export const Column2 = styled.div` - padding: 0 15px; grid-area: col2; + display: flex; + justify-content: center; + align-items: center; `; +// Text wrapper for structured content export const TextWrapper = styled.div` - max-width: 800px; - width: 100%; + display: flex; + flex-direction: column; + gap: 1.5rem; + max-width: 600px; `; +// Top line styling export const TopLine = styled.p` color: #ff6b08; - font-size: 16px; - line-height: 16px; - font-weight: 700; - letter-spacing: 1.4px; + font-size: 1rem; + font-weight: 600; + letter-spacing: 2px; text-transform: uppercase; - margin-bottom: 16px; + position: relative; + display: inline-block; + padding-bottom: 8px; + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 2rem; + height: 2px; + background: #ff6b08; + } `; +// Heading styling export const Heading = styled.h1` - margin-bottom: 24px; - font-size: 48px; - line-height: 1.1; - font-weight: 600; + font-size: clamp(2rem, 5vw, 3.3rem); + line-height: 1.2; + font-weight: 700; color: ${({ $lightText }) => ($lightText ? "#f5f5f5" : "#000000")}; + letter-spacing: -0.5px; - @media screen and (width <= 480px) { - font-size: 32px; + span { + color: #ff6b08; } `; +// Subtitle styling export const Subtitle = styled.div` - max-width: 600px; - margin-bottom: 35px; - font-size: 18px; - line-height: 24px; - color: ${({ $darkText }) => ($darkText ? "#000000" : "#f5f5f5")}; + font-size: 1.125rem; + line-height: 1.6; + color: ${({ $darkText }) => ($darkText ? "#000000" : "rgba(245, 245, 245, 0.8)")}; + max-width: 540px; `; +// Button wrapper export const BtnWrap = styled.div` display: flex; - justify-content: flex-start; + gap: 1rem; + flex-wrap: wrap; - @media screen and (width <= 600px) { - display: grid; - flex-direction: row; + @media (width <= 600px) { justify-content: center; - align-items: center; } `; +// Image wrapper styling export const ImgWrap = styled.div` - @media screen and (width <= 768px) { - margin-top: 100px; + width: 100%; + max-width: 500px; + height: auto; + position: relative; + + &::after { + content: ""; + position: absolute; + inset: 10px -10px -10px 10px; + border: 1px solid rgb(255 107 8 / 20%); + border-radius: 12px; + z-index: -1; } `; +// Image styling export const Img = styled.img` - max-height: 400px; - font-size: 12px; - color: #999; - word-break: break-all; + width: 100%; + height: auto; + max-height: 500px; + object-fit: cover; + border-radius: 12px; + box-shadow: 0 8px 32px rgb(0 0 0 / 15%); + border: 1px solid rgb(255 107 8 / 10%); + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.02); + } +`; + +export const FloatingImage = styled.img` + width: 100%; + height: auto; + max-height: 500px; + border-radius: 5px; + position: relative; + animation: logo-animation 1s ease-in-out infinite alternate; + box-shadow: 0 8px 32px rgb(0 0 0 / 15%); + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.02); + } + + @media screen and (width <= 400px) { + width: 100%; + height: 100%; + } + + @keyframes logo-animation { + 0% { + transform: translateY(0); + } + + 100% { + transform: translateY(-10px); + } + } `; diff --git a/src/components/Homepage/Socials/Socials.jsx b/src/components/Homepage/Socials/Socials.jsx index bbcb5633..180f7a92 100644 --- a/src/components/Homepage/Socials/Socials.jsx +++ b/src/components/Homepage/Socials/Socials.jsx @@ -1,93 +1,83 @@ import React from "react"; +import { FaDiscord, FaGithub, FaInstagram, FaLinkedinIn, FaTelegramPlane, FaYoutube } from "react-icons/fa"; +import { FaXTwitter } from "react-icons/fa6"; + import { - SocialsContainer, - SocialsWrapper, + SectionTitle, SocialCardDiscord, SocialCardGithub, - SocialCardTwitter, - SocialCardYoutube, - SocialCardTelegram, SocialCardInstagram, SocialCardLinkedin, - // SocialCardFacebook, - SocialH1, + SocialCardTelegram, + SocialCardTwitter, + SocialCardYoutube, + SocialLabel, + SocialsContainer, + SocialsGrid, SocialWrapper, -} from "./SocialsElements"; -import { - FaDiscord, - // FaFacebookF, - FaGithub, - FaInstagram, - FaLinkedinIn, - FaTelegramPlane, - FaYoutube, -} from "react-icons/fa"; -import { - // FaThreads, - FaXTwitter, -} from "react-icons/fa6"; -import { H1 } from "src/components/Homepage/ContactForm/ContactFormElements"; +} from "src/components/Homepage/Socials/SocialsElements.jsx"; +import * as PropTypes from "prop-types"; + +SocialsContainer.propTypes = { children: PropTypes.node }; const Socials = () => { + const socialLinks = [ + { + Component: SocialCardDiscord, + Icon: FaDiscord, + label: "Discord", + href: "https://discord.gg/QHBPq6xP5p", + }, + { + Component: SocialCardGithub, + Icon: FaGithub, + label: "Github", + href: "https://www.github.com/th3cyb3rhub", + }, + { + Component: SocialCardYoutube, + Icon: FaYoutube, + label: "YouTube", + href: "https://www.youtube.com/@th3cyb3rhub", + }, + { + Component: SocialCardLinkedin, + Icon: FaLinkedinIn, + label: "LinkedIn", + href: "https://linkedin.com/company/th3cyb3rhub", + }, + { + Component: SocialCardTelegram, + Icon: FaTelegramPlane, + label: "Telegram", + href: "https://t.me/th3cyb3rhub", + }, + { + Component: SocialCardTwitter, + Icon: FaXTwitter, + label: "Twitter", + href: "https://www.twitter.com/th3cyb3rhub", + }, + { + Component: SocialCardInstagram, + Icon: FaInstagram, + label: "Instagram", + href: "https://www.instagram.com/th3cyb3rhub", + }, + ]; + return ( - -

{"Community Links".toUpperCase()}

- - - Discord - - - - Github - - - - YouTube - - - {/*
*/} - - - LinkedIn - - - - Telegram - - - - Twitter - - - {/* */} - {/* Threads */} - {/* */} - - - Instagram - - - {/* */} - {/* Facebook */} - {/* */} - + + {"COMMUNITY LINKS".toUpperCase()} + + {socialLinks.map(({ Component, Icon, label, href }, index) => ( + + + {label} + + ))} + ); diff --git a/src/components/Homepage/Socials/SocialsElements.jsx b/src/components/Homepage/Socials/SocialsElements.jsx index 9c8d7f0c..fd8a6d16 100644 --- a/src/components/Homepage/Socials/SocialsElements.jsx +++ b/src/components/Homepage/Socials/SocialsElements.jsx @@ -6,139 +6,148 @@ export const SocialWrapper = styled.div` justify-content: center; align-items: center; width: 100%; + background: linear-gradient(to bottom, rgb(0 0 0 / 90%), rgb(0 0 0 / 95%)); + padding: 4rem 0; `; -export const SocialsCard = styled.a` - color: white; - padding: 50px; - font-size: 50px; +export const SocialsContainer = styled.div` + width: 100%; + max-width: 1400px; + padding: 0 2rem; display: flex; flex-direction: column; - justify-content: flex-start; - transition: all 0.2s ease-in-out; - background: linear-gradient(135deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 0%)); - backdrop-filter: blur(10px); - border-radius: 10px; - border: 1px solid rgb(255 255 255 / 18%); - box-shadow: 0 8px 32px 0 rgb(0 0 0 / 37%); - gap: 10px; - - &:hover { - transform: scale(1.05); - transition: all 0.2s ease-in-out; - } - - @media (width <= 780px) { - display: flex; - justify-content: center; - align-items: center; - } + align-items: center; +`; - @media (width <= 480px) { - padding: 25px; +export const SectionTitle = styled.h1` + font-size: clamp(2rem, 5vw, 3.5rem); + color: #f5f5f5; + margin-bottom: 3rem; + text-align: center; + position: relative; + font-weight: 700; + letter-spacing: -1px; + + &::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 4px; + background: linear-gradient(to right, transparent, #ff6b08, transparent); } `; -export const SocialCardDiscord = styled(SocialsCard)` - &:hover { - background: #5865f2; - } +export const SocialsGrid = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + width: 100%; + max-width: 1200px; `; -export const SocialCardGithub = styled(SocialsCard)` - &:hover { - background: #969696; - color: #1e1e1e; +export const SocialCard = styled.a` + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 1rem; + padding: 2rem; + border-radius: 12px; + text-decoration: none; + color: #f5f5f5; + position: relative; + overflow: hidden; + transition: all 0.3s ease-in-out; + border: 1px solid rgb(255 255 255 / 10%); + backdrop-filter: blur(10px); + background: rgb(255 255 255 / 5%); + + svg { + font-size: 3rem; + transition: transform 0.3s ease; + z-index: 2; } -`; -export const SocialCardTwitter = styled(SocialsCard)` - &:hover { - background: #1d9bf0; + &::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(45deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 30%)); + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1; } -`; -export const SocialCardYoutube = styled(SocialsCard)` &:hover { - background: #f00; + transform: translateY(-10px); + box-shadow: 0 15px 30px rgb(0 0 0 / 20%); + + svg { + transform: scale(1.1); + } + + &::before { + opacity: 1; + } } `; -export const SocialCardTelegram = styled(SocialsCard)` +export const SocialCardDiscord = styled(SocialCard)` &:hover { - background: #1d9bf0; + background: #5865f2; + color: white; } `; -export const SocialCardInstagram = styled(SocialsCard)` +export const SocialCardGithub = styled(SocialCard)` &:hover { - background: #b83993; + background: #333; + color: white; } `; -export const SocialCardLinkedin = styled(SocialsCard)` +export const SocialCardTwitter = styled(SocialCard)` &:hover { - background: #1d9bf0; + background: #1da1f2; + color: white; } `; -export const SocialCardFacebook = styled(SocialsCard)` +export const SocialCardYoutube = styled(SocialCard)` &:hover { - background: #1d9bf0; + background: #f00; + color: white; } `; -export const SocialH1 = styled.h1` - font-size: 2rem; - @media (width <= 480px) { - font-size: 25px; +export const SocialCardTelegram = styled(SocialCard)` + &:hover { + background: #08c; + color: white; } `; -export const SocialsContainer = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background: #000; - width: 100%; - max-width: 1400px; - margin: 150px auto; -`; - -export const SocialsWrapper = styled.div` - width: 100%; - padding: 50px; - font-size: 20px; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-auto-rows: 1fr; - grid-gap: 25px; - border-radius: 5px; - - @media screen and (width <= 780px) { - padding: 25px; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - grid-auto-rows: 1fr; - grid-gap: 25px; - width: 100%; - border-radius: 5px; +export const SocialCardInstagram = styled(SocialCard)` + &:hover { + background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + color: white; } `; -export const SocialsH1 = styled.h1` - font-size: 50px; - color: #fff; - margin-bottom: 64px; - +export const SocialCardLinkedin = styled(SocialCard)` &:hover { - color: #ff6b08; - transition: all 0.2s ease-in-out; - font-size: 55px; - margin-bottom: 57px; + background: #0a66c2; + color: white; } +`; - @media screen and (width <= 480px) { - font-size: 2rem; - } +export const SocialLabel = styled.span` + font-size: 1.2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + z-index: 2; `; diff --git a/src/components/Other/MixComponents/Buttons/ButtonElements.jsx b/src/components/Other/MixComponents/Buttons/ButtonElements.jsx index ff6e288e..7a43978f 100644 --- a/src/components/Other/MixComponents/Buttons/ButtonElements.jsx +++ b/src/components/Other/MixComponents/Buttons/ButtonElements.jsx @@ -42,7 +42,7 @@ export const ScrollButton = styled(ScrollLink)` `; export const RouterButton = styled(RouterLink)` - margin: auto 10px 10px; + margin: auto 5px 5px; text-decoration: none; border-radius: 5px; border-width: 1px; diff --git a/src/components/Tools/CodeSnippets/CodeSnippets.jsx b/src/components/Tools/CodeSnippets/CodeSnippets.jsx new file mode 100644 index 00000000..e69de29b diff --git a/src/components/Tools/CodeSnippets/CodeSnippetsElements.jsx b/src/components/Tools/CodeSnippets/CodeSnippetsElements.jsx new file mode 100644 index 00000000..e69de29b From 26313d74eebfbde87176852ccfc6b92d37387a48 Mon Sep 17 00:00:00 2001 From: Kabir <44284877+kabir0x23@users.noreply.github.com> Date: Thu, 31 Oct 2024 19:31:10 +0530 Subject: [PATCH 2/2] feat: homepage, socials and contact | design --- .../Homepage/ContactForm/ContactForm.jsx | 20 +++++++++---------- .../ContactForm/ContactFormElements.jsx | 15 +++++++------- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/Homepage/ContactForm/ContactForm.jsx b/src/components/Homepage/ContactForm/ContactForm.jsx index 567b7b7e..5e77d531 100644 --- a/src/components/Homepage/ContactForm/ContactForm.jsx +++ b/src/components/Homepage/ContactForm/ContactForm.jsx @@ -212,7 +212,7 @@ const ContactForm = () => { - + { - + { - + { <> - + { - + { - + { {!isOpened && reason === "internship" && ( - + { {reason === "feedback" && ( - + { {reason === "other" && ( - + { {reason === "internship" && !isOpened ? null : ( - +