crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: Add team page

Browse Source
This commit is contained in:
Sol Irvine
2023-08-20 23:22:29 +09:00
parent 2659be5ff1
commit 150146e6f5
19 changed files with 478 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
app/[locale]/company/company-detail.tsx Normal file
View File

@@ -0,0 +1,175 @@
'use client';
import clsx from 'clsx';
import VideoPlayer from 'components/video/video-player';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { useEffect, useState } from 'react';
import CompanyImage001 from './images/irie.webp';
import CompanyImage002 from './images/kou.webp';
import CompanyImage003 from './images/yamano.webp';
export default function CompanyDetail() {
const t = useTranslations('Index');
const [hasWindow, setHasWindow] = useState(false);
useEffect(() => {
if (typeof window !== 'undefined') {
setHasWindow(true);
}
}, []);
return (
<div className="w-full px-6">
<div
className={clsx(
'mx-auto flex w-full flex-col space-y-24',
'py-12 font-serif md:py-24',
'mx-auto max-w-4xl'
)}
>
<h2 className="mx-auto max-w-sm text-center text-4xl md:text-4xl">{t('company.title')}</h2>
<div>
<h3 className="text-2xl">{t('company.subtitle001')}</h3>
<ul className="font-multilingual flex flex-col space-y-4 py-4 text-xl font-extralight">
<li className="border-t border-white/20 py-4">
<div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
<div className="w-1/3">{t('company.name.label')}</div>
<div className="grow">{t('company.name.value')}</div>
</div>
</li>
<li className="border-t border-white/20 py-4">
<div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
<div className="w-1/3">{t('company.director.label')}</div>
<div className="grow">{t('company.director.value')}</div>
</div>
</li>
<li className="border-t border-white/20 py-4">
<div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
<div className="w-1/3">{t('company.since.label')}</div>
<div className="grow">{t('company.since.value')}</div>
</div>
</li>
<li className="border-t border-white/20 py-4">
<div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
<div className="w-1/3">{t('company.address.label')}</div>
<div className="grow">{t('company.address.value')}</div>
</div>
</li>
<li className="border-t border-white/20 py-4">
<div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
<div className="w-1/3">{t('company.telephone.label')}</div>
<div className="grow">{t('company.telephone.value')}</div>
</div>
</li>
</ul>
</div>
<div>
<h3 className="pb-4 text-2xl">{t('company.subtitle002')}</h3>
<div className="grid grid-cols-1 gap-4 border-t border-white/20 md:grid-cols-3">
<div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
<div className="relative aspect-square">
<Image
src={CompanyImage001}
priority={true}
alt="A picture of Irie Masayuki."
className={clsx('h-full w-full object-cover')}
/>
</div>
<div className="pt-2">{t('company.irie.japanese')}</div>
<div className="pb-4">{t('company.irie.english')}</div>
<div className="text-base">{t('company.irie.role')}</div>
</div>
<div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
<div className="relative aspect-square">
<Image
src={CompanyImage001}
priority={true}
alt="A picture of Masataka Nishikawa."
className={clsx('h-full w-full object-cover')}
/>
</div>
<div className="pt-2">{t('company.nishikawa.japanese')}</div>
<div className="pb-4">{t('company.nishikawa.english')}</div>
<div className="text-base">{t('company.nishikawa.role')}</div>
</div>
<div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
<div className="relative aspect-square">
<Image
src={CompanyImage002}
priority={true}
alt="A picture of Kou Sundberg."
className={clsx('h-full w-full object-cover')}
/>
</div>
<div className="pt-2">{t('company.sundberg.japanese')}</div>
<div className="pb-4">{t('company.sundberg.english')}</div>
<div className="text-base">{t('company.sundberg.role')}</div>
</div>
<div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
<div className="relative aspect-square">
<Image
src={CompanyImage003}
priority={true}
alt="A picture of Takatoshi Yamano."
className={clsx('h-full w-full object-cover')}
/>
</div>
<div className="pt-2">{t('company.yamano.japanese')}</div>
<div className="pb-4">{t('company.yamano.english')}</div>
<div className="text-base">{t('company.yamano.role')}</div>
</div>
<div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
<div className="relative aspect-square">
<Image
src={CompanyImage001}
priority={true}
alt="A picture of Alisa Yoshida."
className={clsx('h-full w-full object-cover')}
/>
</div>
<div className="pt-2">{t('company.yoshida.japanese')}</div>
<div className="pb-4">{t('company.yoshida.english')}</div>
<div className="text-base">{t('company.yoshida.role')}</div>
</div>
<div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
<div className="relative aspect-square">
<Image
src={CompanyImage001}
priority={true}
alt="A picture of Shinya Ikegaya."
className={clsx('h-full w-full object-cover')}
/>
</div>
<div className="pt-2">{t('company.ikegaya.japanese')}</div>
<div className="pb-4">{t('company.ikegaya.english')}</div>
<div className="text-base">{t('company.ikegaya.role')}</div>
</div>
</div>
</div>
<div>
<h3 className="pb-4 text-2xl">{t('company.subtitle003')}</h3>
<div className="border-t border-white/20 pb-4"></div>
<div className=" bg-white/10 text-white">
{hasWindow && (
<VideoPlayer
url="https://player.vimeo.com/video/617871561?h=eefc1fe226"
// playing={isPlayingVideo}
autoplay={false}
loop={false}
controls={true}
volume={0.5}
/>
)}
</div>
</div>
</div>
</div>
);
}