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]
 };