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.

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

Add contribute page #479 #637

Merged
merged 25 commits into from
Nov 18, 2023
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
46773d4
text with translations and a couple images
NatalieWilson19 Sep 27, 2023
309f050
fix links
NatalieWilson19 Sep 27, 2023
39eb6b9
Add link and styling to map image add social media buttons
NatalieWilson19 Sep 27, 2023
5be29d7
add new contribution page to router and footer
NatalieWilson19 Sep 27, 2023
a6ded3e
get rid of redundant divs
NatalieWilson19 Sep 28, 2023
88fc6d0
fix formatting of start a loop
NatalieWilson19 Sep 28, 2023
ce12446
Add 'Where to Find Us' container
NatalieWilson19 Sep 29, 2023
33b9962
fix margins
NatalieWilson19 Sep 29, 2023
d812829
fix background of social media buttons
NatalieWilson19 Sep 29, 2023
366fc17
add mobile formatting
NatalieWilson19 Sep 30, 2023
7980e8e
Add images for contributing to the website
NatalieWilson19 Sep 30, 2023
ce033ed
better styling and text for events
NatalieWilson19 Sep 30, 2023
9a93125
better formatting for website contribution and donations
NatalieWilson19 Sep 30, 2023
79d5ddc
final touches
NatalieWilson19 Oct 1, 2023
5c052f0
Made image for events a link to nearest upcoming event
NatalieWilson19 Oct 4, 2023
3a5b3c3
Refactor
NatalieWilson19 Oct 4, 2023
ee2a875
temporarily add images and delete unused image variables
NatalieWilson19 Oct 9, 2023
7981c05
change order, fix title font, and use smaller font on mobile
NatalieWilson19 Nov 11, 2023
9f4bed6
Add video, fix title font
NatalieWilson19 Nov 12, 2023
903b498
prettier
NatalieWilson19 Nov 13, 2023
2b6845f
Merge branch 'add-contribute-page-#479' of https://github.com/Natalie…
NatalieWilson19 Nov 13, 2023
b59a39b
Use images from the server
NatalieWilson19 Nov 13, 2023
52c3d1f
get rid of where to find us block
NatalieWilson19 Nov 14, 2023
38fdf78
Merge branch 'main' into add-contribute-page-#479
lil5 Nov 17, 2023
2ed038b
Tweaks
lil5 Nov 18, 2023
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
2 changes: 1 addition & 1 deletion frontend/public/locales/en/contribute.json
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
"feedbackDesc": "We are always excited to hear how the Clothing Loop has impacted our members or how we could improve. If you have <strong>improvement suggestions</strong> or want to <strong>share how the Clothing Loop has affected you</strong>, please don’t hesitate to share your thoughts with us!",
"website": "Contribute to Our Website",
"websiteDesc": "<strong>Do you code?</strong> The Clothing Loop is an <strong>open-source website</strong>. Click <aGithub>here</aGithub> to see our open tasks on Github or <aEmail>email us</aEmail> if you're interested in volunteering your programming skills and want to connect with us on Slack and join our weekly developer meetings.",
"donate": "<aDonate>Donate</aDonate>",
"donate": "Donate",
"donateDesc": "All <aDonate>donations</aDonate> to the Clothing Loop are greatly appreciated to help offset costs to keep the Clothing Loop <strong>free and available for all users!</strong>",
"WhereToFindUs": "Where to Find Us"
}
163 changes: 109 additions & 54 deletions frontend/src/pages/Contribute.tsx
Original file line number Diff line number Diff line change
@@ -9,19 +9,21 @@ import { GinParseErrors } from "../util/gin-errors";
import { ToastContext } from "../providers/ToastProvider";
import dayjs from "../util/dayjs";
import { SizeBadges } from "../components/Badges";
import { getLanguageFlags } from "../languages";

const translationFlags = getLanguageFlags(false);

// Media
const CirclesFrame = "https://images.clothingloop.org/0x0/circles.png";
const map = "https://images.clothingloop.org/0x0/map_image_4.png";
const map = "https://images.clothingloop.org/640x0/map_image_4.png";
const ClothesImage =
"https://images.clothingloop.org/768x/nichon_zelfportret.jpg";
// Correct github neural network goes here
const githubActivity = "";

export default function Contribute() {
const { t } = useTranslation("contribute");
const { addToastError, addModal } = useContext(ToastContext);
const { addToastError } = useContext(ToastContext);
const [event, setEvent] = useState<Event | null>(null);
const [isHoveringDonate, setIsHoveringDonate] = useState(false);

useEffect(() => {
window.goatcounter?.count({
@@ -138,48 +140,54 @@ export default function Contribute() {
{t("howToContribute")}
</h1>
<div className="flex flex-col md:flex-row items-center mb-8">
<div className="w-full md:w-1/2 mb-8 md:mb-0">
<p className="prose text-xl md:text-2xl font-bold text-secondary -mt-8 mb-4">
<Trans
i18nKey="donate"
ns="contribute"
components={{
p: <p></p>,
aDonate: (
<Link
className="prose text-xl md:text-2xl font-bold text-secondary"
to="/donate"
target="_blank"
></Link>
),
}}
/>
</p>
<p className="prose text-md md:text-lg font-normal mb-8">
<div className="w-full md:w-1/2">
<h2 className="-mt-8 mb-4">
<Link
className="text-xl md:text-2xl font-bold text-secondary group"
to="/donate"
>
{t("donate")}
<span
className={`ms-2 align-text-bottom border rounded-full inline-flex items-center justify-center w-8 h-8 group-hover:bg-red-light group-hover:text-white transition-colors ${
isHoveringDonate ? "bg-red-light text-white" : "text-red"
}`}
>
<span className="feather feather-heart text-base font-bold" />
</span>
</Link>
</h2>
<p className="prose font-normal mb-8">
<Trans
i18nKey="donateDesc"
ns="contribute"
components={{
p: <p></p>,
aDonate: (
<Link
className="link"
to="/donate"
target="_blank"
onMouseEnter={() => setIsHoveringDonate(true)}
onMouseLeave={() => setIsHoveringDonate(false)}
></Link>
),
}}
/>
</p>
<p className="prose text-xl md:text-2xl font-bold text-secondary mb-4">
<h2 className="text-xl md:text-2xl font-bold text-secondary mb-4">
<Trans i18nKey="startALoop" ns="contribute" />
</p>
<p className="prose text-md md:text-lg font-normal md:mb-8">
</h2>
<p className="prose mb-4">
<Trans i18nKey="startALoopDesc" ns="contribute" />
</p>
<Link
to="/"
className="btn btn-primary w-full sm:w-auto btn-outline text-black md:mb-8"
>
{t("startNewLoop", { ns: "translation" })}
</Link>
</div>
<Link
className="w-full md:w-1/2 md:pl-12"
className="hidden md:block md:w-1/2 md:pl-12"
to="/loops/find"
target="_blank"
>
@@ -191,8 +199,8 @@ export default function Contribute() {
</Link>
</div>

<div className="flex flex-col-reverse md:flex-row items-center mb-8 md:mb-16">
<div className="relative w-full md:w-1/3 mb-4 md:mb-0">
<div className="flex flex-col md:flex-row items-center mb-8 md:mb-16">
<div className="relative w-full md:w-1/3 mb-8 md:mb-0">
<div className="object-cover hover:ring-[1.5rem] ring-secondary transition-[box-shadow]">
{event ? (
<NextUpcomingEvent event={event} key={event.uid} />
@@ -223,17 +231,16 @@ export default function Contribute() {
/>
</div>

<div className="w-full md:w-2/3 md:pl-12 ">
<div className="w-full md:w-2/3 md:pl-24 ">
<div className="w-full md:w-2/3 mb-8 md:mb-0">
<p className="prose text-xl md:text-2xl font-bold text-secondary mb-4">
<h2 className="text-xl md:text-2xl font-bold text-secondary mb-4">
<Trans i18nKey="swap" ns="contribute" />
</p>
<p className="prose text-md md:text-lg font-normal mb-8">
</h2>
<p className="prose font-normal mb-8">
<Trans
i18nKey="swapDesc"
ns="contribute"
components={{
p: <p></p>,
aEvents: (
<Link
className="link font-bold"
@@ -245,10 +252,10 @@ export default function Contribute() {
/>
</p>
</div>
<p className="prose text-xl md:text-2xl font-bold text-secondary mb-4">
<h2 className="text-xl md:text-2xl font-bold text-secondary mb-4">
<Trans i18nKey="shareSwapStory" ns="contribute" />
</p>
<p className="prose text-md md:text-lg font-normal mb-8">
</h2>
<p className="prose font-normal mb-8">
<Trans
i18nKey="shareSwapStoryDesc"
ns="contribute"
@@ -278,10 +285,10 @@ export default function Contribute() {
}}
/>
</p>
<p className="prose text-xl md:text-2xl font-bold text-secondary mb-4">
<h2 className="text-xl md:text-2xl font-bold text-secondary mb-4">
<Trans i18nKey="website" ns="contribute" />
</p>
<p className="prose text-md md:text-lg font-normal mb-8 md:mb-0">
</h2>
<p className="prose font-normal mb-3">
<Trans
i18nKey="websiteDesc"
ns="contribute"
@@ -304,32 +311,49 @@ export default function Contribute() {
}}
/>
</p>
<div className="flex gap-4">
<a
className="group"
target="_blank"
href="https://github.com/the-clothing-loop/website/issues"
>
<span className="flex border rounded-full h-12 px-4 items-center group-hover:text-white group-hover:border-base-content group-hover:bg-black text-lg transition-colors">
<span className="feather feather-git-branch me-2" />
Github
</span>
</a>
<a
className="group"
href="mailto:hello@clothingloop.org"
aria-label="Our email address"
>
<span className="btn btn-circle btn-outline flex justify-center group-hover:text-white group-hover:border-base-content group-hover:bg-[#b464a8] feather feather-mail text-lg"></span>
</a>
</div>
</div>
</div>
<div className="flex flex-col-reverse md:flex-row mb-8">
<div className="w-full md:w-1/2 md:pr-4">
<p className="prose text-xl md:text-2xl font-bold text-secondary mb-4">
<p className="text-xl md:text-2xl font-bold text-secondary mb-4">
<Trans
i18nKey="crowdin"
ns="contribute"
components={{
p: <p></p>,
aCrowdin: (
<a
className="prose text-xl md:text-2xl font-bold text-secondary"
className="underline"
href="https://crowdin.com/project/the-clothing-loop"
target="_blank"
/>
),
}}
/>
</p>
<p className="prose text-md md:text-lg font-normal mb-8">
<p className="prose font-normal mb-2">
<Trans
i18nKey="crowdinDesc"
ns="contribute"
components={{
p: <p></p>,
aCrowdin: (
<a
className="link font-bold"
@@ -340,24 +364,55 @@ export default function Contribute() {
}}
/>
</p>
<p className="prose text-xl md:text-2xl font-bold text-secondary mb-4">
<ol className="flex flex-wrap gap-2 mb-8">
{translationFlags.map((flag) => {
const isEN = flag.lng === "en";
let crowdinUrl =
"https://crowdin.com/project/the-clothing-loop/";
if (flag.lng !== "en") {
crowdinUrl += flag.lng;
}
return (
<li>
<a href={crowdinUrl} target="_blank">
<img
src={flag.flag}
alt={flag.lng}
className="w-10 border-4 border-transparent hover:border-teal/40 transition-colors"
/>
</a>
</li>
);
})}
</ol>
<h2 className="text-xl md:text-2xl font-bold text-secondary mb-4">
<Trans i18nKey="feedback" ns="contribute" />
</p>
<p className="prose text-md md:text-lg font-normal">
</h2>
<p className="prose font-normal mb-4">
<Trans i18nKey="feedbackDesc" ns="contribute" />
</p>
</div>{" "}
<Link to="/contact-us" className="btn btn-secondary btn-outline">
{t("contactUs", { ns: "translation" })}
<span className="feather feather-arrow-right ml-4 rtl:hidden" />
<span className="feather feather-arrow-left mr-4 ltr:hidden" />
</Link>
</div>
<div
onMouseEnter={() => videoHandler(true)}
onMouseLeave={() => videoHandler(false)}
className="w-full md:w-1/2 aspect-video pl-4 self-center"
className="w-full md:w-1/2 aspect-video md:pl-4 max-xs:-mx-8 max-xs:w-auto self-center mb-8 md:mb-0"
>
<video
title="Neural Network of Our Github Repository Over Time"
src={githubActivity}
title="Editing files as a display of fireworks from our Github repository"
id="github-video"
muted={true}
></video>
muted
loop
>
<source
src="https://images.clothingloop.org/original/gource-cut1.webm"
type="video/webm"
/>
</video>
</div>
</div>
</div>