knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ckan catalog][m]: new hero element in the home page.

Browse Source
This commit is contained in:
anuveyatsu
2021-08-13 14:56:11 +06:00
parent 65e5a0b3bf
commit d32e11ae6a
5 changed files with 144 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/catalog/components/home/Hero.tsx Normal file
View File

@@ -0,0 +1,7 @@
import Template from './HeroTemplate';
const Hero: React.FC = () => {
return <Template />;
};
export default Hero;

130
examples/catalog/components/home/HeroTemplate.tsx Normal file
View File

@@ -0,0 +1,130 @@
import useTranslation from 'next-translate/useTranslation';
import SearchForm from '../search/Form';
export default function Example() {
const { t } = useTranslation();
return (
<div className="relative bg-white overflow-hidden">
<div
className="hidden lg:block lg:absolute lg:inset-0"
aria-hidden="true"
>
<svg
className="absolute top-0 left-1/2 transform translate-x-64 -translate-y-8"
width={640}
height={784}
fill="none"
viewBox="0 0 640 784"
>
<defs>
<pattern
id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
x={118}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
y={72}
width={640}
height={640}
className="text-gray-50"
fill="currentColor"
/>
<rect
x={118}
width={404}
height={784}
fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)"
/>
</svg>
</div>
<div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
<main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1>
<span className="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">
Quality Data ready to Integrate
</span>
<span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
<span className="block text-gray-900">Find and Share</span>
<span className="block text-indigo-600">Quality Data</span>
</span>
</h1>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
{t(`common:description`)}
</p>
<div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<SearchForm />
</div>
</div>
<div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<svg
className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden"
width={640}
height={784}
fill="none"
viewBox="0 0 640 784"
aria-hidden="true"
>
<defs>
<pattern
id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e"
x={118}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
y={72}
width={640}
height={640}
className="text-gray-50"
fill="currentColor"
/>
<rect
x={118}
width={404}
height={784}
fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"
/>
</svg>
<div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<img
className="w-full"
src="/images/banner.svg"
alt="banner_img"
/>
</div>
</div>
</div>
</main>
</div>
</div>
);
}