fix: update shop item images and remove unused tags

- Replaced the T-shirt image format from JPG to PNG for better quality.
- Removed unused tag images from the site configuration and shop items.
- Simplified the shop section layout by eliminating unnecessary CSS classes and inline styles.

Author: hrdtbs

app/_assets/images/Tシャツ.jpg

@@ -1,7 +1,7 @@
 import type { StaticImageData } from "next/image";
 import lineBannerImg from "./_assets/images/LINEスタンプバナー.png";
 import twitterLinkImg from "./_assets/images/TwitterLink.png";
-import tshirtImg from "./_assets/images/Tシャツ.jpg";
+import tshirtImg from "./_assets/images/Tシャツ.png";
 import youtubeLinkImg from "./_assets/images/YouTubeLink.png";
 import thumbDaisyCrown from "./_assets/images/youtube-thumbnails/DaisyCrown.webp";
 import thumbEvilBubble from "./_assets/images/youtube-thumbnails/EvilBubble.webp";
@@ -20,8 +20,6 @@ import thumbShayo from "./_assets/images/youtube-thumbnails/斜陽.jpg";
 import thumbTadashiku from "./_assets/images/youtube-thumbnails/正しくなれない.webp";
 import thumbShizuku from "./_assets/images/youtube-thumbnails/雫.webp";
 import thumbKakumei from "./_assets/images/youtube-thumbnails/革命道中.jpg";
-import tag1Img from "./_assets/images/タグ1.png";
-import tag2Img from "./_assets/images/タグ2.png";
 import glassesImg from "./_assets/images/メガネ吹き.png";
 import ytBannerImg from "./_assets/images/望月のあYouTubeバナー.jpg";
 
@@ -35,7 +33,6 @@ export type ShopItem = {
 	name: string;
 	url: string;
 	image: StaticImageData;
-	tag: StaticImageData;
 };
 
 export type Banner = {
@@ -77,13 +74,11 @@ export const siteConfig = {
 				name: "Tシャツ",
 				url: "https://mochinoa.booth.pm/items/7339358",
 				image: tshirtImg,
-				tag: tag1Img,
 			},
 			{
 				name: "メガネ拭き",
 				url: "https://mochinoa.booth.pm/items/3203325",
 				image: glassesImg,
-				tag: tag2Img,
 			},
 		] satisfies ShopItem[],
 	},

app/_assets/images/Tシャツ.png

@@ -92,108 +92,6 @@
 	border-radius: 50%;
 }
 
-/* ===== Shop Section ===== */
-
-.ShopSection {
-	padding: 0 24px;
-	margin-bottom: 20px;
-}
-
-.ShopTitle {
-	font-family: "Zen Maru Gothic", sans-serif;
-	font-size: 16px;
-	color: #7cb5a0;
-	text-align: center;
-	margin-bottom: 32px;
-	letter-spacing: 0.08em;
-}
-
-.ProductCard {
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	margin-bottom: 36px;
-	padding: 12px;
-}
-
-.ProductCard:nth-child(odd) {
-	flex-direction: row;
-}
-
-.ProductCard:nth-child(even) {
-	flex-direction: row-reverse;
-}
-
-.ProductImageWrapper {
-	position: relative;
-	flex-shrink: 0;
-	width: 180px;
-}
-
-.ProductImage {
-	width: 180px;
-	height: auto;
-	border-radius: 4px;
-	transform: rotate(-3deg);
-}
-
-.ProductCard:nth-child(even) .ProductImage {
-	transform: rotate(3deg);
-}
-
-.TapeTopLeft {
-	position: absolute;
-	width: 60px;
-	height: 20px;
-	background-color: rgba(99, 186, 199, 0.35);
-	border-radius: 2px;
-	top: -6px;
-	left: 8px;
-	transform: rotate(-25deg);
-}
-
-.TapeTopRight {
-	position: absolute;
-	width: 60px;
-	height: 20px;
-	background-color: rgba(99, 186, 199, 0.35);
-	border-radius: 2px;
-	top: -6px;
-	right: 8px;
-	transform: rotate(20deg);
-}
-
-.TapeBottomRight {
-	position: absolute;
-	width: 60px;
-	height: 20px;
-	background-color: rgba(99, 186, 199, 0.35);
-	border-radius: 2px;
-	bottom: -6px;
-	right: 8px;
-	transform: rotate(-15deg);
-}
-
-.ProductInfo {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 8px;
-	flex: 1;
-}
-
-.ProductLabel {
-	font-family: "Zen Maru Gothic", sans-serif;
-	font-size: 14px;
-	color: #666;
-}
-
-.ProductTag {
-	width: 100px;
-	height: auto;
-}
-
 /* ===== Banner Section ===== */
 
 .BannerCard {

app/_assets/images/メガネ吹き.png

@@ -8,6 +8,8 @@ import peachIconSvg from "./_assets/images/peach-icon.svg";
 import topImg from "./_assets/images/トップ画像.png";
 import { siteConfig } from "./_site.config";
 import "./page.global.css";
+import tag1Img from "./_assets/images/タグ1.png";
+import tag2Img from "./_assets/images/タグ2.png";
 import styles from "./page.module.css";
 
 const WAVE_W = 1000;
@@ -256,33 +258,34 @@ export default function Page() {
 					</div>
 
 					{/* Shop */}
-					<div className={styles.ShopSection}>
+					<div style={{
+						paddingInline: 16
+					}}>
 						<WavyTitle
 							text="もちのあちゃんのおみせ"
-							className={styles.ShopTitle}
+							style={{
+								color: "var(--color-teal)",
+								fontSize: 16
+							}}
 						/>
 						{siteConfig.shop.items.map((item, i) => (
-							<div key={item.name} className={styles.ProductCard}>
-								<div className={styles.ProductImageWrapper}>
-									<div className={styles.TapeTopLeft} />
+							<div key={item.name}>
+								<a href={item.url} target="_blank" rel="noopener noreferrer">
 									<Image
 										src={item.image}
 										alt={item.name}
-										className={styles.ProductImage}
+										width={200}
+										height={(item.image.height / item.image.width) * 200}
 									/>
-									{i === 0 ? (
-										<div className={styles.TapeBottomRight} />
-									) : (
-										<div className={styles.TapeTopRight} />
-									)}
-								</div>
-								<div className={styles.ProductInfo}>
-									<span className={styles.ProductLabel}>{item.name}</span>
+								</a>
+								<div>
+									<span>{item.name}</span>
 									<a href={item.url} target="_blank" rel="noopener noreferrer">
 										<Image
-											src={item.tag}
+											src={i === 0 ? tag2Img:  tag1Img}
 											alt="詳細はこちら"
-											className={styles.ProductTag}
+											width={80}
+											height={(tag2Img.height / tag2Img.width) * 80}
 										/>
 									</a>
 								</div>

app/_site.config.ts

@@ -4,6 +4,7 @@ type WavyTitleProps = {
 	text: string;
 	amp?: number;
 	className?: string;
+	style?: React.CSSProperties;
 };
 
 const UNDERLINE_W = 200;
@@ -21,12 +22,12 @@ function buildUnderlinePath(amp: number) {
 	return { d, h };
 }
 
-export function WavyTitle({ text, amp = 6, className }: WavyTitleProps) {
+export function WavyTitle({ text, amp = 6, className, style }: WavyTitleProps) {
 	const chars = [...text];
 	const underline = buildUnderlinePath(amp);
 
 	return (
-		<p className={className}>
+		<p className={className} style={style}>
 			<span className={styles.Root}>
 				{chars.map((char, i) => {
 					const key = `${char}-${i}`;