質問箱をpeingからマシュマロに変更

src/components/common/button/LinkButton.astro

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'astro/types'
 
 type Props = Omit<HTMLAttributes<'a'>, 'slot'> & {
-  variant?: 'primary' | 'white' | 'black' | 'discord' | 'peing'
+  variant?: 'primary' | 'white' | 'black' | 'discord' | 'peing' | 'marshmallow'
 }
 
 const { variant = 'primary', ...attrs } = Astro.props
@@ -22,6 +22,8 @@ const { variant = 'primary', ...attrs } = Astro.props
         variant === 'discord',
       'bg-peing text-white drop-shadow-peing-light hover:drop-shadow-peing-heavy':
         variant === 'peing',
+      'hover:drop-shadow-marshumallow-heavy bg-marshmallow text-white drop-shadow-marshmallow-light':
+        variant === 'marshmallow',
     },
     'active:drop-shadow-none',
     'transition-[filter,transform] ease-in-out active:translate-y-1',

src/components/common/button/MarshmallowLink.astro

@@ -0,0 +1,15 @@
+---
+import Icon from '@/components/common/Icon.astro'
+import LinkButton from './LinkButton.astro'
+---
+
+<LinkButton
+  href="https://marshmallow-qa.com/v24zz297et6zwk5?t=mK3qJ3&utm_medium=url_text&utm_source=promotion"
+  target="_blank"
+  variant="marshmallow"
+>
+  <span class="flex items-center gap-2.5">
+    <Icon name="marshmallow" alt="マシュマロ" class="w-6" />
+    <span>質問箱</span>
+  </span>
+</LinkButton>

src/components/common/button/PeingLink.astro

@@ -6,6 +6,6 @@ import LinkButton from './LinkButton.astro'
 <LinkButton href="https://peing.net/ja/oucc" target="_blank" variant="peing">
   <span class="flex items-center gap-2.5">
     <Icon name="box" alt="Peing" class="w-6" />
-    <span>質問箱</span>
+    <span>旧質問箱</span>
   </span>
 </LinkButton>

src/components/contact/ContactSection.astro

@@ -2,7 +2,7 @@
 import Section from '@/components/common/Section.astro'
 import DiscordJoinLink from '@/components/common/button/DiscordJoinLink.astro'
 import XLink from '@/components/common/button/XLink.astro'
-import PeingLink from '@/components/common/button/PeingLink.astro'
+import MarshmallowLink from '../common/button/MarshmallowLink.astro'
 ---
 
 <Section background="white">
@@ -22,7 +22,7 @@ import PeingLink from '@/components/common/button/PeingLink.astro'
     </div>
     <div class="flex justify-center gap-6">
       <XLink />
-      <PeingLink />
+      <MarshmallowLink />
     </div>
     <div>
       <p>メールでご連絡いただくことも可能です。</p>

src/components/faq/FaqSection.astro

@@ -1,9 +1,9 @@
 ---
 import Section from '@/components/common/Section.astro'
 import XLink from '@/components/common/button/XLink.astro'
-import PeingLink from '@/components/common/button/PeingLink.astro'
 import InlineLink from '@/components/common/InlineLink.astro'
 import FaqCard from './FaqCard.astro'
+import MarshmallowLink from '../common/button/MarshmallowLink.astro'
 ---
 
 <Section background="white">
@@ -13,7 +13,7 @@ import FaqCard from './FaqCard.astro'
     </p>
     <p class="flex justify-center gap-6">
       <XLink />
-      <PeingLink />
+      <MarshmallowLink />
     </p>
     <ul class="flex flex-wrap gap-5">
       <FaqCard title="入部するにはどうしたら良いですか？">

tailwind.config.cjs

@@ -6,6 +6,7 @@ const colors = {
   secondary: '#f1f2f7',
   discord: '#5865f2',
   peing: '#5eb9ba',
+  marshmallow: '#F3979B',
 }
 
 const dropShadowLight = (color) => `0 4px 8px ${rgba(color, 0.6)}`
@@ -34,6 +35,8 @@ module.exports = {
         'discord-heavy': dropShadowHeavy(colors.discord),
         'peing-light': dropShadowLight(colors.peing),
         'peing-heavy': dropShadowHeavy(colors.peing),
+        'marshmallow-light': dropShadowLight(colors.marshmallow),
+        'marshmallow-heavy': dropShadowHeavy(colors.marshmallow),
       },
       typography: (theme) => ({
         DEFAULT: {