Skip to content

Commit

Permalink
feat: homepage, socials and contact | design (#924)
Browse files Browse the repository at this point in the history 
* feat: homepage, socials and contact | design

* feat: homepage, socials and contact | design
  • Loading branch information
@0xk4b1r
0xk4b1r authored Oct 31, 2024
1 parent e027efa commit 2c64a4f
Show file tree
Hide file tree
Showing 11 changed files with 413 additions and 343 deletions.
28 changes: 14 additions & 14 deletions src/components/Homepage/ContactForm/ContactForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
CoverRight,
EmailIcon,
ErrorMessage,
H1,
InternshipIcon,
MessageIcon,
OrgIcon,
Expand All @@ -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();
Expand Down Expand Up @@ -207,15 +206,16 @@ const ContactForm = () => {
return (
<ContactFormContainer id={"contactUs"}>
{/* <H1> {"Internship, Volunteer and Speaker Opportunities.".toUpperCase()} </H1> */}
<H1> {"Internship Opportunities".toUpperCase()} </H1>
<SectionTitle> {"Internship Opportunities".toUpperCase()} </SectionTitle>
<ContactFormCard>
<ContactFormSection onSubmit={handleSubmit}>
<Cover>
<CoverLeft>
<ContactFormLabel htmlFor="name">
<PersonIcon />
<PersonIcon size={26} />
</ContactFormLabel>
<ContactFormInput
autoFocus
type="text"
name="name"
id="name"
Expand All @@ -226,22 +226,22 @@ const ContactForm = () => {
</CoverLeft>
<CoverRight>
<ContactFormLabel htmlFor="name">
<EmailIcon />
<EmailIcon size={26} />
</ContactFormLabel>
<ContactFormInput
type="text"
name="email"
id="email"
value={formData.email}
onChange={handleChange}
placeholder={"Email"}
placeholder="Email"
/>
</CoverRight>
</Cover>

<CoverLeft>
<ContactFormLabel htmlFor="reason">
<ReasonIcon />
<ReasonIcon size={26} />
</ContactFormLabel>
<ContactFormSelect
aria-label="reason"
Expand Down Expand Up @@ -269,7 +269,7 @@ const ContactForm = () => {
<>
<CoverLeft>
<ContactFormLabel htmlFor="reasonType">
<InternshipIcon />
<InternshipIcon size={26} />
</ContactFormLabel>
<ContactFormSelect
name="reasonType"
Expand All @@ -288,7 +288,7 @@ const ContactForm = () => {
<Cover>
<CoverLeft>
<ContactFormLabel htmlFor="resume">
<ResumeIcon />
<ResumeIcon size={26} />
</ContactFormLabel>
<ContactFormInput
type="text"
Expand All @@ -310,7 +310,7 @@ const ContactForm = () => {
<CoverLeft>
<CoverLeft style={{ maxWidth: "200px" }}>
<ContactFormLabel htmlFor="resume">
<DiscordButtonIcon size={16} />
<DiscordButtonIcon size={26} />
</ContactFormLabel>
<RedirectLink
style={{ color: "white" }}
Expand All @@ -329,7 +329,7 @@ const ContactForm = () => {
{!isOpened && reason === "internship" && (
<CoverLeft>
<ContactFormLabel htmlFor="reasonType">
<InternshipIcon />
<InternshipIcon size={26} />
</ContactFormLabel>
<ContactFormInput
type="text"
Expand All @@ -345,7 +345,7 @@ const ContactForm = () => {
{reason === "feedback" && (
<CoverLeft>
<ContactFormLabel htmlFor="contextHeading">
<OrgIcon />
<OrgIcon size={26} />
</ContactFormLabel>
<ContactFormInput
type="text"
Expand All @@ -360,7 +360,7 @@ const ContactForm = () => {
{reason === "other" && (
<CoverLeft>
<ContactFormLabel htmlFor="contextHeading">
<OrgIcon />
<OrgIcon size={26} />
</ContactFormLabel>
<ContactFormInput
type="text"
Expand All @@ -375,7 +375,7 @@ const ContactForm = () => {
{reason === "internship" && !isOpened ? null : (
<CoverLeft style={{ alignItems: "start" }}>
<ContactFormLabel htmlFor="message">
<MessageIcon />
<MessageIcon size={26} />
</ContactFormLabel>
<ContactFormTextArea
type="text"
Expand Down
24 changes: 13 additions & 11 deletions src/components/Homepage/ContactForm/ContactFormElements.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styled from "styled-components";
import { AiTwotoneMail } from "react-icons/ai";
import { BsQuestionSquareFill, BsTelephoneFill, BsFillPersonFill } from "react-icons/bs";
import { CgNotes, CgOrganisation, CgWorkAlt } from "react-icons/cg";
import { CiMail } from "react-icons/ci";
import { RiQuestionAnswerFill } from "react-icons/ri";
import { SiFirefoxbrowser, SiFsecure } from "react-icons/si";

Expand Down Expand Up @@ -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,
Expand All @@ -84,7 +84,7 @@ export const Cover = styled.div`
justify-content: center;
align-items: center;
width: 100%;
gap: 5px;
gap: 8px;
@media (width <= 500px) {
flex-direction: column;
Expand All @@ -109,20 +109,18 @@ export const CoverLeft = styled.div`
`;

export const CoverRight = styled.div`
font-family: Poppins, sans-serif;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: start;
align-items: center;
width: 100%;
background: #101010;
padding: 15px;
border-radius: 2px;
margin: 5px 0;
margin-left: 5px;
@media (width <= 500px) {
margin-left: 0;
margin-right: 0;
}
`;

Expand Down Expand Up @@ -161,9 +159,9 @@ export const OrgIcon = styled(CgOrganisation)`
color: #666;
margin: 0 10px;
`;
export const EmailIcon = styled(AiTwotoneMail)`
export const EmailIcon = styled(CiMail)`
color: #666;
margin: 20px 10px;
margin: 0 10px;
`;

export const WebIcon = styled(SiFirefoxbrowser)`
Expand Down Expand Up @@ -201,21 +199,24 @@ 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;
}
&:focus {
outline: none;
border: none;
box-shadow: none;
}
&:hover {
Expand All @@ -234,6 +235,7 @@ export const ContactFormSelect = styled.select`
border: none;
color: #f5f5f5;
width: 100%;
margin-left: 16px;
@media (width <= 900px) {
font-size: 17px;
Expand Down
8 changes: 1 addition & 7 deletions src/components/Homepage/Homepage.jsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down
Loading

0 comments on commit 2c64a4f

Please sign in to comment.