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

feat: add github link to footer #3

Merged
merged 1 commit into from
May 3, 2023
Merged

feat: add github link to footer #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
85 changes: 49 additions & 36 deletions src/components/common/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,54 @@
import Link from "next/link"

import {FooterHeading} from "@/components/common/Footer/FooterHeading"
import {FacebookIcon, InstagramIcon, TwitterIcon} from "@/components/common/Footer/SocialIcons"
import {DuckSplash} from "@/components/Home/Landing/DuckSplash"
import { FooterHeading } from "@/components/common/Footer/FooterHeading"
import { FacebookIcon, GitHubIcon, InstagramIcon, TwitterIcon } from "@/components/common/Footer/SocialIcons"
import { DuckSplash } from "@/components/Home/Landing/DuckSplash"

export const Footer = () => {
return <footer id="about-us" className="bg-PED-yellow py-20">
<div className="mx-auto flex max-w-4xl flex-col items-center px-8">
<FooterHeading/>
<p className="mt-8 text-center font-light">ped4you คือ แพลตฟอร์มที่ช่วยให้ผู้มีสิทธิ์เลือกตั้งครั้งแรกได้เข้าใจระบบการเลือกตั้งผ่านประสบการณ์เลือกตั้งเสมือนจริง
และเป็นแหล่งรวบรวมข้อมูลเกี่ยวกับการเลือกตั้งที่ย่อยง่าย อ่านสบาย และมีประโยชน์ต่อการเลือกตั้งครั้งแรกของทุกคน</p>
<p className="mt-8 break-words border-b-[3px] border-b-PED-purple pb-14 text-center font-light">Ped4you is an internet-based platform that facilitates the comprehension of the election process for novice voters,
by offering them a virtual election experience. It is an accessible, comprehensible,
and beneficial resource to aid first-time voters in making informed decisions during their initial election participation.</p>
<div className="mt-14 w-[100px]">
<DuckSplash/>
return (
<footer id="about-us" className="bg-PED-yellow py-20">
<div className="mx-auto flex max-w-4xl flex-col items-center px-8">
<FooterHeading />
<p className="mt-8 text-center font-light">
ped4you คือ
แพลตฟอร์มที่ช่วยให้ผู้มีสิทธิ์เลือกตั้งครั้งแรกได้เข้าใจระบบการเลือกตั้งผ่านประสบการณ์เลือกตั้งเสมือนจริง
และเป็นแหล่งรวบรวมข้อมูลเกี่ยวกับการเลือกตั้งที่ย่อยง่าย อ่านสบาย และมีประโยชน์ต่อการเลือกตั้งครั้งแรกของทุกคน
</p>
<p className="mt-8 break-words border-b-[3px] border-b-PED-purple pb-14 text-center font-light">
Ped4you is an internet-based platform that facilitates the comprehension of the election process for novice
voters, by offering them a virtual election experience. It is an accessible, comprehensible, and beneficial
resource to aid first-time voters in making informed decisions during their initial election participation.
</p>
<div className="mt-14 w-[100px]">
<DuckSplash />
</div>
<div className="mt-8 flex flex-wrap items-center justify-center space-x-8">
<Link href="https://www.facebook.com/profile.php?id=100091240677745&mibextid=LQQJ4d">
<div className="m-1 flex items-center space-x-2">
<FacebookIcon />
<span className="text-lg font-light">PED4you</span>
</div>
</Link>
<Link href="https://twitter.com/ped4you">
<div className="m-1 flex items-center space-x-2">
<TwitterIcon />
<span className="text-lg font-light">@PED4you</span>
</div>
</Link>
<Link href="https://www.instagram.com/ped4you.ig/">
<div className="m-1 flex items-center space-x-2">
<InstagramIcon />
<span className="text-lg font-light">@PED4you</span>
</div>
</Link>
<Link href="https://github.com/PED4you">
<div className="m-1 flex items-center space-x-2">
<GitHubIcon />
<span className="text-lg font-light">PED4you</span>
</div>
</Link>
</div>
</div>
<div className="mt-8 flex flex-wrap items-center justify-center space-x-8">
<Link href="https://www.facebook.com/profile.php?id=100091240677745&mibextid=LQQJ4d">
<div className="m-1 flex items-center space-x-2">
<FacebookIcon/>
<span className="text-lg font-light">PED4you</span>
</div>
</Link>
<Link href="https://twitter.com/ped4you">
<div className="m-1 flex items-center space-x-2">
<TwitterIcon/>
<span className="text-lg font-light">@PED4you</span>
</div>
</Link>
<Link href="https://www.instagram.com/ped4you.ig/">
<div className="m-1 flex items-center space-x-2">
<InstagramIcon/>
<span className="text-lg font-light">@PED4you</span>
</div>
</Link>
</div>
</div>
</footer>
}
</footer>
)
}
95 changes: 61 additions & 34 deletions src/components/common/Footer/SocialIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,69 @@
export const FacebookIcon = () => {
return <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_80_1239)">
<path d="M32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 23.9859 5.85094 30.6053 13.5 31.8056V20.625H9.4375V16H13.5V12.475C13.5 8.465 15.8888 6.25 19.5434 6.25C21.2934 6.25 23.125 6.5625 23.125 6.5625V10.5H21.1075C19.12 10.5 18.5 11.7334 18.5 13V16H22.9375L22.2281 20.625H18.5V31.8056C26.1491 30.6053 32 23.9859 32 16Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_80_1239">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
return (
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_80_1239)">
<path
d="M32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 23.9859 5.85094 30.6053 13.5 31.8056V20.625H9.4375V16H13.5V12.475C13.5 8.465 15.8888 6.25 19.5434 6.25C21.2934 6.25 23.125 6.5625 23.125 6.5625V10.5H21.1075C19.12 10.5 18.5 11.7334 18.5 13V16H22.9375L22.2281 20.625H18.5V31.8056C26.1491 30.6053 32 23.9859 32 16Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_80_1239">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}

export const InstagramIcon = () => {
return <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_80_1233)">
<path d="M16 2.88125C20.275 2.88125 20.7813 2.9 22.4625 2.975C24.025 3.04375 24.8688 3.30625 25.4313 3.525C26.175 3.8125 26.7125 4.1625 27.2688 4.71875C27.8313 5.28125 28.175 5.8125 28.4625 6.55625C28.6813 7.11875 28.9438 7.96875 29.0125 9.525C29.0875 11.2125 29.1063 11.7188 29.1063 15.9875C29.1063 20.2625 29.0875 20.7688 29.0125 22.45C28.9438 24.0125 28.6813 24.8563 28.4625 25.4188C28.175 26.1625 27.825 26.7 27.2688 27.2563C26.7063 27.8188 26.175 28.1625 25.4313 28.45C24.8688 28.6688 24.0188 28.9313 22.4625 29C20.775 29.075 20.2688 29.0938 16 29.0938C11.725 29.0938 11.2188 29.075 9.5375 29C7.975 28.9313 7.13125 28.6688 6.56875 28.45C5.825 28.1625 5.2875 27.8125 4.73125 27.2563C4.16875 26.6938 3.825 26.1625 3.5375 25.4188C3.31875 24.8563 3.05625 24.0063 2.9875 22.45C2.9125 20.7625 2.89375 20.2563 2.89375 15.9875C2.89375 11.7125 2.9125 11.2063 2.9875 9.525C3.05625 7.9625 3.31875 7.11875 3.5375 6.55625C3.825 5.8125 4.175 5.275 4.73125 4.71875C5.29375 4.15625 5.825 3.8125 6.56875 3.525C7.13125 3.30625 7.98125 3.04375 9.5375 2.975C11.2188 2.9 11.725 2.88125 16 2.88125ZM16 0C11.6563 0 11.1125 0.01875 9.40625 0.09375C7.70625 0.16875 6.5375 0.44375 5.525 0.8375C4.46875 1.25 3.575 1.79375 2.6875 2.6875C1.79375 3.575 1.25 4.46875 0.8375 5.51875C0.44375 6.5375 0.16875 7.7 0.09375 9.4C0.01875 11.1125 0 11.6562 0 16C0 20.3438 0.01875 20.8875 0.09375 22.5938C0.16875 24.2938 0.44375 25.4625 0.8375 26.475C1.25 27.5313 1.79375 28.425 2.6875 29.3125C3.575 30.2 4.46875 30.75 5.51875 31.1562C6.5375 31.55 7.7 31.825 9.4 31.9C11.1063 31.975 11.65 31.9937 15.9938 31.9937C20.3375 31.9937 20.8813 31.975 22.5875 31.9C24.2875 31.825 25.4563 31.55 26.4688 31.1562C27.5188 30.75 28.4125 30.2 29.3 29.3125C30.1875 28.425 30.7375 27.5313 31.1438 26.4813C31.5375 25.4625 31.8125 24.3 31.8875 22.6C31.9625 20.8938 31.9813 20.35 31.9813 16.0063C31.9813 11.6625 31.9625 11.1188 31.8875 9.4125C31.8125 7.7125 31.5375 6.54375 31.1438 5.53125C30.75 4.46875 30.2063 3.575 29.3125 2.6875C28.425 1.8 27.5313 1.25 26.4813 0.84375C25.4625 0.45 24.3 0.175 22.6 0.1C20.8875 0.01875 20.3438 0 16 0Z" fill="black"/>
<path d="M16 7.78125C11.4625 7.78125 7.78125 11.4625 7.78125 16C7.78125 20.5375 11.4625 24.2188 16 24.2188C20.5375 24.2188 24.2188 20.5375 24.2188 16C24.2188 11.4625 20.5375 7.78125 16 7.78125ZM16 21.3312C13.0563 21.3312 10.6687 18.9438 10.6687 16C10.6687 13.0563 13.0563 10.6687 16 10.6687C18.9438 10.6687 21.3312 13.0563 21.3312 16C21.3312 18.9438 18.9438 21.3312 16 21.3312Z" fill="black"/>
<path d="M26.4625 7.45611C26.4625 8.51861 25.6 9.37486 24.5438 9.37486C23.4813 9.37486 22.625 8.51236 22.625 7.45611C22.625 6.3936 23.4875 5.53735 24.5438 5.53735C25.6 5.53735 26.4625 6.39985 26.4625 7.45611Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_80_1233">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>

return (
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_80_1233)">
<path
d="M16 2.88125C20.275 2.88125 20.7813 2.9 22.4625 2.975C24.025 3.04375 24.8688 3.30625 25.4313 3.525C26.175 3.8125 26.7125 4.1625 27.2688 4.71875C27.8313 5.28125 28.175 5.8125 28.4625 6.55625C28.6813 7.11875 28.9438 7.96875 29.0125 9.525C29.0875 11.2125 29.1063 11.7188 29.1063 15.9875C29.1063 20.2625 29.0875 20.7688 29.0125 22.45C28.9438 24.0125 28.6813 24.8563 28.4625 25.4188C28.175 26.1625 27.825 26.7 27.2688 27.2563C26.7063 27.8188 26.175 28.1625 25.4313 28.45C24.8688 28.6688 24.0188 28.9313 22.4625 29C20.775 29.075 20.2688 29.0938 16 29.0938C11.725 29.0938 11.2188 29.075 9.5375 29C7.975 28.9313 7.13125 28.6688 6.56875 28.45C5.825 28.1625 5.2875 27.8125 4.73125 27.2563C4.16875 26.6938 3.825 26.1625 3.5375 25.4188C3.31875 24.8563 3.05625 24.0063 2.9875 22.45C2.9125 20.7625 2.89375 20.2563 2.89375 15.9875C2.89375 11.7125 2.9125 11.2063 2.9875 9.525C3.05625 7.9625 3.31875 7.11875 3.5375 6.55625C3.825 5.8125 4.175 5.275 4.73125 4.71875C5.29375 4.15625 5.825 3.8125 6.56875 3.525C7.13125 3.30625 7.98125 3.04375 9.5375 2.975C11.2188 2.9 11.725 2.88125 16 2.88125ZM16 0C11.6563 0 11.1125 0.01875 9.40625 0.09375C7.70625 0.16875 6.5375 0.44375 5.525 0.8375C4.46875 1.25 3.575 1.79375 2.6875 2.6875C1.79375 3.575 1.25 4.46875 0.8375 5.51875C0.44375 6.5375 0.16875 7.7 0.09375 9.4C0.01875 11.1125 0 11.6562 0 16C0 20.3438 0.01875 20.8875 0.09375 22.5938C0.16875 24.2938 0.44375 25.4625 0.8375 26.475C1.25 27.5313 1.79375 28.425 2.6875 29.3125C3.575 30.2 4.46875 30.75 5.51875 31.1562C6.5375 31.55 7.7 31.825 9.4 31.9C11.1063 31.975 11.65 31.9937 15.9938 31.9937C20.3375 31.9937 20.8813 31.975 22.5875 31.9C24.2875 31.825 25.4563 31.55 26.4688 31.1562C27.5188 30.75 28.4125 30.2 29.3 29.3125C30.1875 28.425 30.7375 27.5313 31.1438 26.4813C31.5375 25.4625 31.8125 24.3 31.8875 22.6C31.9625 20.8938 31.9813 20.35 31.9813 16.0063C31.9813 11.6625 31.9625 11.1188 31.8875 9.4125C31.8125 7.7125 31.5375 6.54375 31.1438 5.53125C30.75 4.46875 30.2063 3.575 29.3125 2.6875C28.425 1.8 27.5313 1.25 26.4813 0.84375C25.4625 0.45 24.3 0.175 22.6 0.1C20.8875 0.01875 20.3438 0 16 0Z"
fill="black"
/>
<path
d="M16 7.78125C11.4625 7.78125 7.78125 11.4625 7.78125 16C7.78125 20.5375 11.4625 24.2188 16 24.2188C20.5375 24.2188 24.2188 20.5375 24.2188 16C24.2188 11.4625 20.5375 7.78125 16 7.78125ZM16 21.3312C13.0563 21.3312 10.6687 18.9438 10.6687 16C10.6687 13.0563 13.0563 10.6687 16 10.6687C18.9438 10.6687 21.3312 13.0563 21.3312 16C21.3312 18.9438 18.9438 21.3312 16 21.3312Z"
fill="black"
/>
<path
d="M26.4625 7.45611C26.4625 8.51861 25.6 9.37486 24.5438 9.37486C23.4813 9.37486 22.625 8.51236 22.625 7.45611C22.625 6.3936 23.4875 5.53735 24.5438 5.53735C25.6 5.53735 26.4625 6.39985 26.4625 7.45611Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_80_1233">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}

export const TwitterIcon = () => {
return <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_80_1237)">
<path d="M10.0669 29C22.1394 29 28.7444 18.9956 28.7444 10.3225C28.7444 10.0412 28.7381 9.75373 28.7256 9.47248C30.0105 8.54328 31.1193 7.39234 32 6.07373C30.8034 6.60613 29.5329 6.95384 28.2319 7.10498C29.6017 6.28388 30.6274 4.99396 31.1187 3.47436C29.8301 4.23808 28.4208 4.77682 26.9513 5.06748C25.9611 4.01541 24.652 3.31882 23.2262 3.0854C21.8005 2.85198 20.3376 3.09473 19.0637 3.77613C17.7897 4.45752 16.7757 5.53961 16.1785 6.85508C15.5812 8.17056 15.4339 9.64615 15.7594 11.0537C13.15 10.9228 10.5972 10.2449 8.26664 9.06413C5.93604 7.88332 3.87959 6.22592 2.23062 4.19936C1.39253 5.64432 1.13608 7.35419 1.51337 8.98145C1.89067 10.6087 2.87342 12.0313 4.26188 12.96C3.2195 12.9269 2.19997 12.6462 1.2875 12.1412V12.2225C1.28657 13.7389 1.8108 15.2088 2.77108 16.3824C3.73136 17.5559 5.06843 18.3607 6.555 18.66C5.58941 18.9242 4.57598 18.9627 3.59313 18.7725C4.01261 20.0766 4.82876 21.2172 5.92769 22.0351C7.02662 22.853 8.35349 23.3075 9.72313 23.335C7.3979 25.1615 4.52557 26.1522 1.56875 26.1475C1.04438 26.1467 0.520532 26.1145 0 26.0512C3.00381 27.9783 6.49804 29.0018 10.0669 29Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_80_1237">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
return (
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_80_1237)">
<path
d="M10.0669 29C22.1394 29 28.7444 18.9956 28.7444 10.3225C28.7444 10.0412 28.7381 9.75373 28.7256 9.47248C30.0105 8.54328 31.1193 7.39234 32 6.07373C30.8034 6.60613 29.5329 6.95384 28.2319 7.10498C29.6017 6.28388 30.6274 4.99396 31.1187 3.47436C29.8301 4.23808 28.4208 4.77682 26.9513 5.06748C25.9611 4.01541 24.652 3.31882 23.2262 3.0854C21.8005 2.85198 20.3376 3.09473 19.0637 3.77613C17.7897 4.45752 16.7757 5.53961 16.1785 6.85508C15.5812 8.17056 15.4339 9.64615 15.7594 11.0537C13.15 10.9228 10.5972 10.2449 8.26664 9.06413C5.93604 7.88332 3.87959 6.22592 2.23062 4.19936C1.39253 5.64432 1.13608 7.35419 1.51337 8.98145C1.89067 10.6087 2.87342 12.0313 4.26188 12.96C3.2195 12.9269 2.19997 12.6462 1.2875 12.1412V12.2225C1.28657 13.7389 1.8108 15.2088 2.77108 16.3824C3.73136 17.5559 5.06843 18.3607 6.555 18.66C5.58941 18.9242 4.57598 18.9627 3.59313 18.7725C4.01261 20.0766 4.82876 21.2172 5.92769 22.0351C7.02662 22.853 8.35349 23.3075 9.72313 23.335C7.3979 25.1615 4.52557 26.1522 1.56875 26.1475C1.04438 26.1467 0.520532 26.1145 0 26.0512C3.00381 27.9783 6.49804 29.0018 10.0669 29Z"
fill="black"
/>
</g>
<defs>
<clipPath id="clip0_80_1237">
<rect width="32" height="32" fill="white" />
</clipPath>
</defs>
</svg>
)
}

}
export const GitHubIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
)
}