Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Shipyard button in mobile view #349

Merged
merged 5 commits into from
Oct 1, 2024
+94 −138
Merged

Added Shipyard button in mobile view #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
10afb2a
fixed navbar
YASH-YADAV-dynamo Sep 30, 2024
223087e
added shipyard button in mobile view
YASH-YADAV-dynamo Sep 30, 2024
b02ecb7
added Shipyard button in mobile view
YASH-YADAV-dynamo Sep 30, 2024
d13f618
moved Shipyard button to fourth position
YASH-YADAV-dynamo Sep 30, 2024
f4a3a22
Merge branch 'main' into main
Mr-Sunglasses Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 46 additions & 78 deletions src/components/Contact.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useState } from "react";
import axios from "axios";
const url = process.env.REACT_APP_BACKEND_URL;
import {
FaDiscord,
FaReddit,
Expand All @@ -11,20 +10,23 @@ import {
} from 'react-icons/fa';

const Contact = () => {
const url = process.env.REACT_APP_BACKEND_URL;
const [data, setData] = useState({
name: "",
email: "",
message: "",
});

function handle(e) {
const newData = { ...data };
newData[e.target.id] = e.target.value;
setData(newData);
console.log(newData);
}

function submit(e) {
e.preventDefault();
console.log("click");
console.log("Submitting to:", url);
axios
.post(url, {
name: data.name,
Expand All @@ -33,95 +35,61 @@ const Contact = () => {
})
.then((res) => {
console.log(res.data);
alert("Thanks for Equiring we will shortly contact you :)");
alert("Thanks for inquiring, we will contact you shortly :)");
setData({
name: "",
email: "",
message: "",
});
})
.catch((error) => {
console.error("Error submitting form:", error);
alert("There was an error submitting the form. Please try again.");
});
}

return (
<div>
<section class="text-gray-400 bg-gray-1000 body-font ">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-12">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
<section className="text-gray-400 bg-gray-1000 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-col text-center w-full mb-12">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
Contact Us
</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base"></p>
</div>
<div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
<div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
<div className="w-12 h-10 flex flex-col items-center">
<a href="https://discord.com/invite/4xruwjjU9B" target="discord" > <FaDiscord className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
</div>
<div className="w-12 h-10 flex flex-col items-center">
<a href="https://www.reddit.com/r/fosscu/" target="discord" > <FaReddit className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
</div>
<div className="w-12 h-10 flex flex-col items-center">
<a href="Mailto:[email protected]" target="mail" ><FaEnvelope className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
</div>
<div className="w-12 h-10 flex flex-col items-center">
<a href="https://www.linkedin.com/company/fosscu/" target="linkedin" ><FaLinkedin className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
</div>
<div className="w-12 h-10 flex flex-col items-center">
<a href="https://twitter.com/fosscuk" target="twitter" ><FaTwitter className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
</div>
<div className="w-12 h-10 flex flex-col items-center">
<a href= "https://matrix.to/#/#fosscu:matrix.org" target="Matrix" ><FaNetworkWired className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
</div>
<div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
<div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
<SocialIcon href="https://discord.com/invite/4xruwjjU9B" Icon={FaDiscord} />
<SocialIcon href="https://www.reddit.com/r/fosscu/" Icon={FaReddit} />
<SocialIcon href="Mailto:[email protected]" Icon={FaEnvelope} />
<SocialIcon href="https://www.linkedin.com/company/fosscu/" Icon={FaLinkedin} />
<SocialIcon href="https://twitter.com/fosscuk" Icon={FaTwitter} />
<SocialIcon href="https://matrix.to/#/#fosscu:matrix.org" Icon={FaNetworkWired} />
</div>
</div>
<div class="lg:w-1/2 md:w-2/3 mx-auto">
<form class="flex flex-wrap -m-2"
// onSubmit={(e) => submit(e)}
netlify>
<div class="p-2 w-1/2">
<div class="">
<label for="name" class="leading-7 text-sm text-gray-400">
Name
</label>
<input
type="text"
id="name"
onChange={(e) => handle(e)}
value={data.name}
class="w-full bg-gray-800 hover:outline-2 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
/>
</div>
</div>
<div class="p-2 w-1/2">
<div class="">
<label for="email" class="leading-7 text-sm text-gray-400">
Email
</label>
<input
type="email"
id="email"
name="email"
onChange={(e) => handle(e)}
value={data.email}
class="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
/>
</div>
</div>
<div class="p-2 w-full">
<div class="">
<label for="message" class="leading-7 text-sm text-gray-400">
Message
</label>
<textarea
id="message"
name="message"
onChange={(e) => handle(e)}
value={data.message}
class="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
></textarea>
</div>
</div>
<div class="p-2 w-full">
<button class="flex mx-auto tracking-tight font-semibold text-black bg-[#00ff11c4] border-0 py-2 px-8 focus:outline-none hover:bg-[#0dff1c] rounded text-lg">
<div className="lg:w-1/2 md:w-2/3 mx-auto">
<form className="flex flex-wrap -m-2" onSubmit={submit}>
<InputField
id="name"
label="Name"
value={data.name}
onChange={handle}
/>
<InputField
id="email"
label="Email"
type="email"
value={data.email}
onChange={handle}
/>
<TextArea
id="message"
label="Message"
value={data.message}
onChange={handle}
/>
<div className="p-2 w-full">
<button className="flex mx-auto tracking-tight font-semibold text-black bg-[#00ff11c4] border-0 py-2 px-8 focus:outline-none hover:bg-[#0dff1c] rounded text-lg">
Submit
</button>
</div>
Expand All @@ -133,4 +101,4 @@ const Contact = () => {
);
};

export default Contact;
export default Contact;
108 changes: 48 additions & 60 deletions src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,55 +39,49 @@ const Navbar = () => {
</h1>
<ul className="hidden md:flex">
<li
className={`p-4 ${
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
}`}
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
}`}
>
<Link to="/"> Home </Link>{" "}
</li>
<li
className={`p-4 ${
activeLink === "/about"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
}`}
className={`p-4 ${activeLink === "/about"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
}`}
>
<Link to="/about">About</Link>
</li>
<li
className={`p-4 ${
activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
}`}
className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
}`}
>
<Link to="/team"> Team </Link>{" "}
</li>

<li
className={`p-4 ${
activeLink === "/resource"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
className={`p-4 ${activeLink === "/resource"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
>
<a href="/resource">Resources</a>
</li>

<li
className={`p-4 ${
activeLink === "/contact"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C]`}
className={`p-4 ${activeLink === "/contact"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C]`}
>
<Link to="/contact">Contact</Link>
</li>

<li
className={`p-4 ${
activeLink === "/shipyard"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C]`}
className={`p-4 ${activeLink === "/shipyard"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C]`}
>
<Link to="/shipyard">Shipyard</Link>
</li>
Expand Down Expand Up @@ -160,61 +154,55 @@ const Navbar = () => {
</center>
<ul className="uppercase p-4">
<li
className={`p-4 ${
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600`}
>
<Link to="/" onClick={() => handleLinkClick("/")}>
{" "}
Home{" "}
</Link>{" "}
Home
</Link>
</li>
<li
className={`p-4 ${
activeLink === "/about"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
className={`p-4 ${activeLink === "/about" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600`}
>
<Link to="/about">About</Link>
</li>
<li
className={`p-4 ${
activeLink === "/team"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600`}
>
<Link to="/team">Team</Link>
</li>
<li
className={`p-4 ${activeLink === "/shipyard" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600`}
>
<Link to="/team"> Team </Link>{" "}
<Link to="/shipyard" onClick={() => handleLinkClick("/shipyard")}>
Shipyard
</Link>
</li>
<li
className={`p-4 ${
activeLink === "/resource"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
className={`p-4 ${activeLink === "/resource" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600`}
>
<Link to="/resource">Resources</Link>{" "}
<Link to="/resource">Resources</Link>
</li>
<li className={`p-4 border-b border-gray-600 `}>
<a href="https://docs.fosscu.org">Handbook</a>{" "}
<li className="p-4 border-b border-gray-600">
<a href="https://docs.fosscu.org">Handbook</a>
</li>
<li className={`p-4 border-b border-gray-600 `}>
<li className="p-4 border-b border-gray-600">
<a href="https://github.com/FOSS-Community">Projects</a>
</li>
<li
className={`p-4 ${
activeLink === "/contact"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
className={`p-4 ${activeLink === "/contact" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600`}
>
<Link to="/contact">Contact</Link>
</li>
<li className={`p-4 border-b border-gray-600 `}>
<a href="https://lu.ma/fosscu">Calender</a>
<li className="p-4 border-b border-gray-600">
<a href="https://lu.ma/fosscu">Calendar</a>
</li>
<li className={`p-4 border-b border-gray-600 `}>
<li className="p-4 border-b border-gray-600">
<a href="https://github.com/FOSS-Community/">Contribute</a>
</li>
</ul>
Expand Down