Skip to content

Commit

Permalink
Footer Design (#37)
Browse files Browse the repository at this point in the history 
* Update footer based on designs

* Add donate page

* prettier fixes

* copy: this -> the
  • Loading branch information
@asibs
asibs authored Mar 2, 2024
1 parent eb81e03 commit c79341c
Show file tree
Hide file tree
Showing 7 changed files with 198 additions and 91 deletions.
53 changes: 53 additions & 0 deletions app/donate/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
"use client";

import React from "react";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { Col, Container, Row } from "react-bootstrap";
import Header from "@/components/Header";
import { rubik } from "@/utils/Fonts";

export default function Donate() {
const url = "https://www.crowdfunder.co.uk/p/stopthetories";

const router = useRouter();

useEffect(() => {
setTimeout(() => router.push(url), 2000);
}, [router]);

return (
<>
<Header backgroundImage="FESTIVAL_CROWD">
<Container className="py-4 py-md-6">
<h1 className={rubik.className}>Donate</h1>
</Container>
</Header>

<main>
<section className="section-light">
<Container>
<Row>
<Col>
<h4 className="pb-5">
Redirecting you to our crowdfunder page
</h4>
<p>
<a href={url} target="_blank" rel="noreferrer">
Please click here if you&apos;re not redirected
automatically after 3 seconds
</a>
</p>
<p>
<a href={url} target="_blank" rel="noreferrer">
{url}
</a>
</p>
</Col>
</Row>
</Container>
</section>
</main>
</>
);
}
8 changes: 8 additions & 0 deletions app/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,3 +303,11 @@ section {
border-top: 2px solid var(--bs-gray-700);
border-bottom: 2px solid var(--bs-gray-900);
}

/* FOOTER */
footer {
background: var(--bs-gray-300);
padding-top: 3rem;
padding-bottom: 1rem;
border-top: 2px solid var(--bs-gray-100);
}
Binary file added assets/movement-forward-qr-code-tight.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
191 changes: 107 additions & 84 deletions components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,119 +8,142 @@ import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

import mvmtFrwdLogo from "@/assets/movement-forward-logo-bw.png";
import mvmtFrwdQrCode from "@/assets/movement-forward-qr-code-tight.png";

import {
FaBell,
FaDiscord,
FaFileArrowDown,
FaMagnifyingGlass,
FaMastodon,
FaPuzzlePiece,
FaSquareFacebook,
FaSquareInstagram,
FaSquareThreads,
FaSquareTwitter,
FaSquareWhatsapp,
FaTelegram,
} from "react-icons/fa6";
import { MdGroups2 } from "react-icons/md";
import { Button, ButtonGroup } from "react-bootstrap";
import { rubik } from "@/utils/Fonts";

const Footer = ({ blok }: { blok: FooterStoryblok }) => (
<footer {...storyblokEditable(blok)}>
<Container className="p-5">
<Row xs={4} sm={8} className="text-center g-4">
<Col>
<a href="https://twitter.com/mvtfwd" target="_blank" rel="noreferrer">
<FaSquareTwitter className="fs-1 text-pink-strong" />
</a>
</Col>
<Col>
<a
href="https://facebook.com/mvtfwd"
target="_blank"
rel="noreferrer"
>
<FaSquareFacebook className="fs-1 text-pink-strong" />
</a>
<Container>
<Row>
{/* FOOTER CALL TO ACTION BUTTONS */}
<Col sm={10} md={6} lg={4} xl={4} className="pb-4">
<ButtonGroup vertical size="lg" className="w-100">
<Link
href="/reminders"
className={`btn btn-dark btn-lg ${rubik.className} fw-bolder text-start lh-sm mb-1`}
>
<FaBell className="me-2" />
Join the voting movement
</Link>
<Link
href="/constituencies"
className={`btn btn-dark btn-lg ${rubik.className} fw-bolder text-start lh-sm mb-1`}
>
<FaMagnifyingGlass className="me-2" />
Browse constituencies
</Link>
<Link
href="/volunteer"
className={`btn btn-dark btn-lg ${rubik.className} fw-bolder text-start lh-sm mb-1`}
>
<FaPuzzlePiece className="me-2" />
Volunteer
</Link>
<Link
href="/downloads"
className={`btn btn-dark btn-lg ${rubik.className} fw-bolder text-start lh-sm mb-1`}
>
<FaFileArrowDown className="me-2" />
Downloads and resources
</Link>
</ButtonGroup>
</Col>
<Col>
<a
href="https://www.threads.net/@mvtfwd"
target="_blank"
rel="noreferrer"
>
<FaSquareThreads className="fs-1 text-pink-strong" />
</a>
</Col>
<Col>
<a
href="https://instagram.com/mvtfwd"
target="_blank"
rel="noreferrer"
>
<FaSquareInstagram className="fs-1 text-pink-strong" />
</a>
</Col>
<Col>
<a
href="https://indieweb.social/@MVTFWD"
target="_blank"
rel="noreferrer"
>
<FaMastodon className="fs-1 text-pink-strong" />
</a>
</Col>
<Col>
<a
href="https://themovementforward.com/discord"
target="_blank"
rel="noreferrer"
>
<FaDiscord className="fs-1 text-pink-strong" />
</a>
</Col>
<Col>
<a href="https://t.me/MVTFWD" target="_blank" rel="noreferrer">
<FaTelegram className="fs-1 text-pink-strong" />
</a>
</Col>
<Col>

{/* QR CODE */}
<Col sm={10} md={5} lg={3} xl={4} className="pb-4 px-xl-5">
<a
href="https://facebook.com/groups/MVTFWD"
href="https://shop.mvtfwd.com/stickers"
target="_blank"
rel="noreferrer"
>
<MdGroups2 className="fs-1 text-pink-strong" />
<Image
src={mvmtFrwdQrCode}
alt="Movement Forward QR Code"
style={{ width: "100%", height: "auto" }}
/>
</a>
</Col>
</Row>

<Row className="pt-5">
<Col>
<Row>
<Col className="text-start">
<Col sm={10} md={10} lg={5} xl={4} className="pb-4">
{/* MOVEMENT FORWARD LOGO */}
<p>
<a href="https://mvtfwd.com/links" target="_blank" rel="noreferrer">
<Image
src={mvmtFrwdLogo}
alt="Movement Forward Logo"
style={{ width: "4rem", height: "4rem" }}
/>
<span className="mx-2 fw-bold">@MVTFWD</span>
</a>
</p>

{/* MOVEMENT FORWARD SOCIAL LINKS */}
<ul className="list-inline my-3">
<li className="list-inline-item">
<a
href="https://mvtfwd.com/links"
href="https://twitter.com/mvtfwd"
target="_blank"
rel="noreferrer"
>
<span>
<Image
src={mvmtFrwdLogo}
alt="Movement Forward logo"
style={{ width: "4dvh", height: "4dvh" }}
/>
</span>
<span className="px-1">
<b>@MVTFWD</b>
</span>
<FaSquareTwitter className="fs-1" />
</a>
</Col>
</Row>
<Row className="my-2">
<Col>© 2023 Forward Democracy Limited</Col>
</Row>
</Col>
</li>
<li className="list-inline-item">
<a href="https://facebook.com/mvtfwd" target="_blank">
<FaSquareFacebook className="fs-1" />
</a>
</li>
<li className="list-inline-item">
<a href="https://instagram.com/mvtfwd" target="_blank">
<FaSquareInstagram className="fs-1" />
</a>
</li>
<li className="list-inline-item">
<a href="https://threads.net/mvtfwd" target="_blank">
<FaSquareThreads className="fs-1" />
</a>
</li>
<li className="list-inline-item">
<a href="https://mvtfwd.com/whatsapp" target="_blank">
<FaSquareWhatsapp className="fs-1" />
</a>
</li>
<li className="list-inline-item">
<a href="https://mvtfwd.com/volunteer" target="_blank">
<FaDiscord className="fs-1" />
</a>
</li>
</ul>

{/* COPYRIGHT */}
<p className="my-3">
A Movement Forward initiative
<br />© 2024 Forward Democracy Limited
</p>

<Col>
<Row xs={1} sm={2} md={4} className="text-end">
{/* FOOTER LINKS */}
<Row xs={4} className="py-3">
{blok.links.map((link) => (
<StoryblokComponent blok={link} key={link._uid} />
<Col className="p-1" key={link._uid}>
<StoryblokComponent blok={link} />
</Col>
))}
</Row>
</Col>
Expand Down
17 changes: 15 additions & 2 deletions components/footer/FooterLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,25 @@ const link = (
blok: FooterInternalLinkStoryblok | FooterExternalLinkStoryblok,
) => {
{
const className = `btn ${
blok.button ? "btn-light" : "btn-link"
} btn-sm fw-bold text-start`;

switch (blok.component) {
case "footer_internal_link":
return <Link href={blok.link_url}>{blok.link_name}</Link>;
return (
<Link href={blok.link_url} className={className}>
{blok.link_name}
</Link>
);
case "footer_external_link":
return (
<a href={blok.link_url} target="_blank" rel="noreferrer">
<a
href={blok.link_url}
target="_blank"
rel="noreferrer"
className={className}
>
{blok.link_name}
</a>
);
Expand Down
16 changes: 12 additions & 4 deletions storyblok/types/components.storyblok.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"name": "footer_external_link",
"display_name": null,
"created_at": "2023-11-23T12:04:20.276Z",
"updated_at": "2023-12-04T17:50:03.680Z",
"updated_at": "2024-03-02T15:11:16.619Z",
"id": 4928025,
"schema": {
"link_name": {
Expand All @@ -70,6 +70,9 @@
"description": "The full URL (ie. including http:// or https:// ) to the page the link should navigate to. Use a \"footer internal link\" for pages within the site which you want to link in the footer.",
"required": true,
"tooltip": true
},
"button": {
"type": "boolean"
}
},
"image": null,
Expand All @@ -89,7 +92,7 @@
"name": "footer_internal_link",
"display_name": null,
"created_at": "2023-11-12T21:28:38.884Z",
"updated_at": "2023-12-04T17:50:13.446Z",
"updated_at": "2024-03-02T15:11:30.163Z",
"id": 4870851,
"schema": {
"link_name": {
Expand All @@ -101,6 +104,9 @@
"display_name": "link_url",
"description": "The path to the page the link should navigate to - eg. \"/about\", \"/donate\", etc. Use a \"footer external link\" for pages on other websites which you want to link in the footer (eg. external donate pages, etc).",
"required": true
},
"button": {
"type": "boolean"
}
},
"image": null,
Expand Down Expand Up @@ -150,7 +156,9 @@
"type": "bloks",
"restrict_type": "",
"restrict_components": true,
"component_whitelist": ["navbar_link"],
"component_whitelist": [
"navbar_link"
],
"required": true
}
},
Expand Down Expand Up @@ -506,4 +514,4 @@
"component_group_name": "page layout"
}
]
}
}
4 changes: 3 additions & 1 deletion storyblok/types/storyblok-types.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { StoryblokStory } from "storyblok-generate-ts";
import {StoryblokStory} from 'storyblok-generate-ts'

export interface FeatureStoryblok {
name?: string;
Expand All @@ -17,6 +17,7 @@ export interface FooterStoryblok {
export interface FooterExternalLinkStoryblok {
link_name: string;
link_url: string;
button?: boolean;
_uid: string;
component: "footer_external_link";
[k: string]: any;
Expand All @@ -25,6 +26,7 @@ export interface FooterExternalLinkStoryblok {
export interface FooterInternalLinkStoryblok {
link_name: string;
link_url: string;
button?: boolean;
_uid: string;
component: "footer_internal_link";
[k: string]: any;
Expand Down

0 comments on commit c79341c

Please sign in to comment.