feat:new landing
This commit is contained in:
Rama Priyanto
parent
f13c496d75
commit
80fd365755
|
|
@ -2481,3 +2481,103 @@ export const YoutubeLandingIcon = ({
|
|||
/>
|
||||
</svg>
|
||||
);
|
||||
export const LandingEmailIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4l-8 5l-8-5V6l8 5l8-5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
export const LandingCallIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
{...props}
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M391 480c-19.52 0-46.94-7.06-88-30c-49.93-28-88.55-53.85-138.21-103.38C116.91 298.77 93.61 267.79 61 208.45c-36.84-67-30.56-102.12-23.54-117.13C45.82 73.38 58.16 62.65 74.11 52a176.3 176.3 0 0 1 28.64-15.2c1-.43 1.93-.84 2.76-1.21c4.95-2.23 12.45-5.6 21.95-2c6.34 2.38 12 7.25 20.86 16c18.17 17.92 43 57.83 52.16 77.43c6.15 13.21 10.22 21.93 10.23 31.71c0 11.45-5.76 20.28-12.75 29.81c-1.31 1.79-2.61 3.5-3.87 5.16c-7.61 10-9.28 12.89-8.18 18.05c2.23 10.37 18.86 41.24 46.19 68.51s57.31 42.85 67.72 45.07c5.38 1.15 8.33-.59 18.65-8.47c1.48-1.13 3-2.3 4.59-3.47c10.66-7.93 19.08-13.54 30.26-13.54h.06c9.73 0 18.06 4.22 31.86 11.18c18 9.08 59.11 33.59 77.14 51.78c8.77 8.84 13.66 14.48 16.05 20.81c3.6 9.53.21 17-2 22c-.37.83-.78 1.74-1.21 2.75a176.5 176.5 0 0 1-15.29 28.58c-10.63 15.9-21.4 28.21-39.38 36.58A67.4 67.4 0 0 1 391 480"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
export const LandingLocationIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
export const LandingAppleIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M17.05 20.28c-.98.95-2.05.8-3.08.35c-1.09-.46-2.09-.48-3.24 0c-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8c1.18-.24 2.31-.93 3.57-.84c1.51.12 2.65.72 3.4 1.8c-3.12 1.87-2.38 5.98.48 7.13c-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25c.29 2.58-2.34 4.5-3.74 4.25"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
export const LandingPlayStoreIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size || width}
|
||||
height={size || height}
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M3.61 1.814L13.793 12L3.611 22.186a1 1 0 0 1-.61-.92V2.735a1 1 0 0 1 .609-.921M14.5 12.707l2.302 2.302l-10.937 6.333zm3.199-3.198l2.807 1.626a1 1 0 0 1 0 1.73l-2.808 1.626L15.207 12zM5.865 2.658L16.803 8.99L14.5 11.293z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,171 @@
|
|||
import { Button } from "@heroui/button";
|
||||
import { Input } from "@heroui/input";
|
||||
import {
|
||||
LandingAppleIcon,
|
||||
LandingCallIcon,
|
||||
LandingEmailIcon,
|
||||
LandingLocationIcon,
|
||||
LandingPlayStoreIcon,
|
||||
MailIcon,
|
||||
SendIcon,
|
||||
} from "../icons";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function FooterNew() {
|
||||
const t2 = useTranslations("Navbar");
|
||||
const t3 = useTranslations("LandingInformasiPublik");
|
||||
|
||||
return (
|
||||
<div className="mb-[60px] relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold">
|
||||
<div className="py-10 px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-red-400 via-[#bd4434] to-[#bb3523] from-3% via-50% to-70% ">
|
||||
<div className="flex justify-center text-2xl">Channel Humas Polri</div>
|
||||
<div className="flex flex-row gap-4 justify-around items-center">
|
||||
<Link href="">
|
||||
<Image
|
||||
src="/assets/portal-humas.png"
|
||||
width={480}
|
||||
height={480}
|
||||
alt="portal-humas"
|
||||
className="w-[100px]"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="" className="flex flex-col justify-center items-center">
|
||||
<Image
|
||||
src="/assets/mediahub.png"
|
||||
width={480}
|
||||
height={480}
|
||||
alt="mediahub"
|
||||
className="w-[100px]"
|
||||
/>
|
||||
<p className="text-[#FED882] text-lg">MediaHub</p>
|
||||
</Link>
|
||||
<Link href="">
|
||||
<Image
|
||||
src="/assets/spit.png"
|
||||
width={480}
|
||||
height={480}
|
||||
alt="spit"
|
||||
className="w-[170px]"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="">
|
||||
<Image
|
||||
src="/assets/polri-tv.png"
|
||||
width={480}
|
||||
height={480}
|
||||
alt="polritv"
|
||||
className="w-[170px]"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="">
|
||||
<Image
|
||||
src="/assets/tb-news.png"
|
||||
width={480}
|
||||
height={480}
|
||||
alt="tbn"
|
||||
className="w-[170px]"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="">
|
||||
<Image
|
||||
src="/assets/inp.png"
|
||||
width={480}
|
||||
height={480}
|
||||
alt="inp"
|
||||
className="w-[170px]"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="flex flex-col gap-1 text-md font-light">
|
||||
<p className="text-lg font-normal">Tentang Kami</p>
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<div className="w-[16px]">
|
||||
<LandingCallIcon size={16} />
|
||||
</div>
|
||||
<p>Call Center 110</p>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 items-center">
|
||||
<div className="w-[16px]">
|
||||
<LandingEmailIcon size={16} />
|
||||
</div>
|
||||
<p>ppid@polri.go.id</p>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 justify-start items-start">
|
||||
<div className="w-[16px]">
|
||||
<LandingLocationIcon size={16} />
|
||||
</div>
|
||||
<span className="p-0 m-0 self-start leading-tight">
|
||||
Jl. Trunojoyo No.3, Selong, Kec. Kby. Baru, Kota Jakarta
|
||||
Selatan, Daerah Khusus Ibukota Jakarta
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-md">
|
||||
<p className="text-lg">Download Aplikasi Polri Presisi</p>
|
||||
<div className="flex flex-row gap-2">
|
||||
<Link
|
||||
href=""
|
||||
className="flex flex-row p-1 border-1 border-white rounded-lg"
|
||||
>
|
||||
<LandingAppleIcon size={36} />
|
||||
<div className="flex flex-col gap-0 leading-none font-light mr-4">
|
||||
<p className="text-[10px]">Download on the</p>
|
||||
<p className="text-lg ">App Store</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href=""
|
||||
className="flex flex-row p-1 border-1 border-white rounded-lg"
|
||||
>
|
||||
<LandingPlayStoreIcon size={30} />
|
||||
<div className="flex flex-col gap-0 leading-none font-light mr-4">
|
||||
<p className="text-[10px]">GET IT ON</p>
|
||||
<p className="text-lg ">Google Play</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-md">
|
||||
<p className="text-xl font-bold">Subscribe</p>
|
||||
<div className="flex flex-col">
|
||||
<p className="font-light">
|
||||
Dapatkan info & event terupdate dari kami.
|
||||
</p>
|
||||
<div className="flex items-center">
|
||||
{" "}
|
||||
<Input
|
||||
label=""
|
||||
type="email"
|
||||
placeholder="Tuliskan Email Anda"
|
||||
className="rounded-none !text-black"
|
||||
classNames={{
|
||||
inputWrapper: "rounded-l-lg h-[37px] bg-white !text-black",
|
||||
mainWrapper: "rounded-l-lg h-[37px] bg-white !text-black",
|
||||
}}
|
||||
// startContent={
|
||||
// <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
|
||||
// }
|
||||
/>
|
||||
<div className="h-[40px] bg-black flex items-center justify-center w-16 rounded-r-lg cursor-pointer">
|
||||
<SendIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/auth`}>
|
||||
<Button className="mt-1 text-black bg-white ">
|
||||
<p className="text-xs">Kontributor Wilayah</p>
|
||||
</Button>
|
||||
</Link>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-red-800 text-white text-center py-5 flex justify-center font-light text-base">
|
||||
© Copyright Humas POLRI ® All Rights Reserved
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import React, { Suspense, useEffect, useState } from "react";
|
|||
import NavbarHumas from "./navbar/NavbarHumas";
|
||||
import Footer from "../landing/Footer";
|
||||
import NewsTicker from "../landing/NewsTicker";
|
||||
import FooterNew from "../landing/footer-new";
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -26,7 +27,7 @@ export const HumasLayout = ({ children }: Props) => {
|
|||
|
||||
{children}
|
||||
<Suspense>
|
||||
<Footer />
|
||||
<FooterNew />
|
||||
</Suspense>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in New Issue