feat: adj ui page detail, add breadcom component, add media sosial group

This commit is contained in:
fredy.siswanto 2025-02-20 22:20:27 +07:00
parent 878fb640af
commit 2e09e8a962
15 changed files with 471 additions and 74 deletions

View File

@ -0,0 +1,22 @@
import type { JSX, SVGProps } from 'react'
export const LinkIcon = (
properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width={95}
height={95}
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 1024 1024"
{...properties}
>
<path d="M574 665.4a8.03 8.03 0 0 0-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 0 0 0 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 0 0 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 0 0-11.3 0L372.3 598.7a8.03 8.03 0 0 0 0 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"></path>
</svg>
)
}

View File

@ -13,7 +13,7 @@ export const Banner = () => {
<img
src={'https://placehold.co/1200x70.png'}
alt={APP.title}
className="h-[70px] w-auto sm:h-full"
className="h-[70px] w-[100%] sm:h-full"
/>
</Link>
<p className="absolute top-2 mx-10">

View File

@ -0,0 +1,24 @@
import { Link } from 'react-router'
// use slog or handel get by url
interface BreadcrumbProperty {
slug: string
}
const Breadcrumb = (property: BreadcrumbProperty) => {
const { slug } = property
return (
<div className="flex items-center gap-2">
<Link to={'#'}>Blog</Link>
<div>{'>'}</div>
<Link
to={'#'}
className="text-ellipsis md:text-clip ..."
>
{slug}
</Link>
</div>
)
}
export default Breadcrumb

View File

@ -1,4 +1,4 @@
import { Link } from 'react-router'
import { Link, useLocation } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
@ -8,6 +8,9 @@ import type { TNews } from '~/types/news'
import { Button } from './button'
export const Carousel = (properties: TNews) => {
const location = useLocation()
const hasCategory = location.pathname.includes('/categories/')
const { title, description, items, type } = properties
return (
<div className="">
@ -20,21 +23,22 @@ export const Carousel = (properties: TNews) => {
{description}
</p>
</div>
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
width={45}
height={45}
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
width={45}
height={45}
/>
</div>
{!hasCategory && (
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
width={45}
height={45}
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
width={45}
height={45}
/>
</div>
)}
</div>
<div
className={twMerge(
@ -42,7 +46,7 @@ export const Carousel = (properties: TNews) => {
type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
)}
>
{items.map(({ featured, title, content, tag, slug }, index) => (
{items.map(({ featured, title, content, tags, slug }, index) => (
<div
key={index}
className={twMerge(
@ -67,7 +71,7 @@ export const Carousel = (properties: TNews) => {
)}
>
<div className={`${type === 'hero' ? 'hidden' : ''} `}>
{tag?.map((item) => (
{tags?.map((item) => (
<span className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1">
{item}
</span>
@ -93,6 +97,7 @@ export const Carousel = (properties: TNews) => {
size="block"
as={Link}
to={`detail/${slug}`}
className={twMerge('', type === 'hero' ? '' : 'mb-5 sm:mb-0')}
>
View More
</Button>
@ -100,6 +105,24 @@ export const Carousel = (properties: TNews) => {
</div>
))}
</div>
{hasCategory && (
<div className="my-5 mt-5 flex flex-row-reverse">
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
width={45}
height={45}
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
width={45}
height={45}
/>
</div>
</div>
)}
</div>
)
}

View File

@ -0,0 +1,60 @@
import type { FC } from 'react'
import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { FacebookIcon } from '~/components/icons/facebook'
import { InstagramIcon } from '~/components/icons/instagram'
import { LinkIcon } from '~/components/icons/link-icon'
import { LinkedinIcon } from '~/components/icons/linkedin'
import { XIcon } from '~/components/icons/x'
interface SocialMediaProperties {
className?: string
}
const dataSocialMedia = [
{
type: 'link',
url: 'post-id/',
icon: LinkIcon,
},
{
type: 'facebook',
url: 'https://facebook.com/',
icon: FacebookIcon,
},
{
type: 'linkedin',
url: 'https://linkedin.com/',
icon: LinkedinIcon,
},
{
type: 'x',
url: 'https://x.com/',
icon: XIcon,
},
{
type: 'instagram',
url: 'https://instagram.com/',
icon: InstagramIcon,
},
]
const IconsSocial: FC<SocialMediaProperties> = ({ className }) => {
return (
<div className={twMerge('flex gap-2', className)}>
{dataSocialMedia.map(({ url, icon: Icon }, index) => (
<Link
key={index}
to={url}
target="_blank"
rel="noopener noreferrer"
>
<Icon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" />
</Link>
))}
</div>
)
}
export default IconsSocial

View File

@ -1,44 +1,38 @@
import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'
export const Newsletter = () => {
return (
<>
<div className="relative col-span-2 my-5 grid max-h-[400px] gap-y-6 bg-[#2E2F7C] p-5 px-10 text-white sm:grid-cols-2 sm:px-10">
<div className="grid-1">
<h2 className="text-2xl font-bold sm:text-4xl">
Join Our Newsletter
</h2>
<p className="text:md sm:text-lg">
Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat
informasi kajian dan networking terbaru? ikuti Newsletter kami and
Stay up to Speed!
</p>
</div>
<div className="w-max-h-[400px] absolute right-0 bottom-0 w-auto sm:top-0">
<img
src={'https://placehold.co/800x200.png'}
alt={APP.title}
className="h-full w-auto"
/>
</div>
<div className="z-10">
<form className="grid gap-5">
<input
placeholder="Daftarkan Email Disini"
className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
size={1}
/>
<Button
type="submit"
variant="newsPrimary"
size="block"
>
Subscribe
</Button>
</form>
</div>
<div className="flex h-[300px] w-full flex-col md:flex-row">
<div className="flex w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:px-30 md:w-[50%]">
<h2 className="text-2xl font-bold sm:text-4xl">Join Our Newsletter</h2>
<p className="text:md sm:text-lg">
Tidak ingin ketinggalan Berita Hukum terhangat? Ingin mendapat
informasi kajian dan networking terbaru? Ikuti Newsletter kami dan
Stay up to Speed!
</p>
</div>
</>
<div
className="flex flex-col justify-center bg-cover bg-center px-20 py-5 sm:w-full md:w-[50%]"
style={{
backgroundImage: "url('https://placehold.co/400x300.png')",
}}
>
<form className="grid gap-5">
<input
type="email"
placeholder="Daftarkan Email Disini"
className="w-full rounded-md border border-gray-300 bg-white p-4 text-sm focus:outline-none"
/>
<Button
type="submit"
variant="newsPrimary"
size="block"
>
Subscribe
</Button>
</form>
</div>
</div>
)
}

View File

@ -0,0 +1,80 @@
import type { TNews } from '~/types/news'
export const SPOTLIGHT: TNews = {
title: 'SPOTLIGHT',
description: 'Berita Terhangat hari ini',
type: 'hero',
items: [
{
title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
content:
'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..',
featured: '/images/news-1.jpg',
slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
},
],
}
export const BERITA: TNews = {
title: 'BERITA',
description: 'Berita Terhangat hari ini',
type: 'grid',
items: [
{
title: 'Travelling as a way of self-discovery and progress',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tags: ['Hukum Property'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tags: ['Hukum'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
}
export const KAJIAN: TNews = {
title: 'KAJIAN',
description: 'Berita Terhangat hari ini',
type: 'grid',
items: [
{
title: 'Travelling as a way of self-discovery and progress',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
}

View File

@ -0,0 +1,14 @@
import { Card } from '~/components/ui/card'
import { Carousel } from '~/components/ui/carousel'
import { BERITA } from './data'
export const NewsCategoriesPage = () => {
return (
<div className="relative mx-5 sm:mx-10">
<Card>
<Carousel {...BERITA} />
</Card>
</div>
)
}

View File

@ -1,4 +1,4 @@
import type { TNewsDetail } from '~/types/news'
import type { TNews, TNewsDetail } from '~/types/news'
export const CONTENT: TNewsDetail = {
title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik',
@ -8,4 +8,38 @@ export const CONTENT: TNewsDetail = {
slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik',
author: 'John Doe',
date: new Date(),
categories: [],
tags: ['Category', 'Popular'],
}
export const BERITA: TNews = {
title: 'BERITA',
description: 'Berita Terhangat hari ini',
type: 'grid',
items: [
{
title: 'Travelling as a way of self-discovery and progress',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tags: ['Hukum Property'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
title: 'How does writing influence your personal brand?',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tags: ['Hukum'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
title: 'Helping a local business reinvent itself',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
}

View File

@ -1,16 +1,95 @@
import Breadcrumb from '~/components/ui/breadcrumb'
import { Card } from '~/components/ui/card'
import { CONTENT } from './data'
import { Carousel } from '~/components/ui/carousel'
import IconsSocial from '~/components/ui/icons-social'
// eslint-disable-next-line no-restricted-imports
import { BERITA, CONTENT } from '~/pages/news-detail/data'
export const NewsDetailPage = () => {
const { title } = CONTENT
const { title, content, featured, slug, author, date, tags } = CONTENT
return (
<div className="relative">
<div className="relative mx-5 sm:mx-10">
<Card>
<h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{title}
</h2>
News Detail
<div className="py-5 sm:px-30">
<Breadcrumb slug={slug} />
<h2 className="text-xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{title}
</h2>
{/* next planing create component for this section */}
<div className="my-5 flex w-full items-center justify-between align-middle">
<div className="flex items-center gap-2 align-middle">
<img
src={'https://placehold.co/50x50.png'}
alt={title}
className="h-12 w-12 rounded-full"
/>
<div>
<h4 className="text-md">{author}</h4>
<p className="text-sm">
{date.toJSON().slice(0, 10)} . 5 min read{' '}
</p>
</div>
</div>
<IconsSocial className="ml-auto"></IconsSocial>
</div>
{/* end next planing create component for this section */}
<div className="w-full bg-amber-200">
<img
src={featured}
alt={title}
className="object-center"
/>
</div>
<article className="my-8">
<div>{content}</div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt
asperiores corporis, facilis praesentium tenetur rerum officiis!
Perspiciatis, sed cupiditate. Libero eos, cupiditate perferendis
delectus accusamus culpa veniam voluptatem sequi soluta hic optio
dolor, provident perspiciatis nihil sit. Est facere itaque natus
saepe odio ipsam recusandae at mollitia deserunt. Laboriosam atque
id aperiam tempore corporis magnam dolores vitae, maxime modi
quibusdam architecto sed aliquam error suscipit distinctio ratione
dolorum exercitationem vero sapiente? Commodi rem quidem vitae
eaque, consequuntur maxime facilis ea aliquam odio atque magni
delectus rerum fugiat aliquid, qui omnis incidunt libero quasi
distinctio exercitationem, reprehenderit minus officiis velit enim.
</article>
<div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
<div className="flex flex-col">
<p className="mb-2">Share this post</p>
<IconsSocial />
</div>
<div className="flex flex-wrap items-end">
{tags?.map((tag) => (
<span
key={tag}
className="mx-2 rounded bg-gray-300 p-1"
>
{tag}
</span>
))}
</div>
</div>
<div className="mt-5 flex items-center gap-2 align-middle">
<img
src={'https://placehold.co/50x50.png'}
alt={title}
className="h-12 w-12 rounded-full"
/>
<div>
<h4 className="text-md">{author}</h4>
<p className="text-sm">Job title, Company name</p>
</div>
</div>
</div>
</Card>
<Card>
<Carousel {...BERITA} />
</Card>
</div>
)

View File

@ -25,7 +25,7 @@ export const BERITA: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tag: ['Hukum Property'],
tags: ['Hukum Property'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
@ -33,7 +33,7 @@ export const BERITA: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tag: ['Hukum'],
tags: ['Hukum'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
@ -41,7 +41,7 @@ export const BERITA: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],
@ -57,7 +57,7 @@ export const KAJIAN: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'travelling-as-a-way-of-self-discovery-and-progress',
},
{
@ -65,7 +65,7 @@ export const KAJIAN: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'how-does-writing-influence-your-personal-brand',
},
{
@ -73,7 +73,7 @@ export const KAJIAN: TNews = {
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg',
tag: ['Hukum Property', 'PREMIUM CONTENT'],
tags: ['Hukum Property', 'PREMIUM CONTENT'],
slug: 'helping-a-local-business-reinvent-itself',
},
],

View File

@ -0,0 +1,7 @@
import { NewsCategoriesPage } from '~/pages/news-categories'
const NewsCategoriesLayout = () => {
return <NewsCategoriesPage />
}
export default NewsCategoriesLayout

View File

@ -2,7 +2,7 @@ export type TNews = {
title: string
description: string
type: 'hero' | 'grid'
items: Pick<TNewsDetail, 'title' | 'content' | 'featured' | 'slug' | 'tag'>[]
items: Pick<TNewsDetail, 'title' | 'content' | 'featured' | 'slug' | 'tags'>[]
}
export type TNewsDetail = {
@ -12,5 +12,6 @@ export type TNewsDetail = {
author: string
date: Date
slug: string
tag?: Array<string>
tags?: Array<string>
categories?: Array<string>
}

View File

@ -91,7 +91,8 @@ export default tseslint.config(
],
},
],
'linebreak-style': ['error', 'unix'],
'linebreak-style': 0,
'import/order': [
'error',
{

View File

@ -0,0 +1,58 @@
<svg width="351" height="351" viewBox="0 0 351 351" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_162_2552)">
<path d="M294.119 315.54C305.323 309.471 316.568 302.98 325.217 293.623C333.866 284.267 339.68 271.504 337.895 258.889C336.253 247.288 328.553 237.285 326.509 225.748C323.002 205.95 336.556 187.363 339.72 167.507C342.098 152.575 338.256 136.751 329.294 124.573C321.125 113.472 309.1 105.508 301.726 93.8633C291.789 78.1716 291.275 57.331 279.14 43.2698C270.351 33.0848 257.002 28.2985 244.244 24.0295C221.634 16.464 198.558 9.16681 174.732 8.30185C150.905 7.4369 125.872 13.7534 108.668 30.2608C103.321 35.3915 98.7628 41.5288 96.457 48.5719C91.0051 65.2255 98.8105 82.8956 103.704 99.7215C104.661 103.013 105.514 106.487 104.791 109.837C104.079 113.138 101.918 115.926 99.6404 118.419C89.0286 130.034 74.9052 137.703 61.2765 145.563C47.6479 153.424 33.8761 162.02 24.6902 174.793C15.504 187.566 11.899 205.576 19.8829 219.133C22.9804 224.393 27.7054 228.921 28.9602 234.895C31.1785 245.454 21.9751 254.481 16.5627 263.815C7.57649 279.313 9.2351 300.296 20.5446 314.19C31.8542 328.083 52.0644 333.965 69.0631 328.31L294.119 315.54Z" fill="#F0FAFF"/>
<path d="M48.0524 313.554C49.7476 283.04 27.1444 241.878 3.97569 239.855C-4.50047 257.611 10.1224 304.586 31.7038 313.182C53.2855 321.778 48.0524 313.554 48.0524 313.554Z" fill="#2A94F4"/>
<path d="M34.671 306.445C34.5608 304.153 34.1201 301.73 33.5892 299.345C33.0513 296.951 32.4021 294.562 31.7002 292.185C30.2934 287.43 28.6652 282.72 26.9062 278.059C25.1426 273.399 23.2422 268.785 21.162 264.251C20.1162 261.988 19.0247 259.744 17.8415 257.548C17.2403 256.457 16.6327 255.367 15.9596 254.318C15.291 253.268 14.5927 252.225 13.7092 251.337C14.6448 252.172 15.4096 253.18 16.1424 254.194C16.8809 255.208 17.555 256.266 18.2236 257.327C19.5413 259.461 20.7692 261.648 21.9527 263.858C24.3084 268.285 26.4894 272.804 28.5389 277.386C30.5844 281.97 32.5036 286.615 34.217 291.359C35.0725 293.732 35.8785 296.129 36.5827 298.578C37.2775 301.034 37.9023 303.516 38.1946 306.211L34.671 306.445Z" fill="#CCE9FF"/>
<path d="M59.107 307.378C59.107 307.378 58.6692 308.586 56.7795 308.964C56.3981 309.041 55.9567 309.084 55.4479 309.073C53.3569 309.041 50.1185 308.148 45.1491 305.223C33.0032 298.068 32.7737 268.956 39.5018 259.095C53.2088 262.453 62.9495 289.235 59.107 307.378Z" fill="#0E538C"/>
<path d="M56.7794 308.964C56.398 309.041 55.9566 309.084 55.4478 309.073C55.4407 308.992 55.4303 308.914 55.4232 308.833C54.9782 304.764 54.3106 300.706 53.4985 296.68C52.6896 292.65 51.7291 288.649 50.5848 284.7C50.0092 282.726 49.3841 280.763 48.6633 278.838C48.476 278.361 48.2994 277.877 48.0981 277.404L47.8016 276.69L47.4837 275.991C47.0423 275.066 46.5831 274.137 45.9651 273.31C46.6113 274.116 47.1058 275.026 47.5825 275.941L47.9286 276.634L48.2501 277.336C48.4692 277.806 48.6633 278.283 48.8681 278.756C49.6592 280.663 50.3586 282.609 51.0048 284.566C52.2939 288.49 53.4029 292.47 54.3635 296.489C55.324 300.508 56.1365 304.563 56.737 308.667L56.7794 308.964Z" fill="#0E538C"/>
<path d="M114.844 307.587C114.844 307.587 114.46 308.646 112.804 308.977C112.47 309.045 112.083 309.082 111.637 309.073C109.805 309.045 106.966 308.262 102.611 305.699C91.9654 299.427 91.7641 273.911 97.661 265.268C109.675 268.212 118.212 291.685 114.844 307.587Z" fill="#51AEF4"/>
<path opacity="0.5" d="M112.804 308.977C112.47 309.045 112.083 309.082 111.637 309.073C111.631 309.002 111.622 308.934 111.616 308.862C111.226 305.296 110.641 301.739 109.929 298.211C109.22 294.679 108.378 291.171 107.375 287.711C106.87 285.98 106.322 284.259 105.691 282.572C105.527 282.154 105.372 281.73 105.196 281.315L104.936 280.69L104.657 280.077C104.27 279.266 103.868 278.452 103.326 277.728C103.893 278.433 104.326 279.232 104.744 280.034L105.047 280.64L105.329 281.256C105.521 281.668 105.691 282.086 105.871 282.501C106.564 284.172 107.177 285.878 107.744 287.593C108.873 291.032 109.846 294.521 110.688 298.043C111.529 301.566 112.241 305.12 112.768 308.717L112.804 308.977Z" fill="#51AEF4"/>
<path d="M302.504 313.554C300.808 283.04 323.412 241.878 346.58 239.855C355.057 257.611 340.434 304.586 318.852 313.182C297.271 321.778 302.504 313.554 302.504 313.554Z" fill="#0E538C"/>
<path d="M315.885 306.445C315.995 304.153 316.436 301.73 316.967 299.345C317.505 296.951 318.154 294.562 318.856 292.185C320.263 287.43 321.891 282.72 323.65 278.059C325.414 273.399 327.314 268.785 329.394 264.251C330.44 261.988 331.531 259.744 332.715 257.548C333.316 256.457 333.923 255.367 334.597 254.318C335.265 253.268 335.963 252.225 336.847 251.337C335.911 252.172 335.147 253.18 334.414 254.194C333.675 255.208 333.001 256.266 332.333 257.327C331.015 259.461 329.787 261.648 328.603 263.858C326.248 268.285 324.067 272.804 322.017 277.386C319.972 281.97 318.053 286.615 316.339 291.359C315.484 293.732 314.678 296.129 313.973 298.578C313.279 301.034 312.654 303.516 312.362 306.211L315.885 306.445ZM257.545 314.693C258.696 293.973 243.348 266.023 227.616 264.65C221.861 276.706 231.79 308.603 246.445 314.44C261.099 320.277 257.545 314.693 257.545 314.693Z" fill="#0E538C"/>
<path d="M248.459 309.865C248.384 308.309 248.085 306.664 247.725 305.044C247.36 303.419 246.919 301.796 246.442 300.182C245.487 296.954 244.381 293.755 243.187 290.59C241.989 287.426 240.699 284.293 239.286 281.215C238.576 279.678 237.835 278.154 237.032 276.663C236.623 275.922 236.211 275.182 235.754 274.47C235.3 273.757 234.826 273.049 234.226 272.446C234.861 273.013 235.381 273.697 235.878 274.385C236.379 275.074 236.837 275.792 237.291 276.513C238.186 277.962 239.02 279.447 239.823 280.948C241.423 283.954 242.904 287.023 244.295 290.134C245.684 293.246 246.988 296.4 248.151 299.622C248.732 301.233 249.279 302.861 249.757 304.524C250.229 306.191 250.653 307.877 250.852 309.707L248.459 309.865Z" fill="#0E538C"/>
<path d="M250.975 307.848C251.493 297.875 260.278 285.294 267.876 285.448C270.008 291.514 263.612 306.263 256.3 308.3C248.987 310.337 250.975 307.848 250.975 307.848Z" fill="#51AEF4"/>
<path d="M255.572 306.007C255.688 305.266 255.916 304.495 256.172 303.738C256.43 302.98 256.725 302.226 257.036 301.479C257.66 299.983 258.354 298.51 259.089 297.057C259.825 295.605 260.604 294.172 261.438 292.772C261.857 292.074 262.291 291.383 262.752 290.711C262.986 290.378 263.221 290.044 263.476 289.727C263.731 289.41 263.994 289.096 264.312 288.838C263.979 289.076 263.695 289.377 263.421 289.681C263.146 289.984 262.89 290.304 262.636 290.626C262.135 291.275 261.655 291.939 261.195 292.617C260.277 293.975 259.405 295.364 258.582 296.782C257.757 298.199 256.97 299.641 256.247 301.123C255.886 301.863 255.541 302.614 255.226 303.385C254.914 304.158 254.624 304.943 254.435 305.808L255.572 306.007Z" fill="#2797E2"/>
<path d="M107.049 307.848C107.567 297.875 116.353 285.294 123.951 285.448C126.083 291.514 119.686 306.263 112.374 308.3C105.061 310.337 107.049 307.848 107.049 307.848Z" fill="#0E538C"/>
<path d="M111.646 306.007C111.762 305.266 111.99 304.495 112.246 303.738C112.505 302.98 112.799 302.226 113.11 301.479C113.734 299.983 114.428 298.51 115.163 297.057C115.899 295.605 116.678 294.172 117.513 292.772C117.932 292.074 118.365 291.383 118.826 290.711C119.06 290.378 119.295 290.044 119.551 289.727C119.805 289.41 120.068 289.096 120.386 288.838C120.053 289.076 119.769 289.377 119.496 289.681C119.22 289.984 118.964 290.304 118.71 290.626C118.209 291.275 117.729 291.939 117.27 292.617C116.351 293.975 115.479 295.364 114.656 296.782C113.831 298.199 113.045 299.641 112.322 301.123C111.961 301.863 111.615 302.614 111.3 303.385C110.988 304.158 110.698 304.943 110.509 305.808L111.646 306.007Z" fill="#0E538C"/>
<path d="M291.449 307.378C291.449 307.378 291.887 308.586 293.777 308.964C294.158 309.041 294.6 309.084 295.108 309.073C297.199 309.041 300.438 308.148 305.407 305.223C317.553 298.068 317.783 268.956 311.054 259.095C297.347 262.453 287.607 289.235 291.449 307.378Z" fill="#2A94F4"/>
<path d="M293.777 308.964C294.158 309.041 294.599 309.084 295.108 309.073C295.115 308.992 295.126 308.914 295.133 308.833C295.578 304.764 296.245 300.706 297.058 296.68C297.866 292.65 298.827 288.649 299.971 284.7C300.547 282.726 301.172 280.763 301.893 278.838C302.08 278.361 302.256 277.877 302.458 277.404L302.754 276.69L303.072 275.991C303.514 275.066 303.973 274.137 304.591 273.31C303.945 274.116 303.45 275.026 302.974 275.941L302.627 276.634L302.306 277.336C302.087 277.806 301.893 278.283 301.688 278.756C300.897 280.663 300.197 282.609 299.551 284.566C298.262 288.49 297.153 292.47 296.193 296.489C295.232 300.508 294.42 304.563 293.819 308.667L293.777 308.964Z" fill="#2A94F4"/>
<path d="M346.235 343.314H4.97033C2.56829 343.314 0.602783 341.348 0.602783 338.946V308.479C0.602783 306.077 2.56829 304.111 4.97033 304.111H346.235C348.637 304.111 350.602 306.077 350.602 308.479V338.946C350.603 341.348 348.637 343.314 346.235 343.314Z" fill="#F2F2F2"/>
<path d="M182.839 325.657C242.67 325.657 291.172 323.601 291.172 321.064C291.172 318.528 242.67 316.472 182.839 316.472C123.008 316.472 74.5049 318.528 74.5049 321.064C74.5049 323.601 123.008 325.657 182.839 325.657Z" fill="#F2F2F2"/>
<path d="M145.504 92.0798L188.674 64.061L193.276 50.7643L192.992 65.5965L156.466 97.3823L145.504 92.0798Z" fill="#DF9481"/>
<path d="M129.073 101.937L156.405 84.9982L161.935 105.272L131.064 125.546L129.073 101.937Z" fill="#FFBE55"/>
<path opacity="0.2" d="M129.073 101.937L156.405 84.9982L161.935 105.272L131.064 125.546L129.073 101.937Z" fill="#FFBE55"/>
<path d="M73.4141 228.366L61.9364 251.283L60.3128 228.718L65.7287 226.199L59.7939 225.304L59.814 222.085L73.36 221.785L73.4141 228.366Z" fill="#FFBE55"/>
<path d="M117.132 156.928C117.132 156.928 130.26 206.68 126.46 213.244C122.66 219.808 72.6884 230.613 72.6884 230.613L72.563 220.845C72.563 220.845 107.488 204.662 111.634 205.699C103.343 198.098 95.1367 159.347 95.1367 159.347L117.132 156.928Z" fill="#093C59"/>
<path d="M65.285 268.911L75.1212 292.58L56.9857 279.055L58.6207 273.31L54.0632 277.216L51.6411 275.096L60.2706 264.65L65.285 268.911Z" fill="#FFBE55"/>
<path d="M114.657 157.374C114.657 157.374 85.5082 226.525 68.0636 273.31C57.3523 273.31 58.6719 262.898 58.6719 262.898C58.6719 262.898 79.8174 164.805 91.8584 150.342C110.378 151.602 114.657 157.374 114.657 157.374Z" fill="#0B4870"/>
<path d="M95.1365 125.546L59.896 158.132L40.8745 161.558L59.747 162.805L97.2466 137.539L95.1365 125.546Z" fill="#DF9481"/>
<path d="M126.872 93.8045C134.903 93.8045 141.413 86.9303 141.413 78.4505C141.413 69.9708 134.903 63.0966 126.872 63.0966C118.842 63.0966 112.332 69.9708 112.332 78.4505C112.332 86.9303 118.842 93.8045 126.872 93.8045Z" fill="#0B4870"/>
<path d="M140.607 68.1833C140.607 68.1833 144.506 92.5115 139.983 97.382C126.261 96.4464 122.831 91.2602 119.401 84.0875C115.97 76.9151 123.767 62.2582 140.607 68.1833Z" fill="#DF9481"/>
<path d="M144.041 68.1625C143.342 73.4936 122.67 87.0969 118.138 84.7227C117.49 75.0109 122.909 57.3433 144.041 68.1625Z" fill="#0B4870"/>
<path d="M121.495 85.2477C119.768 83.4851 118.101 83.2803 117.825 85.5397C117.575 87.5833 120.254 90.5852 122.196 90.1114C124.139 89.6379 121.495 85.2477 121.495 85.2477Z" fill="#DF9481"/>
<path d="M122.209 65.5544C117.515 59.094 109.283 55.3853 101.334 56.1494C98.6407 56.4084 95.9171 57.1852 93.821 58.8966C91.7252 60.608 90.3677 63.3769 90.8441 66.0405C91.6277 70.422 96.8968 73.4709 96.399 77.8942C96.1806 79.8328 94.8091 81.4904 93.1619 82.5359C91.5146 83.5813 89.6016 84.1112 87.72 84.6271C83.4928 85.7863 79.1337 87.0104 75.7199 89.7595C72.3061 92.5086 70.068 97.219 71.5267 101.353C72.4746 104.039 74.8805 106.473 74.2994 109.262C73.7006 112.136 70.2884 113.455 68.8161 115.996C67.3737 118.484 68.1271 121.828 70.0411 123.974C71.9551 126.121 74.7917 127.234 77.6196 127.758C82.1787 128.605 87.6899 127.641 89.9477 123.591C91.5201 120.77 91.0525 117.232 89.9127 114.21C88.7729 111.188 87.0213 108.413 86.0371 105.336C85.0532 102.26 84.9644 98.6216 86.949 96.0737C89.0319 93.3998 92.6945 92.6842 96.003 91.9483C99.3115 91.2123 102.977 89.9445 104.354 86.8474C105.598 84.0483 104.604 80.4145 106.534 78.0361C108.27 75.8962 111.447 75.8726 114.064 75.0102C117.666 73.8231 120.541 70.6466 121.363 66.944L122.209 65.5544Z" fill="#0B4870"/>
<path d="M131.064 93.1564L130.388 101.341L135.937 114.705L122.909 101.707L122.209 89.1687L131.064 93.1564Z" fill="#DF9481"/>
<path d="M138.439 130.13L129.071 139.677L120.357 162.805L95.2794 153.913L86.7945 150.901L95.1355 143.607C95.1355 143.607 86.5116 134.621 84.8293 128.041C100.549 114.723 112.616 104.03 122.908 101.708H125.652L135.938 114.703L138.439 130.13Z" fill="#FFBE55"/>
<path opacity="0.5" d="M111.634 129.059L95.2794 153.913L86.7942 150.902L95.1355 143.607L111.634 129.059Z" fill="#FFBE55"/>
<path d="M293.086 228.384L311.397 252.571L304.598 214.715L290.482 217.345L293.086 228.384Z" fill="#FFBE55"/>
<path d="M248.841 166.403C243.44 182.478 236.959 205.279 245.254 218.234C253.549 231.189 294.626 229.156 294.626 229.156L293.004 217.201C293.004 217.201 264.545 211.395 265.781 207.694C267.017 203.992 274.153 177.286 273.073 173.693C271.994 170.1 270.517 159.279 270.517 159.279L248.841 166.403Z" fill="#B1D9F2"/>
<path d="M299.303 275.513L277.998 297.109L314.484 284.941L309.853 271.35L299.303 275.513Z" fill="#FFBE55"/>
<path d="M250.881 163.366C251.169 169.093 297.302 276.329 297.302 276.329L310.832 273.085C310.832 273.085 286.335 174.607 283.825 161.708C281.315 148.809 250.881 163.366 250.881 163.366Z" fill="#CCE9FF"/>
<path d="M301.623 129.853L305.463 134.653L314.721 166.935L317.226 180.543L310.588 178.619L309.242 169.859L307.518 173.315L305.625 173.665L307.971 166.235L297.328 139.788L290.605 135.285L301.623 129.853ZM243.292 89.8337L198.768 64.0205L193.276 50.7643L192.992 65.5965L232.61 95.6803L243.292 89.8337Z" fill="#FFE3CA"/>
<path d="M258.854 98.323L237.748 83.0222L226.603 95.0505L251.906 116.967L258.854 98.323Z" fill="#0B3E5B"/>
<path d="M258.854 98.3231C258.008 99.0769 249.869 105.274 246.121 112.345C242.373 119.417 246.385 169.334 246.385 169.334L289.982 167.14L281.279 130.265L289.967 139.646L305.075 126.952C305.075 126.952 289.002 105.018 285.592 102.736C279.199 98.4579 258.854 98.3231 258.854 98.3231ZM259.958 63.594C263.443 63.8526 280.588 66.5943 266.402 87.3444C263.423 92.8102 259.958 63.594 259.958 63.594Z" fill="#0B4870"/>
<path d="M245.056 68.4645C245.056 68.4645 242.882 90.287 247.644 94.9239C251.058 94.5178 256.35 94.408 258.615 93.5631C265.411 91.0288 264.388 86.3116 267.038 83.0952C272.093 76.9585 261.576 61.7005 245.056 68.4645Z" fill="#FFE3CA"/>
<path d="M257.767 90.1833L258.48 98.6365L257.016 103.467C256.355 105.314 258.716 106.728 260.033 105.274L267.229 98.7026L266.684 83.1127L257.767 90.1833Z" fill="#FFE3CA"/>
<path d="M252.745 74.5033C251.095 74.4145 249.474 74.7973 247.852 75.1129C246.231 75.4286 244.427 75.5222 243.052 74.6061C241.167 73.3496 240.808 70.7356 239.411 68.9532C238.416 67.6845 236.944 66.8996 235.709 65.8625C235.528 65.7099 235.345 65.544 235.254 65.3252C235.047 64.8307 235.37 64.2823 235.711 63.8685C236.924 62.3969 238.579 61.2681 240.43 60.8096C242.281 60.351 244.321 60.5928 245.948 61.5873C247.431 62.4941 248.593 64.0023 250.279 64.4275C252.823 65.0692 255.212 63.0013 257.793 62.5265C258.693 62.3617 259.619 62.3938 260.506 62.6208C261.068 62.765 261.617 62.9919 262.068 63.3574C263.306 64.3611 263.585 66.1992 264.774 67.2596C266.014 68.3641 267.958 68.3767 269.187 69.4928C270.044 70.2712 270.398 71.446 270.704 72.5628C271.086 73.9595 271.423 75.5549 270.64 76.7731C270.299 77.3043 269.426 82.0277 268.887 82.3566C265.787 84.2489 262.556 80.4922 259.6 79.0293C258.532 78.5001 257.674 77.641 257.006 76.6529C256.452 75.8323 255.225 74.6372 252.745 74.5033Z" fill="#0B4870"/>
<path d="M263.301 76.5648L263.382 84.4648L264.957 84.3857L267.517 76.3525L263.301 76.5648Z" fill="#0B4870"/>
<path d="M265.464 77.5536C268.557 75.2024 269.545 76.0376 269.284 79.5602C269.022 83.0833 264.958 84.3854 264.958 84.3854L265.464 77.5536Z" fill="#FFE3CA"/>
<path d="M251.834 136.331C254.313 136.206 256.105 131.78 255.836 126.445C255.568 121.11 253.34 116.886 250.861 117.011C248.382 117.135 246.59 121.562 246.859 126.897C247.127 132.232 249.355 136.456 251.834 136.331Z" fill="#FFBE55"/>
<path d="M187.868 53.8711L180.688 46.3474M197.639 53.8711L204.818 46.3474M200.757 42.3568L201.228 41.8625M197.639 45.6244L199.933 43.2194M190.379 45.6244L188.085 43.2194" stroke="#FFBE55" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/>
<path d="M182.011 35.4888C175.039 35.4888 169.392 41.1397 169.392 48.1115C169.392 41.1397 163.741 35.4888 156.769 35.4888C163.741 35.4888 169.392 29.8379 169.392 22.8661C169.392 29.8379 175.039 35.4888 182.011 35.4888ZM210.024 87.0237C206.532 87.0237 203.704 89.8538 203.704 93.3457C203.704 89.8538 200.874 87.0237 197.382 87.0237C200.874 87.0237 203.704 84.1935 203.704 80.7016C203.704 84.1932 206.533 87.0237 210.024 87.0237Z" fill="#FFBE55"/>
</g>
<defs>
<clipPath id="clip0_162_2552">
<rect width="350" height="350" fill="white" transform="translate(0.602783 0.769043)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB