My/feat/homepage

eslint.config.js

@@ -29,5 +29,13 @@ export default [
 	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'dist/']
+	},
+	{
+		rules: {
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{ argsIgnorePattern: '^_', varsIgnorePattern: '^_' }
+			]
+		}
 	}
 ];

package.json

@@ -44,6 +44,7 @@
 		"dayjs": "^1.11.13",
 		"svelte-fa": "^4.0.2",
 		"tailwind-merge": "^2.5.2",
+		"tailwind-scrollbar": "^3.1.0",
 		"tailwind-variants": "^0.2.1"
 	}
 }

src/lib/components/AnnoucementCard/AnnoucementCard.svelte → src/lib/components/AnnouncementCard/AnnouncementCard.svelte

@@ -13,6 +13,7 @@
 	export let createdAt: string;
 	export let createdBy: string;
 	export let linkHref: string;
+	export let className = '';
 
 	function formatDate(dateString: string): string {
 		return dayjs(dateString).locale('th').format('DD MMMM BBBB');
@@ -38,7 +39,7 @@
 <a
 	href={linkHref}
 	target="_blank"
-	class="h-[450px] w-[300px] max-md:w-[140px] max-md:h-[222px] bg-white text-sucu-gray-dark rounded shadow-card-shadow hover:shadow-card-shadow-hover transition-shadow flex flex-col items-center"
+	class="${className} h-[450px] w-[300px] max-md:w-[140px] max-md:h-[222px] bg-white text-sucu-gray-dark rounded shadow-card hover:shadow-card-shadow-hover transition-shadow flex flex-col items-center"
 >
 	<div class="p-3 h-[300px] w-[300px] max-md:w-full max-md:h-auto max-md:p-2">
 		{#if imageURL || imageURL.length > 0}
@@ -90,3 +91,16 @@
 		</div>
 	</div>
 </a>
+
+<style>
+	@media (min-width: 768px) {
+		.shadow-card {
+			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+		}
+	}
+	@media (max-width: 767px) {
+		.shadow-card {
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		}
+	}
+</style>

src/lib/components/Playground.svelte

@@ -13,7 +13,7 @@
 	import TabsList from './Tabs/TabsList.svelte';
 	import TabsTrigger from './Tabs/TabsTrigger.svelte';
 	import TabsContent from './Tabs/TabsContent.svelte';
-	import AnnoucementCard from './AnnoucementCard/AnnoucementCard.svelte';
+	import AnnouncementCard from './AnnouncementCard/AnnouncementCard.svelte';
 	import thumbnail from '../assets/images/thumbnail.png';
 	import OrganizationCard from './OrganizationCard/OrganizationCard.svelte';
 
@@ -79,7 +79,7 @@
 		'ปีย้าวยาวววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววววว'
 	];
 
-	const annoucementCard = Array(3).fill({
+	const announcementCard = Array(3).fill({
 		imageURL: thumbnail,
 		title:
 			'ประกาศจุฬาลงกรณ์มหาวิทยาลัย เรื่อง การไปต่างประเทศหรือการเข้ามาในประเทศเพื่อศึกษา อบรม วิจัย หรือปฏิบัติงาน ในสถานการณ์ปัจจุบัน ลงวันที่ 22 พฤศจิกายน 2565',
@@ -88,7 +88,7 @@
 		linkHref: 'https://www.google.com'
 	});
 
-	annoucementCard.push({
+	announcementCard.push({
 		imageURL: '',
 		title: 'ประกาศรับสมัครคณะกรรมาธิการวิสามัญพิจารณางบประมาณสโมสรนิสิตฯ',
 		createdAt: '2024-07-04',
@@ -287,8 +287,8 @@
 		<h2 class="font-bold text-2xl mb-4">Announcement Card</h2>
 
 		<div class="flex gap-6 px-10 pb-10 pt-5 overflow-auto">
-			{#each annoucementCard as card}
-				<AnnoucementCard
+			{#each announcementCard as card}
+				<AnnouncementCard
 					imageURL={card.imageURL}
 					title={card.title}
 					createdAt={card.createdAt}

src/routes/home/+page.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+	import { typography } from '../../styles/tailwind/typography';
+	import { cn } from '../../lib/utils/cn';
+	import Button from '../../lib/components/Button.svelte';
+	import sucuHomeBanner1 from '../../lib/assets/images/sucuHomeBanner1.png';
+	import sucuHomeBanner2 from '../../lib/assets/images/sucuHomeBanner2.png';
+	import sucuHomeBanner3 from '../../lib/assets/images/sucuHomeBanner3.png';
+	import AnnouncementCard from '$lib/components/AnnouncementCard/AnnouncementCard.svelte';
+	import OrganizationCard from '$lib/components/OrganizationCard/OrganizationCard.svelte';
+	import thumbnail from '../../lib/assets/images/thumbnail.png';
+	import { onMount } from 'svelte';
+
+	const announcementCard = Array(6).fill({
+		imageURL: thumbnail,
+		title:
+			'ประกาศจุฬาลงกรณ์มหาวิทยาลัย เรื่อง การไปต่างประเทศหรือการเข้ามาในประเทศเพื่อศึกษา อบรม วิจัย หรือปฏิบัติงาน ในสถานการณ์ปัจจุบัน ลงวันที่ 22 พฤศจิกายน 2565',
+		createdAt: '2024-07-04',
+		createdBy: 'สภานิสิต',
+		linkHref: 'https://www.google.com'
+	});
+
+	announcementCard.push({
+		imageURL: '',
+		title: 'ประกาศรับสมัครคณะกรรมาธิการวิสามัญพิจารณางบประมาณสโมสรนิสิตฯ',
+		createdAt: '2024-07-04',
+		createdBy: 'สภานิสิต',
+		linkHref: 'https://www.google.com'
+	});
+
+	let container: HTMLDivElement;
+	let activeSlide = 0;
+
+	function handleScroll() {
+		const scrollLeft = container.scrollLeft;
+		const cardWidth = 140;
+		const cardCount = announcementCard.length;
+		const cardGap = 2.5;
+		const threshold = (cardWidth + cardGap) / 3;
+		const currentCardIndex = Math.floor((scrollLeft + threshold) / (cardWidth + cardGap));
+
+		activeSlide = Math.min(currentCardIndex, cardCount - 1);
+	}
+
+	onMount(() => {
+		container.addEventListener('scroll', handleScroll);
+	});
+</script>
+
+<div>
+	<div
+		class="w-full h-[500px] max-md:h-[246px] flex items-center justify-center text-center bg-cover bg-center"
+		style="background-image: url({sucuHomeBanner1});"
+	>
+		<div
+			class="w-[650px] h-[263px] max-md:h-[160px] flex flex-col items-center justify-center justify-between"
+		>
+			<div
+				class="w-full h-[192px] max-md:h-[120px] p-2.5 flex flex-col gap-2.5 max-md:gap-1 text-sucu-gray-dark"
+			>
+				<div
+					class={cn(
+						typography({ variant: 'heading1' }),
+						'tracking-tight leading-none',
+						'max-md:text-3xl max-md:font-semibold'
+					)}
+				>
+					สโมสรนิสิต
+				</div>
+				<div
+					class={cn(
+						typography({ variant: 'heading1' }),
+						'tracking-tight leading-none',
+						'max-md:text-3xl max-md:font-semibold'
+					)}
+				>
+					จุฬาลงกรณ์มหาวิทยาลัย
+				</div>
+				<div
+					class={cn(
+						typography({ variant: 'body-large' }),
+						'font-semibold leading-6',
+						'max-md:text-xs max-md:leading-3'
+					)}
+				>
+					Student Union, Chulalongkorn University
+				</div>
+			</div>
+			<Button
+				color="white"
+				size="sm"
+				class={cn(
+					typography({ variant: 'body-medium' }),
+					'font-semibold px-9 py-2 leading-5',
+					'max-md:text-xs max-md:leading-3 max-md:px-3 max-md:py-1.5'
+				)}
+			>
+				รู้จักกับสโมสรนิติฯ
+			</Button>
+		</div>
+	</div>
+
+	<div
+		class="flex w-full h-[642px] py-[72px] px-[120px] gap-12 items-center text-sucu-gray-dark bg-white max-md:hidden"
+	>
+		<div
+			class="flex flex-col w-[297px] h-[208px] min-w-[297px] min-h-[208px] justify-between text-end"
+		>
+			<div class={cn(typography({ variant: 'heading1' }), 'tracking-tight leading-none')}>
+				ประกาศ
+			</div>
+			<div class={cn(typography({ variant: 'body-medium' }), 'tracking-tight leading-7')}>
+				ประกาศล่าสุดของสโมสรนิสิตจุฬาฯ อบจ. และสภานิสิตจุฬาฯ
+			</div>
+			<div class="flex justify-end">
+				<Button
+					size="sm"
+					class={cn(
+						typography({ variant: 'body-medium' }),
+						'font-semibold px-9 py-2 leading-5 bg-sucu-pink-01 hover:bg-sucu-pink-02',
+						'max-md:text-xs max-md:leading-3 max-md:px-3 max-md:py-1.5'
+					)}
+				>
+					ดูประกาศเพิ่มเติม
+				</Button>
+			</div>
+		</div>
+		<div
+			class="flex overflow-auto p-6 gap-6 scrollbar-thin scrollbar-thumb-sucu-gray-light scrollbar-track-white"
+		>
+			{#each announcementCard as card}
+				<AnnouncementCard
+					imageURL={card.imageURL}
+					title={card.title}
+					createdAt={card.createdAt}
+					createdBy={card.createdBy}
+					linkHref={card.linkHref}
+				/>
+			{/each}
+		</div>
+	</div>
+	<div class="flex flex-col h-[483px] p-[26px] gap-4 text-sucu-gray-dark bg-white md:hidden">
+		<div class="flex flex-col h-[76px] gap-3">
+			<div class={cn(typography({ variant: 'heading2' }), 'tracking-tight leading-none')}>
+				ประกาศ
+			</div>
+			<div class={cn(typography({ variant: 'body-normal' }), 'tracking-tight leading-none')}>
+				ประกาศล่าสุดของสโมสรนิสิตจุฬาฯ อบจ. และสภานิสิตจุฬาฯ
+			</div>
+		</div>
+		<div
+			bind:this={container}
+			class="flex h-[257px] px-2.5 gap-2.5 overflow-x-auto items-center scrollbar-none snap-x snap-proximity"
+		>
+			{#each announcementCard as card}
+				<AnnouncementCard
+					imageURL={card.imageURL}
+					title={card.title}
+					createdAt={card.createdAt}
+					createdBy={card.createdBy}
+					linkHref={card.linkHref}
+					className="snap-start"
+				/>
+			{/each}
+		</div>
+		<div class="flex justify-center gap-2">
+			{#each announcementCard as _, index}
+				<div
+					class={`w-[5px] h-[5px] rounded-full ${index === activeSlide ? 'bg-sucu-gray-dark' : 'bg-sucu-gray'}`}
+				></div>
+			{/each}
+		</div>
+		<div class="flex justify-center">
+			<Button
+				size="sm"
+				class={cn(
+					typography({ variant: 'body-normal' }),
+					'font-semibold px-3 py-1.5 leading-6 bg-sucu-pink-01 hover:bg-sucu-pink-02'
+				)}
+			>
+				ดูประกาศทั้งหมด
+			</Button>
+		</div>
+	</div>
+
+	<img src={sucuHomeBanner2} alt="banner" class="w-full h-auto bg-cover max-md:hidden" />
+	<img src={sucuHomeBanner3} alt="banner" class="w-full h-auto bg-cover md:hidden" />
+
+	<div class="flex flex-col w-full h-auto items-center justify-center text-sucu-gray-dark relative">
+		<div
+			class="w-full h-[180px] bg-[#FFF7F6] max-md:h-[98px] 2xl:h-[160px] max-2xl:h-[130px] max-lg:h-[100px]"
+		></div>
+		<div
+			class="w-full h-[105px] max-md:h-[98px] max-2xl:h-[90px] max-lg:h-[65px] bg-sucu-pink-05"
+		></div>
+		<div
+			class="w-full h-[105px] max-md:h-[98px] max-2xl:h-[90px] max-lg:h-[65px] bg-sucu-pink-04"
+		></div>
+		<div
+			class="w-full h-[105px] max-md:h-[98px] max-2xl:h-[90px] max-lg:h-[65px] bg-sucu-pink-03"
+		></div>
+		<div
+			class="w-full h-[105px] max-md:h-[98px] max-2xl:h-[90px] max-lg:h-[65px] bg-sucu-pink-02"
+		></div>
+		<div
+			class="w-full h-[105px] max-md:h-[98px] max-2xl:h-[90px] max-lg:h-[65px] bg-sucu-pink-01"
+		></div>
+
+		<div
+			class="absolute z-10 flex flex-col justify-between h-full w-full gap-[32px] py-[72px] 2xl:py-20 xl:py-14 lg:py-[72px] md:py-12"
+		>
+			<div
+				class={cn(
+					typography({ variant: 'heading1' }),
+					'tracking-tight leading-none font-bold text-center',
+					'max-md:text-3xl'
+				)}
+			>
+				3 องค์กรหลักในจุฬาฯ
+			</div>
+			<div class="mt-auto">
+				<OrganizationCard />
+			</div>
+		</div>
+	</div>
+</div>

tailwind.config.js

@@ -2,6 +2,7 @@
 import { colorScheme } from './src/styles/tailwind/color';
 import { boxShadow } from './src/styles/tailwind/shadow';
 import { borderRadius } from './src/styles/tailwind/borderRadius';
+import tailwindScrollbar from 'tailwind-scrollbar';
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
@@ -11,5 +12,5 @@ export default {
 			borderRadius: borderRadius
 		}
 	},
-	plugins: []
+	plugins: [tailwindScrollbar]
 };