crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-19 16:07:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: Footer cleanup

Browse Source
This commit is contained in:
Sol Irvine 2023-08-19 16:16:22 +09:00
parent 765606bac5
commit 5f52d40bdc
3 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/[locale]/page.tsx
View File

@ -1,4 +1,3 @@
import { Carousel } from 'components/carousel';
import { ThreeItemGrid } from 'components/grid/three-items'; import { ThreeItemGrid } from 'components/grid/three-items';
import Footer from 'components/layout/footer'; import Footer from 'components/layout/footer';
import { SupportedLocale } from 'components/layout/navbar/language-control'; import { SupportedLocale } from 'components/layout/navbar/language-control';
@ -78,10 +77,7 @@ export default async function HomePage({
<AboutNaraiPreview /> <AboutNaraiPreview />
</div> </div>
<Suspense> <Suspense>
<Carousel /> <Footer cart={cart} />
<Suspense>
<Footer cart={cart} />
</Suspense>
</Suspense> </Suspense>
</div> </div>
); );

2
components/layout/about-narai-preview.tsx
View File

@ -5,7 +5,7 @@ export default function AboutNaraiPreview() {
const t = useTranslations('Index'); const t = useTranslations('Index');
return ( return (
<div className="flex flex-row space-x-2 p-24"> <div className="flex flex-col space-y-4 px-6 py-24 md:flex-row md:space-x-2 md:space-y-0 md:p-24">
<div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2"> <div className="font-multilingual flex flex-col space-y-2 font-extralight md:w-1/2">
<div className="text-5xl">{t('home.previews.about-narai.title')}</div> <div className="text-5xl">{t('home.previews.about-narai.title')}</div>
<div className="text-5xl">{t('home.previews.about-narai.subtitle')}</div> <div className="text-5xl">{t('home.previews.about-narai.subtitle')}</div>

48
components/layout/footer.tsx
View File

@ -25,11 +25,11 @@ export default async function Footer({ cart }: { cart?: Cart }) {
'text-sm md:flex-row md:gap-12' 'text-sm md:flex-row md:gap-12'
)} )}
> >
<div className="w-full md:w-1/2"> <div className="w-full md:w-[60%]">
<div className="flex flex-col space-y-24"> <div className="flex flex-col space-y-24">
<NewsletterFooter /> <NewsletterFooter />
<div className="flex flex-row items-end space-x-12"> <div className="hidden flex-row items-end space-x-12 pt-24 md:flex">
<KanjiLogo className="w-20" /> <KanjiLogo className="h-64" />
<div className="flex flex-row items-end space-x-6"> <div className="flex flex-row items-end space-x-6">
<div className="flex flex-col items-start space-y-2"> <div className="flex flex-col items-start space-y-2">
<p className="font-japan text-3xl font-extralight">杉の森酒造</p> <p className="font-japan text-3xl font-extralight">杉の森酒造</p>
@ -43,10 +43,43 @@ export default async function Footer({ cart }: { cart?: Cart }) {
</div> </div>
</div> </div>
</div> </div>
<div className="hidden md:block md:w-1/3"> <div className="w-full md:w-[40%]">
<div className="flex h-full flex-col items-end justify-between space-y-2"> <div className="flex w-full flex-row items-end space-x-12 pt-24 md:hidden">
<FooterMenu /> <KanjiLogo className="h-64" />
<div className="flex flex-col space-y-2"> <div className="flex grow flex-col items-end space-y-6">
<div className="flex flex-col items-start space-y-2">
<p className="font-japan text-3xl font-extralight">杉の森酒造</p>
<p className="font-serif text-lg">suginomori brewery</p>
</div>
<div className="flex flex-col items-start space-y-2">
<p className="font-japan text-xl font-extralight">長野県塩尻市奈良井551-1</p>
<p className="font-serif text-lg">551-1 Narai, Shiojiri, Nagano</p>
</div>
<div className="flex flex-row justify-between space-x-4">
<div className="flex flex-row items-center space-x-6">
<Link href="https://www.instagram.com/suginomoribrewery/" className="group">
<InstagramIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
</Link>
<Link href="https://www.facebook.com/suginomoribrewery" className="group">
<FacebookIcon className="h-6 stroke-transparent transition-all ease-in-out group-hover:scale-110" />
</Link>
</div>
</div>
<div className="text-right font-serif">
<div>
&copy; {copyrightDate} {copyrightName}
{copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''}
</div>
</div>
</div>
</div>
<div className="hidden h-full flex-col items-end justify-between space-y-2 md:flex">
<div className="">
<FooterMenu />
</div>
<div className="flex flex-col space-y-2 pt-24">
<div className="flex flex-row justify-between space-x-4"> <div className="flex flex-row justify-between space-x-4">
<CartModal cart={cart} /> <CartModal cart={cart} />
<div className="flex flex-row items-center space-x-6"> <div className="flex flex-row items-center space-x-6">
@ -63,7 +96,6 @@ export default async function Footer({ cart }: { cart?: Cart }) {
&copy; {copyrightDate} {copyrightName} &copy; {copyrightDate} {copyrightName}
{copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''}
</div> </div>
<div>All rights reserved.</div>
</div> </div>
</div> </div>
</div> </div>