Fixed logos and background images (#4)

* Header and footer logo * Max height of slider * Fixed background images
ARK-Builders · Oct 17, 2024 · ff70128 · ff70128
1 parent fcba238
commit ff70128
Show file tree

Hide file tree

Showing 17 changed files with 105 additions and 18 deletions.
diff --git a/src/lib/assets/images/animations/feature-1.gif b/src/lib/assets/images/animations/feature-1.gif
diff --git a/src/lib/assets/images/footer-logo.svelte b/src/lib/assets/images/footer-logo.svelte
@@ -0,0 +1,25 @@
+<svg width="107" height="40" viewBox="0 0 107 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_167_1187)">
+		<path
+			d="M21.7074 2.14597C21.4054 1.50386 20.9266 0.96112 20.3272 0.581353C19.7278 0.201585 19.0325 0.000519468 18.3229 0.00171428C17.6133 0.00290909 16.9188 0.206315 16.3206 0.588099C15.7225 0.969882 15.2456 1.51423 14.9457 2.15736L0.445361 33.2393C0.107641 33.9633 -0.0420438 34.7608 0.0101512 35.558C0.0623461 36.3552 0.314735 37.1264 0.743975 37.8002C1.17321 38.4741 1.76544 39.0288 2.46588 39.413C3.16632 39.7973 3.95236 39.9987 4.75128 39.9987C5.66028 39.9987 6.5502 39.7379 7.31544 39.2473C8.08069 38.7568 8.68914 38.0569 9.06859 37.2309L10.1969 34.774L14.299 25.9208L16.4838 21.238C16.6535 20.8738 16.9237 20.5657 17.2628 20.3502C17.6018 20.1347 17.9955 20.0206 18.3972 20.0216C18.799 20.0225 19.1921 20.1384 19.5301 20.3556C19.8681 20.5728 20.1369 20.8821 20.3048 21.2471L22.4577 25.9208L26.5633 34.774L27.7337 37.2674C28.1171 38.0841 28.7252 38.7747 29.4867 39.2586C30.2482 39.7425 31.1317 39.9996 32.0339 39.9998C35.5167 39.9998 37.8154 36.377 36.3319 33.2267L21.7074 2.14597Z"
+			fill="#968D8D"
+		/>
+		<path
+			d="M63.6338 26.7669C63.4279 26.4151 63.3389 26.007 63.3799 25.6015C63.4208 25.1959 63.5894 24.8138 63.8615 24.5103C66.2873 21.8254 67.633 18.3374 67.6392 14.7189C67.6392 6.61373 61.0266 0 52.9202 0H33.2499C32.0758 0 30.9499 0.466374 30.1198 1.29652C29.2896 2.12667 28.8232 3.2526 28.8232 4.42661C28.8232 5.60062 29.2896 6.72654 30.1198 7.55669C30.9499 8.38684 32.0758 8.85322 33.2499 8.85322H52.9635C56.1343 8.85322 58.7962 11.3694 58.8349 14.5459C58.8736 17.7804 56.2994 20.3239 53.0751 20.3239H43.1084C41.9344 20.3239 40.8085 20.7903 39.9783 21.6204C39.1482 22.4506 38.6818 23.5765 38.6818 24.7505V24.9634C38.6818 26.1374 39.1482 27.2634 39.9783 28.0935C40.8085 28.9237 41.9344 29.39 43.1084 29.39H51.0781C51.6861 29.3898 52.2836 29.5491 52.8108 29.852C53.338 30.1548 53.7766 30.5907 54.0827 31.116L57.751 37.4087C58.2116 38.1977 58.8711 38.8521 59.6636 39.3066C60.4561 39.7611 61.354 39.9998 62.2676 39.9989C66.3014 39.9989 68.813 35.6212 66.7773 32.143L63.6338 26.7669Z"
+			fill="#968D8D"
+		/>
+		<path
+			d="M101.066 39.9988C99.6773 39.999 98.3447 39.4488 97.3605 38.4686L86.4658 27.615C86.2294 27.3792 85.9486 27.1926 85.6397 27.066C85.3307 26.9394 84.9998 26.8752 84.6659 26.8772C84.332 26.8792 84.0018 26.9474 83.6944 27.0777C83.387 27.2081 83.1085 27.398 82.8749 27.6366C82.4124 28.1094 82.1533 28.7445 82.1531 29.4059V34.7479C82.1531 36.1405 81.5999 37.4761 80.6151 38.4608C79.6304 39.4456 78.2948 39.9988 76.9022 39.9988C76.2125 39.9989 75.5296 39.8632 74.8924 39.5994C74.2552 39.3356 73.6762 38.9488 73.1885 38.4612C72.7008 37.9736 72.3139 37.3947 72.05 36.7576C71.786 36.1204 71.6501 35.4375 71.6501 34.7479V26.8727C71.6501 25.0611 72.3677 23.3233 73.646 22.0396L82.1576 13.5006L94.0678 1.54605C94.5521 1.06005 95.1275 0.674408 95.7611 0.41124C96.3947 0.148071 97.074 0.0125521 97.7601 0.0124512C102.398 0.0124512 104.726 5.61744 101.45 8.90324L93.4325 16.9265C93.071 17.2892 92.868 17.7805 92.868 18.2927C92.868 18.8049 93.071 19.2962 93.4325 19.6589L104.785 31.0442C108.087 34.346 105.742 39.9988 101.066 39.9988Z"
+			fill="#968D8D"
+		/>
+		<path
+			d="M82.1532 5.25538C82.153 6.74344 81.5636 8.17088 80.5137 9.22544L73.2351 16.5325C73.1054 16.6646 72.9393 16.755 72.758 16.7921C72.5768 16.8293 72.3885 16.8115 72.2174 16.7411C72.0462 16.6707 71.9 16.5508 71.7973 16.3969C71.6947 16.2429 71.6403 16.0618 71.6411 15.8767V5.25538C71.6411 3.86215 72.1946 2.52598 73.1797 1.54082C74.1649 0.555659 75.5011 0.00220035 76.8943 0.00220035C77.5846 0.00145226 78.2684 0.136778 78.9064 0.40044C79.5444 0.664102 80.1241 1.05093 80.6125 1.53881C81.1009 2.02668 81.4884 2.60604 81.7528 3.24376C82.0171 3.88148 82.1532 4.56504 82.1532 5.25538Z"
+			fill="#968D8D"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_167_1187">
+			<rect width="106.329" height="40" fill="white" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/src/lib/assets/images/logo.png b/src/lib/assets/images/logo.png
diff --git a/src/lib/assets/images/logo.svelte b/src/lib/assets/images/logo.svelte
@@ -0,0 +1,69 @@
+<svg width="106" height="40" viewBox="0 0 106 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#clip0_216_318)">
+		<path
+			d="M21.6403 2.14597C21.3392 1.50386 20.8619 0.96112 20.2643 0.581353C19.6668 0.201585 18.9737 0.000519468 18.2663 0.00171428C17.5589 0.00290909 16.8665 0.206315 16.2702 0.588099C15.6739 0.969882 15.1984 1.51423 14.8995 2.15736L0.443984 33.2393C0.107308 33.9633 -0.0419138 34.7608 0.0101198 35.558C0.0621533 36.3552 0.313762 37.1264 0.741674 37.8002C1.16959 38.4741 1.75998 39.0288 2.45826 39.413C3.15653 39.7973 3.94014 39.9987 4.73659 39.9987C5.64278 39.9987 6.52994 39.7379 7.29282 39.2473C8.0557 38.7568 8.66226 38.0569 9.04055 37.2309L10.1653 34.774L14.2548 25.9208L16.4329 21.238C16.602 20.8738 16.8714 20.5657 17.2094 20.3502C17.5474 20.1347 17.9398 20.0206 18.3403 20.0216C18.7408 20.0225 19.1327 20.1384 19.4697 20.3556C19.8066 20.5728 20.0746 20.8821 20.242 21.2471L22.3883 25.9208L26.4811 34.774L27.6479 37.2674C28.0302 38.0841 28.6363 38.7747 29.3955 39.2586C30.1546 39.7425 31.0354 39.9996 31.9348 39.9998C35.4068 39.9998 37.6984 36.377 36.2195 33.2267L21.6403 2.14597Z"
+			fill="url(#paint0_linear_216_318)"
+		/>
+		<path
+			d="M63.4369 26.7669C63.2316 26.4151 63.143 26.007 63.1838 25.6015C63.2245 25.1959 63.3927 24.8138 63.6639 24.5103C66.0822 21.8254 67.4238 18.3374 67.4299 14.7189C67.4299 6.61373 60.8378 0 52.7565 0H33.1469C31.9765 0 30.8541 0.466374 30.0265 1.29652C29.1989 2.12667 28.734 3.2526 28.734 4.42661C28.734 5.60062 29.1989 6.72654 30.0265 7.55669C30.8541 8.38684 31.9765 8.85322 33.1469 8.85322H52.7996C55.9606 8.85322 58.6143 11.3694 58.6529 14.5459C58.6915 17.7804 56.1252 20.3239 52.9109 20.3239H42.975C41.8046 20.3239 40.6822 20.7903 39.8546 21.6204C39.027 22.4506 38.5621 23.5765 38.5621 24.7505V24.9634C38.5621 26.1374 39.027 27.2634 39.8546 28.0935C40.6822 28.9237 41.8046 29.39 42.975 29.39H50.92C51.5262 29.3898 52.1218 29.5491 52.6474 29.852C53.173 30.1548 53.6102 30.5907 53.9153 31.116L57.5723 37.4087C58.0315 38.1977 58.6889 38.8521 59.479 39.3066C60.2691 39.7611 61.1641 39.9998 62.0749 39.9989C66.0963 39.9989 68.6001 35.6212 66.5707 32.143L63.4369 26.7669Z"
+			fill="url(#paint1_linear_216_318)"
+		/>
+		<path
+			d="M100.754 39.9989C99.3691 39.9991 98.0406 39.4489 97.0594 38.4687L86.1985 27.6151C85.9628 27.3793 85.6828 27.1928 85.3749 27.0661C85.0669 26.9395 84.7369 26.8753 84.4041 26.8773C84.0712 26.8794 83.7421 26.9475 83.4356 27.0778C83.1292 27.2082 82.8515 27.3981 82.6186 27.6367C82.1575 28.1095 81.8992 28.7446 81.8991 29.406V34.748C81.8991 36.1406 81.3475 37.4762 80.3659 38.461C79.3842 39.4457 78.0527 39.9989 76.6644 39.9989C75.9769 39.9991 75.296 39.8633 74.6608 39.5995C74.0256 39.3357 73.4484 38.949 72.9622 38.4614C72.476 37.9738 72.0903 37.3948 71.8272 36.7577C71.564 36.1206 71.4286 35.4377 71.4286 34.748V26.8728C71.4286 25.0612 72.144 23.3234 73.4183 22.0397L81.9036 13.5007L93.7769 1.54617C94.2597 1.06017 94.8333 0.67453 95.465 0.411362C96.0966 0.148194 96.7738 0.0126741 97.4578 0.0125732C102.082 0.0125732 104.402 5.61756 101.136 8.90336L93.1436 16.9266C92.7832 17.2894 92.5808 17.7807 92.5808 18.2928C92.5808 18.805 92.7832 19.2963 93.1436 19.6591L104.461 31.0444C107.752 34.3461 105.415 39.9989 100.754 39.9989Z"
+			fill="url(#paint2_linear_216_318)"
+		/>
+		<path
+			d="M81.899 5.2555C81.8989 6.74356 81.3112 8.171 80.2646 9.22556L73.0085 16.5327C72.8792 16.6647 72.7136 16.7551 72.5329 16.7922C72.3522 16.8294 72.1645 16.8116 71.9939 16.7412C71.8233 16.6708 71.6775 16.551 71.5752 16.397C71.4728 16.243 71.4186 16.0619 71.4194 15.8769V5.2555C71.4194 3.86227 71.9712 2.52611 72.9533 1.54094C73.9354 0.555781 75.2675 0.00232242 76.6564 0.00232242C77.3446 0.00157433 78.0262 0.1369 78.6622 0.400562C79.2982 0.664224 79.8762 1.05105 80.3631 1.53893C80.85 2.02681 81.2363 2.60617 81.4998 3.24388C81.7633 3.8816 81.899 4.56517 81.899 5.2555Z"
+			fill="url(#paint3_linear_216_318)"
+		/>
+	</g>
+	<defs>
+		<linearGradient
+			id="paint0_linear_216_318"
+			x1="32.4989"
+			y1="7.66443"
+			x2="11.18"
+			y2="44.4751"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFCC19" />
+			<stop offset="1" stop-color="#FF3B04" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_216_318"
+			x1="58.679"
+			y1="1.16586"
+			x2="42.1972"
+			y2="29.6225"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFCC19" />
+			<stop offset="1" stop-color="#FF3B04" />
+		</linearGradient>
+		<linearGradient
+			id="paint2_linear_216_318"
+			x1="104.456"
+			y1="3.23348"
+			x2="81.1772"
+			y2="43.4295"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFCC19" />
+			<stop offset="1" stop-color="#FF3B04" />
+		</linearGradient>
+		<linearGradient
+			id="paint3_linear_216_318"
+			x1="79.3021"
+			y1="0.71732"
+			x2="70.5161"
+			y2="15.8874"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFCC19" />
+			<stop offset="1" stop-color="#FF3B04" />
+		</linearGradient>
+		<clipPath id="clip0_216_318">
+			<rect width="106" height="40" fill="white" />
+		</clipPath>
+	</defs>
+</svg>
diff --git a/src/lib/assets/images/process/ark-left.png b/src/lib/assets/images/process/ark-left.png
diff --git a/src/lib/assets/images/process/ark-right.png b/src/lib/assets/images/process/ark-right.png
diff --git a/src/lib/assets/images/process/typical-left.png b/src/lib/assets/images/process/typical-left.png
diff --git a/src/lib/assets/images/process/typical-right1.png b/src/lib/assets/images/process/typical-right1.png
diff --git a/src/lib/assets/images/process/typical-right2.png b/src/lib/assets/images/process/typical-right2.png
diff --git a/src/lib/components/elements/ScrollContainer.svelte b/src/lib/components/elements/ScrollContainer.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 
-	export let maxHeight = '380px'
-
 	let containerRef: HTMLDivElement
 	let isScrolling = false
 	let isVisible = false
@@ -62,8 +60,7 @@
 
 <div
 	bind:this={containerRef}
-	class="flex w-full snap-y snap-mandatory flex-col gap-2 overflow-y-auto scroll-smooth rounded-xl lg:h-[317px] xl:h-full"
-	style="max-height: {maxHeight};"
+	class="flex max-h-[480px] w-full snap-y snap-mandatory flex-col gap-2 overflow-y-auto scroll-smooth rounded-xl lg:max-h-[380px] xl:h-full"
 >
 	<!-- <div bind:this={contentRef} class=" flex snap-y snap-mandatory flex-col gap-2 overflow-y-auto"> -->
 	<slot />

diff --git a/src/lib/components/layouts/Footer.svelte b/src/lib/components/layouts/Footer.svelte
@@ -2,14 +2,14 @@
 	import { base } from '$app/paths'
 	import { communityList } from '$utils/constants'
 	import Icon from '@iconify/svelte'
-	import FooterLogo from '$lib/assets/images/footer-logo.png'
+	import FooterLogo from '$lib/assets/images/footer-logo.svelte'
 </script>
 
 <footer class="bg-white px-5 pb-10 pt-40 lg:px-5 xl:px-0">
 	<div class="mx-auto flex w-full max-w-7xl flex-row">
 		<div class="flex flex-1 flex-col gap-5">
-			<div>
-				<img src={FooterLogo} class="h-10" alt="footer logo" />
+			<div class="h-10 w-fit">
+				<FooterLogo />
 			</div>
 			<div class="grid grid-cols-2 flex-row gap-3 lg:flex">
 				{#each communityList as community}

diff --git a/src/lib/components/layouts/Header.svelte b/src/lib/components/layouts/Header.svelte
@@ -7,7 +7,7 @@
 	import CommunityMenus from '$lib/components/CommunityMenus.svelte'
 	import Icon from '@iconify/svelte'
 	import MobileMenu from '$lib/components/layouts/MobileMenu.svelte'
-	import HeaderLogo from '$lib/assets/images/logo.png'
+	import HeaderLogo from '$lib/assets/images/logo.svelte'
 
 	let showMobileMenu = false
 </script>
@@ -17,8 +17,8 @@
 		<div class="flex flex-row items-center">
 			<a href="{base}/" aria-label={config.headerTitle}>
 				<div class="flex items-center justify-between">
-					<div class="mr-3">
-						<img src={HeaderLogo} alt="Logo" class="h-10 w-auto" />
+					<div class="mr-3 h-10 w-auto">
+						<HeaderLogo />
 					</div>
 				</div>
 			</a>

diff --git a/src/lib/components/sections/Hero.svelte b/src/lib/components/sections/Hero.svelte
@@ -5,10 +5,6 @@
 	import Icon from '@iconify/svelte'
 	import ScrollContainer from '$lib/components/elements/ScrollContainer.svelte'
 	import { communityList } from '$utils/constants'
-	import leftImg from '$lib/assets/images/left.png'
-	import rightImg from '$lib/assets/images/right.png'
-	import mobLeftImg from '$lib/assets/images/mob-left.png'
-	import mobRightImg from '$lib/assets/images/mob-right.png'
 	import LottieAnimation from '$lib/components/elements/LottieAnimation.svelte'
 
 	const slides = [
@@ -45,8 +41,8 @@
 	<div class="relative flex w-full flex-row items-center justify-between gap-1 py-10 md:mb-10">
 		<!-- BG Images -->
 		<div class="flex-1">
-			<img class="hidden md:block xl:max-w-[60%]" src={leftImg} alt="left" />
-			<img class="md:hidden" src={mobLeftImg} alt="left" />
+			<img class="hidden md:block xl:max-w-[60%]" src={base + '/images/left.png'} alt="left" />
+			<img class="md:hidden" src={base + '/images/mob-left.png'} alt="left" />
 		</div>
 
 		<!-- Center part -->
@@ -106,8 +102,8 @@
 
 		<!-- BG Images -->
 		<div class="flex flex-1 justify-end">
-			<img class="hidden md:block xl:max-w-[50%]" src={rightImg} alt="right" />
-			<img class="md:hidden" src={mobRightImg} alt="right" />
+			<img class="hidden md:block xl:max-w-[50%]" src={base + '/images/right.png'} alt="right" />
+			<img class="md:hidden" src={base + '/images/mob-right.png'} alt="right" />
 		</div>
 	</div>
 

diff --git a/static/images/left.png b/static/images/left.png
diff --git a/static/images/mob-left.png b/static/images/mob-left.png
diff --git a/static/images/mob-right.png b/static/images/mob-right.png
diff --git a/static/images/right.png b/static/images/right.png