Skip to content

Commit

Permalink
Merge pull request #7 from rocky-linux/feature/layout
Browse files Browse the repository at this point in the history 
Finish Layout Implementation
  • Loading branch information
@NebraskaCoder
NebraskaCoder authored Feb 19, 2024
2 parents 1edab53 + d8800d1 commit 1dadc05
Show file tree
Hide file tree
Showing 4 changed files with 231 additions and 5 deletions.
204 changes: 204 additions & 0 deletions app/[locale]/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
import { useTranslations } from "next-intl";
import Link from "next/link";
import { JSX, SVGProps } from "react";

export default function Footer() {
const tFooter = useTranslations("footer");

const navigation = {
main: [
{ name: tFooter("nav.licensingName"), href: "/legal/licensing" },
{ name: tFooter("nav.privacyPolicyName"), href: "/legal/privacy" },
{ name: tFooter("nav.TrademarksName"), href: "/legal/trademarks" },
],
social: [
{
name: tFooter("socialNav.mastodon"),
href: "https://fosstodon.org/@rockylinux",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 216.414 232.01"
className="h-5 w-5"
{...props}
>
<path
fill="currentColor"
d="M211.807 139.088c-3.18 16.366-28.492 34.277-57.562 37.748-15.159 1.809-30.084 3.471-45.999 2.741-26.027-1.192-46.565-6.212-46.565-6.212 0 2.534.156 4.946.469 7.202 3.384 25.687 25.47 27.225 46.391 27.943 21.116.723 39.919-5.206 39.919-5.206l.867 19.09s-14.77 7.931-41.08 9.39c-14.51.797-32.525-.365-53.507-5.919C9.232 213.82 1.406 165.311.209 116.091c-.365-14.613-.14-28.393-.14-39.918 0-50.33 32.976-65.083 32.976-65.083C49.672 3.454 78.204.242 107.865 0h.729c29.66.242 58.21 3.454 74.837 11.09 0 0 32.975 14.752 32.975 65.082 0 0 .414 37.134-4.599 62.916"
/>
<path
className="fill-background"
d="M177.51 80.077v60.941h-24.144v-59.15c0-12.469-5.246-18.797-15.74-18.797-11.602 0-17.417 7.507-17.417 22.352V117.8H96.207V85.423c0-14.845-5.816-22.352-17.418-22.352-10.494 0-15.74 6.328-15.74 18.797v59.15H38.905V80.077c0-12.455 3.171-22.352 9.541-29.675 6.569-7.322 15.171-11.076 25.85-11.076 12.355 0 21.711 4.748 27.898 14.247l6.013 10.082 6.015-10.082c6.185-9.498 15.542-14.247 27.898-14.247 10.677 0 19.28 3.753 25.85 11.076 6.369 7.322 9.54 17.22 9.54 29.675"
/>
</svg>
),
},
{
name: tFooter("socialNav.facebook"),
href: "https://www.facebook.com/rockylinuxofficial",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 24 24"
className="h-6 w-6"
{...props}
>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: tFooter("socialNav.instagram"),
href: "https://www.instagram.com/rockylinuxofficial",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 24 24"
className="h-6 w-6"
{...props}
>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: tFooter("socialNav.threads"),
href: "https://www.threads.net/@rockylinuxofficial",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 192 192"
className="h-5 w-5"
{...props}
>
<path d="M141.537 88.988a66.667 66.667 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.229c8.249.053 14.474 2.452 18.503 7.129 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.626-23.68-1.14-23.82 1.371-39.134 15.264-38.105 34.568.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 139.966 29.808 120.682 29.605 96c.203-24.682 5.63-43.966 16.133-57.317C56.954 24.425 74.204 17.11 97.013 16.94c22.975.17 40.526 7.52 52.171 21.847 5.71 7.026 10.015 15.86 12.853 26.162l16.147-4.308c-3.44-12.68-8.853-23.606-16.219-32.668C147.036 9.607 125.202.195 97.07 0h-.113C68.882.194 47.292 9.642 32.788 28.08 19.882 44.485 13.224 67.315 13.001 95.932L13 96v.067c.224 28.617 6.882 51.447 19.788 67.854C47.292 182.358 68.882 191.806 96.957 192h.113c24.96-.173 42.554-6.708 57.048-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.945-24.723-24.553ZM98.44 129.507c-10.44.588-21.286-4.098-21.82-14.135-.397-7.442 5.296-15.746 22.461-16.735 1.966-.114 3.895-.169 5.79-.169 6.235 0 12.068.606 17.371 1.765-1.978 24.702-13.58 28.713-23.802 29.274Z" />
</svg>
),
},
{
name: tFooter("socialNav.linkedin"),
href: "https://www.linkedin.com/company/rockylinux/",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 75 75"
className="h-5 w-5"
{...props}
>
<g
fill="none"
fill-rule="evenodd"
>
<path
fill="currentColor"
d="M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8Z"
/>
<path
className="fill-background"
d="M62 62H51.316V43.802c0-4.99-1.896-7.777-5.845-7.777-4.296 0-6.54 2.901-6.54 7.777V62H28.632V27.333H38.93v4.67s3.096-5.729 10.453-5.729c7.353 0 12.617 4.49 12.617 13.777V62ZM16.35 22.794c-3.508 0-6.35-2.864-6.35-6.397C10 12.864 12.842 10 16.35 10c3.507 0 6.347 2.864 6.347 6.397 0 3.533-2.84 6.397-6.348 6.397ZM11.032 62h10.736V27.333H11.033V62Z"
/>
</g>
</svg>
),
},
{
name: tFooter("socialNav.x"),
href: "https://x.com/rocky_linux",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 24 24"
className="h-6 w-6"
{...props}
>
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
),
},
{
name: tFooter("socialNav.github"),
href: "https://github.com/rocky-linux",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 24 24"
className="h-6 w-6"
{...props}
>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: tFooter("socialNav.youtube"),
href: "https://www.youtube.com/@RockyLinux",
icon: (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => (
<svg
fill="currentColor"
viewBox="0 0 24 24"
className="h-6 w-6"
{...props}
>
<path
fillRule="evenodd"
d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
clipRule="evenodd"
/>
</svg>
),
},
],
};

return (
<footer>
<div className="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
<nav
className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
aria-label={tFooter("footer")}
>
{navigation.main.map((item) => (
<div
key={item.name}
className="pb-6"
>
<Link
href={item.href}
className="text-sm leading-6"
>
{item.name}
</Link>
</div>
))}
</nav>
<div className="mt-10 flex justify-center items-center space-x-10">
{navigation.social.map((item) => (
<Link
key={item.name}
href={item.href}
target="_blank"
>
<span className="sr-only">{item.name}</span>
<item.icon aria-hidden="true" />
</Link>
))}
</div>
<p className="mt-10 text-center text-xs leading-5">
{tFooter("disclaimer")}
</p>
</div>
</footer>
);
}
11 changes: 6 additions & 5 deletions app/[locale]/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useTranslations } from "next-intl";
import Link from "next/link";

import Logo from "@/components/Logo";
import { Button } from "@/components/ui/button";
Expand Down Expand Up @@ -58,13 +59,13 @@ export default function Header() {
aria-label="Global"
>
<div className="flex lg:flex-1">
<a
href="#"
<Link
href="/"
className="-m-1.5 p-1.5"
>
<span className="sr-only">{tGlobal("name")}</span>
<Logo />
</a>
</Link>
</div>
<MobileNavigation
darkModeSRText={tHeader("toggleTheme")}
Expand All @@ -76,9 +77,9 @@ export default function Header() {
<DesktopNavigation translations={navigationTranslations} />
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
<DarkModeToggle srText={tHeader("toggleTheme")} />
<a href="/download">
<Link href="/download">
<Button className="p-5 ml-2">{tGlobal("download")}</Button>
</a>
</Link>
</div>
</nav>
</header>
Expand Down
2 changes: 2 additions & 0 deletions app/[locale]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";

import { ThemeProvider } from "@/components/ThemeProvider";
import Header from "./Header";
import Footer from "./Footer";

import type { Metadata } from "next";
import type { ReactNode } from "react";
Expand Down Expand Up @@ -60,6 +61,7 @@ export default function RootLayout({
>
<Header />
<main>{children}</main>
<Footer />
</ThemeProvider>
</body>
</html>
Expand Down
19 changes: 19 additions & 0 deletions messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,25 @@
}
}
},
"footer": {
"footer": "Footer",
"nav": {
"licensingName": "Licensing",
"privacyPolicyName": "Privacy Policy",
"TrademarksName": "Trademarks"
},
"socialNav": {
"facebook": "Facebook",
"github": "GitHub",
"instagram": "Instagram",
"linkedin": "LinkedIn",
"mastodon": "Mastodon",
"threads": "Threads",
"x": "X",
"youtube": "YouTube"
},
"disclaimer": "Linux® is the registered trademark of Linus Torvalds in the U.S. and other countries. Red Hat Enterprise Linux, RHEL and CentOS are trademarks or registered trademarks of Red Hat, Inc. or its subsidiaries in the US and other countries. We are not affiliated with, endorsed by or sponsored by Red Hat, Inc."
},
"home": {
"hero": {
"title": "Enterprise Linux, the community way.",
Expand Down

0 comments on commit 1dadc05

Please sign in to comment.