Feat/footer

package.json

@@ -42,6 +42,7 @@
 		"clsx": "^2.1.1",
 		"svelte-fa": "^4.0.2",
 		"tailwind-merge": "^2.5.2",
-		"tailwind-variants": "^0.2.1"
+		"tailwind-variants": "^0.2.1",
+		"vite-plugin-svelte-svg": "^2.3.0"
 	}
 }

src/lib/components/Footer/Footer.svelte

@@ -1,107 +1,46 @@
 <script lang="ts">
 	import { typography } from '../../../styles/tailwind/typography';
-	import sucuImg from '$lib/components/Footer/suculogo.png';
+	import sucuImg from '$lib/assets/images/suculogo.png';
+	import { faFacebook, faInstagram } from '@fortawesome/free-brands-svg-icons';
+	import Sccusvg from '$lib/assets/icons/sccu.svg';
+	import Fa from 'svelte-fa';
+
+	console.log('svg', Sccusvg);
 </script>
 
 <div class="h-auto w-full py-[64px] px-[135px] max-md:p-[70px] gap-6 bg-sucu-pink-05">
 	<div class="flex justify-between w-full h-full max-md:hidden">
 		<div class="h-auto w-auto gap-6 flex">
 			<div class="flex flex-col gap-3">
 				<!-- sccu icon big -->
-				<svg
-					width="55"
-					height="55"
-					viewBox="0 0 55 55"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						d="M49.4088 22.3612C47.6034 20.5561 45.4984 19.1554 43.2085 18.2079C40.919 17.2579 38.4399 16.7614 35.8868 16.7614C31.2285 16.7614 26.8259 18.4129 23.3482 21.4445L21.0254 19.122L33.5973 6.55233L32.6471 5.6023C29.0337 1.98953 24.2317 0 19.1253 0C14.0161 0.00256667 9.21446 1.98953 5.6007 5.6023C1.98988 9.21287 0 14.0136 0 19.122C0 24.2304 1.98988 29.0312 5.6007 32.6418C9.2141 36.252 14.0161 38.2415 19.1253 38.2415C23.781 38.2415 28.1836 36.5875 31.6613 33.5584L33.9842 35.8809L27.5073 42.3592L25.6044 44.2592L21.4119 48.4506L22.3647 49.4006C25.9755 53.0134 30.7775 55.0004 35.8868 55.0004C40.5424 55.0004 44.9476 53.3489 48.4253 50.3173C48.7608 50.0254 49.0912 49.7182 49.4088 49.4006C49.729 49.0805 50.0337 48.7527 50.3257 48.4172C56.8509 40.9149 56.5436 29.495 49.4088 22.3615V22.3612ZM17.2224 19.122L21.4119 23.3112L25.5428 27.4413C21.4247 30.6214 15.4679 30.3244 11.6932 26.5503C7.59828 22.4536 7.59828 15.7883 11.6932 11.6941C13.7421 9.64553 16.4335 8.62143 19.1224 8.62143C21.3914 8.62143 23.6578 9.34853 25.5428 10.8031L17.2224 19.1224V19.122ZM19.1253 35.5527C14.7334 35.5527 10.6077 33.8448 7.50367 30.7388C4.39966 27.6353 2.68923 23.5103 2.68923 19.1217C2.68923 14.733 4.40003 10.6055 7.50367 7.502C10.6077 4.39853 14.7334 2.69097 19.1253 2.6884C23.064 2.6884 26.7904 4.06597 29.7558 6.59047L27.456 8.88983C22.2778 4.66767 14.6179 4.96723 9.7928 9.7911C4.64794 14.9351 4.64794 23.3057 9.7928 28.4497C12.3639 31.0229 15.7445 32.3085 19.1224 32.3085C22.0805 32.3085 25.0381 31.3251 27.4534 29.3535H27.456L29.7558 31.6529C26.79 34.1777 23.064 35.5527 19.1253 35.5527ZM33.5973 31.6917L29.469 27.5616C33.587 24.3815 39.5412 24.6785 43.316 28.4526C45.3007 30.437 46.3943 33.0744 46.3943 35.8805C46.3943 38.2338 45.626 40.469 44.2071 42.2998L35.8864 33.9805L33.5969 31.6914L33.5973 31.6917ZM35.8868 37.7832L42.3045 44.1998C42.1868 44.2919 42.0662 44.3791 41.9459 44.4635C41.8538 44.5276 41.7614 44.5914 41.6694 44.653C41.6642 44.6556 41.6617 44.6582 41.6565 44.6607C41.5872 44.7069 41.5183 44.7502 41.449 44.7938C41.3745 44.84 41.3004 44.8859 41.2263 44.9295C41.1519 44.9757 41.0753 45.0164 41.0008 45.0575C40.9264 45.1011 40.8497 45.1418 40.7753 45.1803C40.6678 45.2368 40.5604 45.2903 40.4525 45.3416C40.3143 45.408 40.176 45.4722 40.0352 45.5312C39.9047 45.5877 39.7741 45.6412 39.6435 45.69C39.5001 45.7464 39.3542 45.7974 39.2108 45.8462C39.1008 45.8821 38.9908 45.9155 38.8804 45.9485C38.8393 45.9613 38.8008 45.9716 38.7627 45.9818C38.6475 46.0152 38.5323 46.046 38.4168 46.0739C38.4091 46.0764 38.3989 46.079 38.3886 46.0816C38.2786 46.1072 38.1682 46.1329 38.0556 46.156C38.0017 46.1688 37.9481 46.1791 37.8942 46.1894C37.7971 46.2073 37.6969 46.2253 37.5972 46.2433C37.5818 46.2458 37.5638 46.2484 37.5484 46.251C37.4179 46.2715 37.2899 46.2895 37.1593 46.3049C37.057 46.3177 36.9543 46.328 36.852 46.3357C36.7827 46.3434 36.7137 46.3511 36.6419 46.3536C36.5597 46.3613 36.4754 46.3665 36.391 46.369C36.3371 46.3716 36.2836 46.3742 36.2296 46.3767C36.1145 46.3793 36.0019 46.3819 35.8864 46.3819C35.7709 46.3819 35.6583 46.3793 35.5431 46.3767C35.4892 46.3742 35.4357 46.3716 35.3818 46.369C35.2971 46.3665 35.2127 46.3613 35.1309 46.3536C35.059 46.3511 34.9901 46.3434 34.9208 46.3357C34.8185 46.328 34.7158 46.3177 34.6135 46.3049C34.4829 46.2895 34.3549 46.2715 34.2244 46.251C34.0964 46.2304 33.971 46.2073 33.843 46.1817C33.7942 46.1714 33.7432 46.1637 33.6944 46.1509C33.4766 46.1047 33.2617 46.0537 33.0464 45.9921C32.9951 45.9793 32.9441 45.9639 32.8928 45.9485C32.6265 45.8689 32.3599 45.7794 32.0962 45.6771C31.9939 45.6386 31.8912 45.5979 31.7889 45.5543C31.5227 45.4417 31.2586 45.3163 30.9975 45.1803C30.9234 45.1418 30.8464 45.1007 30.7723 45.0575C30.6953 45.0164 30.6212 44.9753 30.5468 44.9295C30.4723 44.8859 30.3983 44.84 30.3242 44.7938C30.2549 44.7502 30.1859 44.7069 30.1166 44.6607C30.1115 44.6582 30.1089 44.6556 30.1038 44.653C30.0117 44.5914 29.9193 44.5276 29.8273 44.4635C29.707 44.3788 29.5867 44.2919 29.4686 44.1998L35.8864 37.7832H35.8868ZM35.8868 52.3116C31.9481 52.3116 28.2192 50.9366 25.2538 48.4121L27.5535 46.1127C27.7817 46.2972 28.012 46.4739 28.2474 46.6404C28.327 46.6968 28.4036 46.7504 28.4828 46.8043C28.565 46.8607 28.6442 46.9117 28.7238 46.963C28.8059 47.0169 28.8851 47.0679 28.9669 47.1167C29.2922 47.3165 29.6226 47.5031 29.9604 47.6696C30.0271 47.703 30.091 47.7363 30.1577 47.7668C30.2729 47.8232 30.3909 47.8768 30.5087 47.9281C30.5754 47.9589 30.6418 47.9871 30.7085 48.015C30.7778 48.0458 30.8493 48.0766 30.9187 48.1019C31.0004 48.1353 31.0826 48.1686 31.1644 48.1991C31.1952 48.2119 31.2234 48.2222 31.2539 48.2324C31.428 48.2992 31.6048 48.3604 31.7841 48.4169C32.1681 48.5448 32.5576 48.6501 32.9492 48.7395C33.0109 48.7524 33.0695 48.7652 33.1311 48.778C33.5973 48.8778 34.0685 48.9522 34.5398 48.998C34.6168 49.0057 34.6934 49.0134 34.7675 49.0211C34.9571 49.0365 35.1441 49.0494 35.3308 49.0545C35.4254 49.0596 35.5178 49.0622 35.6099 49.0648C35.7943 49.0699 35.9788 49.0699 36.1629 49.0648C36.255 49.0622 36.3474 49.0596 36.442 49.0545C36.629 49.0494 36.816 49.0365 37.0053 49.0211C37.0794 49.0134 37.1538 49.0057 37.2305 49.0006C37.753 48.9467 38.2727 48.8624 38.7876 48.7472C38.8668 48.7293 38.949 48.7113 39.0282 48.6908C39.5632 48.5602 40.091 48.3963 40.6084 48.1991C40.6906 48.1683 40.7723 48.1349 40.8541 48.1019C40.9234 48.0762 40.9949 48.0454 41.0643 48.015C41.131 47.9868 41.1974 47.9585 41.2641 47.9281C42.1094 47.5541 42.9236 47.0855 43.6893 46.5223C43.7663 46.4658 43.8404 46.4097 43.9148 46.3533C44.0172 46.2763 44.1173 46.1971 44.217 46.1153H44.2196L44.2684 46.1615L46.5194 48.4121C43.551 50.937 39.8251 52.3116 35.8864 52.3116H35.8868ZM48.4201 46.5095L46.1691 44.2614V44.2589L46.1204 44.2127V44.2101C48.0409 41.862 49.0835 38.9506 49.0835 35.8805C49.0835 32.3572 47.7109 29.044 45.2189 26.55C40.3942 21.7283 32.7318 21.4291 27.5535 25.6487L25.2538 23.3493C28.2195 20.8248 31.9481 19.4498 35.8868 19.4498C40.2761 19.4498 44.4044 21.1578 47.5084 24.2612C53.5958 30.3501 53.9005 40.0624 48.4201 46.5095Z"
-						fill="#FF82A9"
-					/>
-				</svg>
+				<img src={Sccusvg} alt="sccu icon" width="55" height="55" />
 				<div class={typography({ variant: 'heading4' })}>สภานิสิตจุฬาลงกรณ์มหาวิทยาลัย</div>
 
 				<div class="flex gap-3">
-					<!-- facebook icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M13 1C6.384 1 1 6.384 1 13C1 19.616 6.384 25 13 25C19.616 25 25 19.616 25 13C25 6.384 19.616 1 13 1ZM13 3C18.535 3 23 7.465 23 13C23.0018 15.3938 22.1432 17.7085 20.5806 19.522C19.0181 21.3355 16.8558 22.5269 14.488 22.879V15.916H17.336L17.783 13.023H14.488V11.443C14.488 10.243 14.883 9.176 16.006 9.176H17.811V6.652C17.494 6.609 16.823 6.516 15.555 6.516C12.907 6.516 11.355 7.914 11.355 11.1V13.023H8.633V15.916H11.355V22.854C9.01975 22.4696 6.89724 21.2675 5.36669 19.4623C3.83615 17.6572 2.99729 15.3667 3 13C3 7.465 7.465 3 13 3Z"
-							fill="#3F3A3A"
-						/>
-					</svg>
+					<Fa icon={faFacebook} />
 					<div class={typography({ variant: 'body-normal' })}>สภานิสิตจุฬาลงกรณ์มหาวิทยาลัย</div>
 				</div>
 
 				<div class="flex gap-3">
-					<!-- instragram icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M19.6 6.23594H19.612M7 0.835938H19C22.3137 0.835938 25 3.52223 25 6.83594V18.8359C25 22.1496 22.3137 24.8359 19 24.8359H7C3.68629 24.8359 1 22.1496 1 18.8359V6.83594C1 3.52223 3.68629 0.835938 7 0.835938ZM17.8 12.0799C17.9481 13.0786 17.7775 14.0986 17.3125 14.9948C16.8475 15.8909 16.1118 16.6176 15.21 17.0715C14.3081 17.5255 13.2861 17.6835 12.2893 17.5231C11.2926 17.3627 10.3717 16.892 9.65781 16.1781C8.9439 15.4642 8.47328 14.5434 8.31288 13.5466C8.15248 12.5498 8.31048 11.5278 8.76439 10.626C9.21831 9.72416 9.94502 8.98843 10.8412 8.52343C11.7373 8.05843 12.7573 7.88784 13.756 8.03594C14.7747 8.187 15.7178 8.66169 16.446 9.38991C17.1742 10.1181 17.6489 11.0612 17.8 12.0799Z"
-							stroke="#3F3A3A"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
+					<Fa icon={faInstagram} />
 
 					<div class={typography({ variant: 'body-normal' })}>sapanisitchula</div>
 				</div>
 			</div>
 			<div class="flex flex-col gap-3">
-				<!-- sucu icon big -->
 				<img src={sucuImg} class="w-[34px] h-[55px]" alt="sucuicon" />
 
 				<div class={typography({ variant: 'heading4' })}>สภานิสิตจุฬาลงกรณ์มหาวิทยาลัย</div>
 
 				<div class="flex gap-3">
-					<!-- facebook icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M13 1C6.384 1 1 6.384 1 13C1 19.616 6.384 25 13 25C19.616 25 25 19.616 25 13C25 6.384 19.616 1 13 1ZM13 3C18.535 3 23 7.465 23 13C23.0018 15.3938 22.1432 17.7085 20.5806 19.522C19.0181 21.3355 16.8558 22.5269 14.488 22.879V15.916H17.336L17.783 13.023H14.488V11.443C14.488 10.243 14.883 9.176 16.006 9.176H17.811V6.652C17.494 6.609 16.823 6.516 15.555 6.516C12.907 6.516 11.355 7.914 11.355 11.1V13.023H8.633V15.916H11.355V22.854C9.01975 22.4696 6.89724 21.2675 5.36669 19.4623C3.83615 17.6572 2.99729 15.3667 3 13C3 7.465 7.465 3 13 3Z"
-							fill="#3F3A3A"
-						/>
-					</svg>
+					<Fa icon={faFacebook} />
 					<div class={typography({ variant: 'body-normal' })}>
 						องค์การบริหารสโมสรนิสิตจุฬาลงกรณ์มหาวิทยาลัย (อบจ.)
 					</div>
 				</div>
 
 				<div class="flex gap-3">
-					<!-- instragram icon -->
-					<svg
-						width="26"
-						height="26"
-						viewBox="0 0 26 26"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M19.6 6.23594H19.612M7 0.835938H19C22.3137 0.835938 25 3.52223 25 6.83594V18.8359C25 22.1496 22.3137 24.8359 19 24.8359H7C3.68629 24.8359 1 22.1496 1 18.8359V6.83594C1 3.52223 3.68629 0.835938 7 0.835938ZM17.8 12.0799C17.9481 13.0786 17.7775 14.0986 17.3125 14.9948C16.8475 15.8909 16.1118 16.6176 15.21 17.0715C14.3081 17.5255 13.2861 17.6835 12.2893 17.5231C11.2926 17.3627 10.3717 16.892 9.65781 16.1781C8.9439 15.4642 8.47328 14.5434 8.31288 13.5466C8.15248 12.5498 8.31048 11.5278 8.76439 10.626C9.21831 9.72416 9.94502 8.98843 10.8412 8.52343C11.7373 8.05843 12.7573 7.88784 13.756 8.03594C14.7747 8.187 15.7178 8.66169 16.446 9.38991C17.1742 10.1181 17.6489 11.0612 17.8 12.0799Z"
-							stroke="#3F3A3A"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-						/>
-					</svg>
+					<Fa icon={faInstagram} />
 
 					<div class={typography({ variant: 'body-normal' })}>sgcu.chula</div>
 				</div>