CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Desktop Footer

Browse Source
This commit is contained in:
adilallo
2025-07-25 23:45:43 -06:00
parent f770b7d3b7
commit 0539989be6
10 changed files with 516 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Footer.js
+124
View File
@@ -0,0 +1,124 @@
import Logo from "./Logo";
export default function Footer() {
return (
<footer className="bg-[var(--color-surface-default-primary)] w-full">
<div className="flex flex-col items-start mx-auto max-w-[1920px] px-[var(--spacing-measures-spacing-120,120px)] py-[var(--spacing-measures-spacing-096,96px)] gap-[var(--spacing-measures-spacing-060,60px)]">
{/* Logo at the top - scaled larger for footer */}
<div
className="mb-[var(--spacing-measures-spacing-060,60px)]"
style={{
transform: "scale(2.05)",
transformOrigin: "left top",
}}
>
<Logo />
</div>
{/* Content section - horizontal layout */}
<div className="flex justify-between items-start w-full">
{/* Left side - Contact info and social media */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)]">
{/* Contact info */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
Media Economies Design Lab
</div>
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
medlab@colorado.edu
</div>
</div>
{/* Social media links */}
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
<div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
<svg
width={24}
height={22}
viewBox="0 0 24 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_18411_59624)">
<path
d="M5.42884 2.24436C8.08868 4.22236 10.9496 8.23292 12 10.3852C13.0505 8.23308 15.9113 4.22232 18.5712 2.24436C20.4904 0.817109 23.6 -0.287214 23.6 3.2268C23.6 3.9286 23.1938 9.12225 22.9556 9.96542C22.1275 12.8969 19.1098 13.6445 16.4256 13.192C21.1176 13.983 22.3112 16.6032 19.7335 19.2234C14.8379 24.1996 12.6971 17.9748 12.1483 16.3798C12.0477 16.0874 12.0007 15.9506 12 16.0669C11.9993 15.9506 11.9522 16.0874 11.8517 16.3798C11.3031 17.9748 9.16234 24.1997 4.26646 19.2234C1.6887 16.6032 2.88226 13.9829 7.57434 13.192C4.89002 13.6445 1.87234 12.8969 1.04434 9.96542C0.806094 9.12217 0.399902 3.92852 0.399902 3.2268C0.399902 -0.287214 3.50958 0.817109 5.4287 2.24436H5.42884Z"
fill="#949494"
/>
</g>
<defs>
<clipPath id="clip0_18411_59624">
<rect
width={24}
height={21}
fill="white"
transform="translate(0 0.5)"
/>
</clipPath>
</defs>
</svg>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
medlabboulder
</div>
</div>
<div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
<img
src="/assets/GitLab_Icon.png"
alt="GitLab"
width={22}
height={22}
className="flex-shrink-0"
style={{ filter: "grayscale(100%)" }}
/>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
medlabboulder
</div>
</div>
</div>
</div>
{/* Right side navigation */}
<div className="flex flex-col justify-start items-end gap-[var(--spacing-measures-spacing-032,32px)]">
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
Use cases
</div>
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
Learn
</div>
<div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-[--spacing-measures-spacing-024] leading-[--spacing-measures-spacing-028] font-normal tracking-[0%]">
About
</div>
</div>
</div>
{/* Divider */}
<div className="flex flex-col items-center self-stretch">
<div
className="flex items-start self-stretch h-px"
style={{
backgroundColor:
"var(--color-border-color-default-primary, #1f1f1f)",
}}
/>
</div>
{/* Bottom section */}
<div className="flex justify-between items-start self-stretch">
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5">
© All right reserved
</div>
<div className="flex items-start gap-[var(--spacing-measures-spacing-040,40px)]">
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5">
Privacy Policy
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5">
Terms of Service
</div>
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5">
Cookies Settings
</div>
</div>
</div>
</div>
</footer>
);
}
app/components/Logo.js
+34
View File
@@ -0,0 +1,34 @@
export default function Logo() {
return (
<div
className="flex items-center"
style={{
height: "40px",
gap: "8px",
}}
>
{/* Logo Text */}
<div
className="font-['Bricolage_Grotesque']"
style={{
color: "var(--color-content-default-primary)",
fontSize: "21.97px",
lineHeight: "27.05px",
fontWeight: "400",
letterSpacing: "0px",
}}
>
CommunityRule
</div>
{/* Vector Icon */}
<img
src="/assets/Logo.svg"
alt="CommunityRule Logo Icon"
width={27.05}
height={27.05}
className="flex-shrink-0"
/>
</div>
);
}
app/globals.css
-25
View File
@@ -1,26 +1 @@
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
app/layout.js
+13 -14
View File
@@ -1,29 +1,28 @@
import { Geist, Geist_Mono } from "next/font/google";
import { Inter, Bricolage_Grotesque } from "next/font/google";
import "./globals.css";
import "./tailwind.css";
import Footer from "./components/Footer";
const geistSans = Geist({
variable: "--font-geist-sans",
const inter = Inter({
subsets: ["latin"],
weight: ["400"],
variable: "--font-inter",
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
const bricolageGrotesque = Bricolage_Grotesque({
subsets: ["latin"],
weight: ["400"],
variable: "--font-bricolage-grotesque",
});
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<body className={`${inter.variable} ${bricolageGrotesque.variable}`}>
<div className="min-h-screen flex flex-col">
<main className="flex-1">{children}</main>
<Footer />
</div>
</body>
</html>
);
app/page.js
+2 -102
View File
@@ -1,103 +1,3 @@
import Image from "next/image";
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
app/page.js
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
export default function Page() {
return <></>;
}