-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* style: added rounded button component style * feat: added external links * feat: added and designed footer section
- Loading branch information
Showing
5 changed files
with
119 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import HeroLinks from '@/data/HeroLinks'; | ||
import { links } from '@/data/menu-links'; | ||
import Link from 'next/link'; | ||
import { FC } from 'react'; | ||
|
||
const FooterList: FC = () => { | ||
return ( | ||
<div className="space-y-6"> | ||
<ul className="flex flex-wrap items-center gap-x-6 gap-y-2"> | ||
{links.map((link, indx) => ( | ||
<Link href={link.to} key={link.title + indx}> | ||
<li className="cursor-pointer transition-colors duration-200 ease-in-out hover:text-accent"> | ||
{link.title} | ||
</li> | ||
</Link> | ||
))} | ||
</ul> | ||
<ul className="flex flex-wrap items-center gap-x-6 gap-y-3"> | ||
{HeroLinks.map((link, indx) => ( | ||
<Link href={link.href} key={link.title + indx}> | ||
<li className="flex cursor-pointer items-center gap-x-2 transition-colors duration-200 ease-in-out hover:text-accent"> | ||
<link.Icon className="h-5 w-5" /> | ||
{link.title} | ||
</li> | ||
</Link> | ||
))} | ||
</ul> | ||
</div> | ||
); | ||
}; | ||
|
||
export default FooterList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import TypoComp from '@utilities/typo-component'; | ||
import { FC } from 'react'; | ||
|
||
const Slogun: FC = () => { | ||
const year = new Date().getFullYear(); | ||
return ( | ||
<div className=""> | ||
<TypoComp className="prose-headings:my-0 prose-h1:italic prose-p:my-2 prose-p:text-skin-muted/80"> | ||
<h2>On your mark, Get Set,</h2> | ||
<h1>Open Source</h1> | ||
<p>© {year} PBC Life. All rights reserved </p> | ||
</TypoComp> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Slogun; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,48 @@ | ||
import { StarIcon } from '@heroicons/react/24/solid'; | ||
import Container from '@layouts/container'; | ||
import Logo from '@utilities/logo'; | ||
import colors from 'tailwindcss/colors'; | ||
import Glow from '../utilities/glow'; | ||
import GradientBG from '../utilities/gradient-bg'; | ||
import FooterList from './FooterList'; | ||
import Slogun from './Slogun'; | ||
|
||
export default function Footer() { | ||
return <div>Footer</div>; | ||
return ( | ||
<footer className="relative z-0 border-t border-accent/90"> | ||
<Glow className="!top-0 right-0 w-full max-w-6xl" /> | ||
<div className="absolute inset-0 -z-10 bg-grid-slate-500/50 [mask-image:linear-gradient(0deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1),rgba(255,255,255,0))] "></div> | ||
<div className="pointer-events-none absolute inset-0 -z-20 bg-gradient-to-b from-primary via-primary/90 to-primary/70 backdrop-blur-2xl"></div> | ||
<GradientBG | ||
className="absolute inset-0 -z-30 h-full w-full animate-bg-shift" | ||
colors={[ | ||
colors.yellow[400], | ||
colors.teal[500], | ||
colors.purple[600], | ||
colors.pink[600], | ||
]} | ||
/> | ||
<Container className=" py-8 font-semibold text-skin-base"> | ||
<div className="mb-4 flex flex-col xs:flex-row xs:items-center xs:justify-between"> | ||
<Logo /> | ||
<a | ||
href="https://github.com/pbclife/gitopener.vercel.app" | ||
target="_blank" | ||
rel="norefferer noreferrer" | ||
className="rounded-btn flex items-center justify-center gap-x-2 bg-skin-inverted text-skin-inverted" | ||
> | ||
<StarIcon className="h-5 w-5" /> | ||
Star Us | ||
</a> | ||
</div> | ||
{/* Slogun & links */} | ||
<div className="flex flex-col-reverse gap-8 xs:flex-col sm:flex-row sm:items-start sm:justify-between sm:px-8"> | ||
{/* sm:left */} | ||
<Slogun /> | ||
{/* sm:right */} | ||
<FooterList /> | ||
</div> | ||
</Container> | ||
</footer> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import ForkIcon from '@/components/icons/fork'; | ||
import GithubIcon from '@/components/icons/github'; | ||
|
||
const HeroLinks = [ | ||
{ | ||
id: 1, | ||
Icon: ForkIcon, | ||
title: `Fork`, | ||
href: `https://github.com/pbclife/gitopener.vercel.app/fork`, | ||
}, | ||
{ | ||
id: 2, | ||
Icon: GithubIcon, | ||
title: `Repository`, | ||
href: `https://github.com/pbclife/gitopener.vercel.app`, | ||
}, | ||
]; | ||
|
||
export default HeroLinks; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,6 @@ | ||
@tailwind components; | ||
@layer components { | ||
.rounded-btn { | ||
@apply rounded-full px-6 py-3 outline-none; | ||
} | ||
} |
a5de09e
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
gitopener-vercel-app – ./
gitopener-vercel-app-git-opener-team.vercel.app
gitopener-vercel-app-git-main-git-opener-team.vercel.app
gitopenerdev.vercel.app