[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import "./globals.css" import type { Metadata } from "next" import { Noto_Sans_JP } from "next/font/google" import type React from "react" // Import React const notoSansJP = Noto_Sans_JP({ weight: ["400", "700"], subsets: ["latin"], display: "swap", }) export const metadata: Metadata = { title: "レストラン求人募集", description: "働きやすさを大切に、情熱とチームワークで未来を切り拓く！", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/Footer.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Facebook, Instagram } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/OwnerSupport.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" const supportPoints = [ { title: "チームワーク", description: "互いに助け合い、高め合える環境" }, { title: "スキルアップ", description: "学べる環境体制の充実" }, { title: "効率的な業務", description: "得意をいかして作業負担を軽減" }, ] export default function OwnerSupport() { return (

働きやすい環境づくりを最優先に

スタッフが効率よく自分の能力を存分に発揮できる環境を提供することで飲食業にありがちな過度な労働負担を軽減。プライベートとの両立も可能です。明るく協力的な仲間と共に、キャリアアップと充実した生活を実現できます。

{supportPoints.map((point) => (

{point.title}

{point.description}

))}

) } [V0_FILE]typescriptreact:file="components/CTASection.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import type React from "react" import SuccessMessage from "./SuccessMessage" export default function CTASection() { const [showSuccess, setShowSuccess] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (event: React.FormEvent) => { event.preventDefault() setIsSubmitting(true) try { const formData = new FormData(event.currentTarget) const formJson = Object.fromEntries(formData.entries()) let response try { response = await fetch("https://formspree.io/f/xldglkyw", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify(formJson), }) } catch (fetchError) { console.error("Fetch error:", fetchError) throw new Error("ネットワークエラーが発生しました。インターネット接続を確認してください。") } if (!response.ok) { const errorData = await response.json().catch(() => ({})) console.error("Response error:", response.status, errorData) throw new Error(`サーバーエラーが発生しました。ステータスコード: ${response.status}`) } const responseData = await response.json() console.log("Success:", responseData) setShowSuccess(true) event.currentTarget.reset() } catch (error) { console.error("Submission error:", error) alert( error instanceof Error ? error.message : "応募の送信中に予期せぬエラーが発生しました。もう一度お試しください。", ) } finally { setIsSubmitting(false) } } return (

今すぐ応募する

<Textarea
            name="additionalComments"
            placeholder="その他備考欄"
            className="bg-white text-black min-h-[100px]"
            required
            defaultValue={`記載例：
・希望する勤務時間帯
・転職理由
・アピールしたいスキルや経験
・質問事項　など`}
          />
          <Button type="submit" className="w-full bg-white text-orange-500 hover:bg-orange-100" disabled={isSubmitting}>
            {isSubmitting ? "送信中..." : "応募する"}
          </Button>
        </form>
        <p className="text-center mt-8 animate-fade-in" style={{ animationDelay: "0.6s" }}>
          応募後、担当者より詳細についてご連絡いたします。
        </p>
      </div>
      {showSuccess && <SuccessMessage />}
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/Hero.tsx" isEdit="true" isMerged="true"
import Image from "next/image"

export default function Hero() {
  return (
    <section className="relative w-full h-screen flex items-center justify-center overflow-hidden">
      <Image
        src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/imagerecroubacgraund-25oxCHoQ1Eh2BaHFic8uG2ghXPJOEx.png"
        alt="Restaurant professional scenes showing plating, cooking, and wine service"
        layout="fill"
        objectFit="cover"
        quality={100}
        className="z-0 brightness-110"
        priority
      />
      <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/30 to-black/40 z-10" />
      <div className="relative z-20 container mx-auto px-4 text-center">
        <div className="max-w-3xl mx-auto space-y-8">
          <h1 className="text-4xl md:text-6xl font-bold mb-4 leading-tight text-white drop-shadow-lg animate-slide-down">
            <span className="text-orange-400">働きやすさを大切に</span>
            <br />
            情熱とチームワークで未来を切り拓く！
          </h1>
          <p className="text-xl md:text-2xl mb-8 leading-relaxed text-gray-100 drop-shadow-md animate-fade-in">
            オーナーと仲間が、あなたの成長を全力で応援！
            <br />
            スキルを身につけながら、ワークライフバランスのとれる働き方を実現
          </p>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Hero from "@/components/Hero"
import OwnerSupport from "@/components/OwnerSupport"
import StrengthsSection from "@/components/StrengthsSection"
import EvaluationSection from "@/components/EvaluationSection"
import WorkLifeBalance from "@/components/WorkLifeBalance"
import StaffTestimonials from "@/components/StaffTestimonials"
import StaffRecruitment from "@/components/StaffRecruitment"
import RestaurantOverview from "@/components/RestaurantOverview"
import CTASection from "@/components/CTASection"
import Footer from "@/components/Footer"

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between">
      <Hero />
      <OwnerSupport />
      <StrengthsSection />
      <EvaluationSection />
      <WorkLifeBalance />
      <StaffTestimonials />
      <StaffRecruitment />
      <RestaurantOverview />
      <CTASection />
      <Footer />
    </main>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

@layer base {
  body {
    @apply text-gray-900 leading-relaxed;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-bold text-gray-800 tracking-tight;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 1s ease-out;
  }

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
  }

.animate-slide-down {
    animation: slideDown 0.5s ease-out;
  }

.animate-scale {
    animation: scale 0.3s ease-in-out;
  }

.animate-title {
    animation: titleAnimation 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
  }

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

@keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

@keyframes slideDown {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

@keyframes scale {
    from {
      transform: scale(0.95);
    }
    to {
      transform: scale(1);
    }
  }

@keyframes titleAnimation {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

[V0_FILE]typescriptreact:file="components/StrengthsSection.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useCallback } from "react"
import { Utensils, Coffee, UserCheck, Briefcase, TrendingUp, GlassWater, ChevronDown, ChevronUp } from "lucide-react"

const skills = [
  {
    id: "cooking",
    icon: Utensils,
    title: "調理スキル",
    description:
      "当レストランの厨房では、仕込みを含め実践的な調理スキルを磨くことができます。レシピに沿った正確な作業だけでなく、効率的な作業の進め方や提供スピードの向上、季節ごとのメニュー開発や新たな調理法の試行にも挑戦できる環境が整っており、チャレンジする心を大事にしており初心者から経験者まで、常に自分の技術を向上させる機会が豊富です。",
  },
  {
    id: "service",
    icon: Coffee,
    title: "サービススキル",
    description:
      "当店ではホールスタッフがテーブルでお料理を完成させる大事な役目を担う為、料理の知識やサービスの技術、スムーズな作業進行が身につきます。リピートのお客様も多い中特徴をとらえたサービスをすることや、スタッフ同士での迅速かつ正確な情報共有により円滑なサービスが実現されています。こうした現場での実践は、丁寧な対応と臨機応変なサービススキルの向上につながりどの現場でも重宝されるスキルとなります。",
  },
  {
    id: "management",
    icon: Briefcase,
    title: "マネジメント",
    description:
      "当店がオフィス街激戦区、地下という悪立地、ランチなしで13年間経営を続けることが出来た理由を現場で具体的に垣間見ることができます。適切な広告運営から経費を抑えた運営の方法、さらには日々の業務改善を取り入れやす雰囲気づくりなど経営に必要なマネジメントを実践的に学ぶことができます。",
  },
  {
    id: "career",
    icon: TrendingUp,
    title: "キャリアアップ",
    description:
      "当レストランでは、現場での多岐にわたる業務経験を通じて、個々のキャリアアップを強力にサポートしています。調理、サービス、マネジメントといった各分野で実績を積むことで、昇進や新たな責任あるポジションへの道が開かれ、独立も見据えた将来的なキャリアパスが明確になります。日々の成長を実感しながら、次のステップへと進むためのチャンスが豊富に用意されています。",
  },
  {
    id: "wine",
    icon: GlassWater,
    title: "ワインの知識とスキル",
    description:
      "当店は、権威あるワインガイド誌で2年連続「優れたワインリストを置いている店として(全国で2店舗のみ)」選ばれるなどワインに力を入れており、実績あるソムリエのもとスタッフがワインに関する専門知識とサービス技術を実践で習得できる環境を提供しています。お客様に最適なワインを提案するための独自のメソッドや、ペアリングのコツなどが日常業務を通じて自然に身につきます。グラスワインを日々数多く扱えることは、ワインのスキルの幅を広げるうえで有利で最重要なことと考えます。",
  },
  {
    id: "teamwork",
    icon: UserCheck,
    title: "チームワーク",
    description:
      "当レストランでは、厨房とホール、勤続年数、初心者経験者をわけることなく全員が全員のセクションを理解することが大切だと考えます。普段より常に情報共有をすることが大事であり、プライベートではなく仕事上でのコミュニケーションが取りやすい環境づくりに力を入れ、各メンバーは役割を超えて互いにサポートし合い、信頼と協力が育まれます。結果、個々のスキル向上のみならず、チーム全体の協働力や問題解決能力が向上し、個々の作業の負担が軽減される結果につながります",
  },
]

export default function StrengthsSection() {
  const [expandedSkill, setExpandedSkill] = useState<string | null>(null)

const toggleSkill = useCallback((skillId: string) => {
    setExpandedSkill((prevSkill) => (prevSkill === skillId ? null : skillId))
  }, [])

return (
    <section className="py-16 bg-gradient-to-b from-white to-orange-50">
      <div className="container mx-auto px-4">
        <h2
          className="text-3xl md:text-4xl font-bold text-center mb-12 animate-title"
          style={{ animationDelay: "0.2s" }}
        >
          スキルを身につける、成長する喜び
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {skills.map((skill, index) => (
            <div
              key={skill.id}
              className="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300 animate-fade-in"
              style={{ animationDelay: `${index * 100}ms` }}
            >
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center">
                  <div className="bg-orange-100 rounded-full p-3 mr-4">
                    <skill.icon className="w-8 h-8 text-orange-500" />
                  </div>
                  <h3 className="text-xl font-semibold">{skill.title}</h3>
                </div>
                <button
                  onClick={() => toggleSkill(skill.id)}
                  className="text-orange-500 hover:text-orange-600 focus:outline-none"
                >
                  {expandedSkill === skill.id ? <ChevronUp size={24} /> : <ChevronDown size={24} />}
                </button>
              </div>
              <div
                className={`overflow-hidden transition-all duration-300 ${expandedSkill === skill.id ? "max-h-96" : "max-h-0"}`}
              >
                <p className="text-gray-600 leading-relaxed">{skill.description}</p>
              </div>
              {expandedSkill !== skill.id && (
                <p className="text-gray-600 leading-relaxed line-clamp-3">{skill.description}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/EvaluationSection.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import { Star, TrendingUp, Award } from "lucide-react"

const evaluationPoints = [
  {
    icon: Star,
    title: "公平な評価",
    description: "努力と成果を正当に評価します。定期的なフィードバックを通じて、あなたの成長を可視化します。",
  },
  {
    icon: TrendingUp,
    title: "安心のサポート",
    description:
      "定期的な面談で課題やスキルアップをサポート。上司や先輩からの建設的なアドバイスもありオーナー自ら個人の悩みにもしっかり寄り添います。",
  },
  {
    icon: Award,
    title: "実力主義",
    description:
      "能力に応じた昇進・昇給を実施。年功序列ではなく、実力と貢献度に基づいたキャリアアップの機会を提供します。",
  },
]

export default function EvaluationSection() {
  return (
    <section className="py-16 bg-orange-50">
      <div className="container mx-auto px-4">
        <h2
          className="text-3xl md:text-4xl font-bold text-center mb-12 animate-title"
          style={{ animationDelay: "0.3s" }}
        >
          安心のサポートと評価
        </h2>
        <div className="flex flex-col md:flex-row items-center gap-8">
          <div className="md:w-1/3">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1-cz38jyubHZ8jpylQLUD6ESPmZDbTfn.png"
              alt="Staff evaluation and support meeting"
              width={400}
              height={400}
              className="rounded-lg shadow-lg object-cover"
            />
          </div>
          <div className="md:w-2/3 space-y-6">
            {evaluationPoints.map((point) => (
              <div key={point.title} className="flex items-start space-x-4 bg-white p-4 rounded-lg shadow-md">
                <div className="bg-orange-100 rounded-full p-2 flex-shrink-0">
                  <point.icon className="w-6 h-6 text-orange-500" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-1">{point.title}</h3>
                  <p className="text-sm text-gray-600">{point.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/WorkLifeBalance.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Image from "next/image"
import { Clock, Calendar, Heart } from "lucide-react"

const balancePoints = [
  {
    icon: Clock,
    title: "適切な勤務時間",
    description:
      "飲食店にありがちな残業や長時間拘束はなし。効率的な作業をすることで1日あたりの平均労働時間7時間以下を実現",
  },
  {
    icon: Calendar,
    title: "充実した休暇制度",
    description:
      "日祝は完全休業、その他季節ごとに1週間ほどの長期休暇あり、心身ともにリフレッシュできる環境を整えています。",
  },
  {
    icon: Heart,
    title: "福利厚生",
    description:
      "社員の健康とwell-beingをサポート。健康診断や各種保険はもちろん、社員寮の完備、技術向上のための学びの場も設けています。",
  },
]

export default function WorkLifeBalance() {
  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <h2
          className="text-3xl md:text-4xl font-bold text-center mb-12 animate-title"
          style={{ animationDelay: "0.4s" }}
        >
          プライベートも大切にできる職場環境
        </h2>
        <div className="flex flex-col md:flex-row items-center gap-8">
          <div className="md:w-2/3 space-y-6">
            {balancePoints.map((point, index) => (
              <div
                key={point.title}
                className="flex items-start space-x-4 bg-orange-50 p-4 rounded-lg shadow-md animate-fade-in"
                style={{ animationDelay: `${index * 200}ms` }}
              >
                <div className="bg-orange-100 rounded-full p-2 flex-shrink-0">
                  <point.icon className="w-6 h-6 text-orange-500" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-1">{point.title}</h3>
                  <p className="text-sm text-gray-600">{point.description}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="md:w-1/3 animate-scale">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2-H4weNacdJC3R7RQSE1Zh7CmLw9nrLR.png"
              alt="Relaxing work-life balance"
              width={400}
              height={400}
              className="rounded-lg shadow-lg object-cover"
            />
          </div>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/StaffTestimonials.tsx" isEdit="true" isMerged="true"
import { UserCircle2, Utensils, Trophy } from "lucide-react"

const testimonials = [
  {
    name: "1年目",
    position: "ホールスタッフ",
    comment:
      "悩みにぶつかってもオーナーや仲間に寄り添ってもらえるので安心して仕事に打ち込めます。短期間での昇給もやる気になります。",
    icon: UserCircle2,
  },
  {
    name: "2年目",
    position: "キッチンスタッフ",
    comment:
      "入社してから自分のやりたいことと得意な事との違いに気づきました。得意な作業を任せてもらうことで負担も少なく全員がうまく回っています。",
    icon: Utensils,
  },
  {
    name: "10年目",
    position: "マネージャー",
    comment:
      "キャリアアップの機会が豊富で、常に新しいチャレンジができる環境です。実践的な経営を学べるのが楽しいですね。",
    icon: Trophy,
  },
]

export default function StaffTestimonials() {
  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <h2
          className="text-3xl md:text-4xl font-bold text-center mb-12 animate-title"
          style={{ animationDelay: "0.5s" }}
        >
          実際に働くスタッフの声
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div
              key={testimonial.name}
              className="bg-orange-50 p-6 rounded-lg shadow-lg animate-fade-in"
              style={{ animationDelay: `${(index + 1) * 0.2}s` }}
            >
              <div className="flex justify-center mb-4">
                <testimonial.icon className="w-16 h-16 text-orange-500" />
              </div>
              <p className="text-lg text-center mb-4">"{testimonial.comment}"</p>
              <p className="text-center font-semibold">{testimonial.name}</p>
              <p className="text-center text-gray-600">{testimonial.position}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/StaffRecruitment.tsx" isEdit="true" isMerged="true"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const jobPositions = [
  {
    title: "キッチンスタッフ",
    content: (
      <>
        <h4 className="font-bold mb-2">仕事内容:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>料理の下ごしらえ、盛り付け、調理補助</li>
          <li>食材の管理および在庫確認</li>
          <li>厨房内の清掃、衛生管理</li>
          <li>その他、調理補助に関する業務全般</li>
        </ul>
        <h4 className="font-bold mb-2">応募資格:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>未経験者歓迎（調理の基礎があれば尚可）</li>
          <li>経験者優遇（飲食業界での実務経験がある方）</li>
          <li>チームで協力して働ける方</li>
        </ul>
        <h4 className="font-bold mb-2">勤務時間・シフト:</h4>
        <p className="mb-4">
          16:00～24:00（休憩含む）アルバイトは応相談
          <br />
          休憩、休日については社内規定に準ずる
        </p>
        <h4 className="font-bold mb-2">給与:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>月給 240,000円～（経験・能力に応じて決定） アルバイト：時給1300円～(経験・能力に応じて決定)</li>
          <li>賞与（年1回）あり（業績による）</li>
        </ul>
        <h4 className="font-bold mb-2">待遇・福利厚生:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>交通費支給（上限あり）</li>
          <li>社会保険完備</li>
          <li>制服貸与、食事補助制度あり</li>
          <li>研修制度、キャリアアップ支援</li>
        </ul>
        <h4 className="font-bold mb-2">応募方法:</h4>
        <p>
          履歴書（写真貼付）および職務経歴書を下記のメールアドレスまたは応募フォームからご提出ください
          <br />
          書類選考後、面接日程をご連絡いたします
        </p>
      </>
    ),
  },
  {
    title: "ホールスタッフ",
    content: (
      <>
        <h4 className="font-bold mb-2">仕事内容:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>お客様のご案内、着席のサポート</li>
          <li>注文取り、料理・飲み物の提供</li>
          <li>レジ業務、精算対応</li>
          <li>店内の清掃およびテーブルセッティング</li>
          <li>お客様への接客全般（明るく丁寧な対応を求めます）</li>
        </ul>
        <h4 className="font-bold mb-2">応募資格:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>接客経験者歓迎、未経験者も可</li>
          <li>明るくコミュニケーションが得意な方</li>
          <li>チームワークを重んじ、協力して働ける方</li>
        </ul>
        <h4 className="font-bold mb-2">勤務時間・シフト:</h4>
        <p className="mb-4">
          16:00～24:00（休憩含む）アルバイトは応相談
          <br />
        </p>
        <h4 className="font-bold mb-2">給与:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>月給 230,000円～（経験・能力に応じて決定） アルバイト：時給1200円～(経験・能力に応じて決定)</li>
          <li>賞与（年1回）あり（業績による）</li>
        </ul>
        <h4 className="font-bold mb-2">待遇・福利厚生:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>交通費支給（全額または上限設定あり）</li>
          <li>社員割引制度</li>
          <li>各種保険制度（条件により）</li>
        </ul>
        <h4 className="font-bold mb-2">応募方法:</h4>
        <p>
          履歴書（写真貼付）をメールまたは応募フォームからご提出ください
          <br />
          書類選考後、面接日程をご連絡いたします
        </p>
      </>
    ),
  },
  {
    title: "料理長候補",
    content: (
      <>
        <h4 className="font-bold mb-2">仕事内容:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>店舗キッチン全体の管理、運営</li>
          <li>メニューの企画・開発、調理指導</li>
          <li>食材の仕入れ、在庫管理、コスト管理</li>
          <li>スタッフの採用・教育、シフト管理</li>
          <li>衛生管理、品質管理の徹底</li>
        </ul>
        <h4 className="font-bold mb-2">応募資格:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>調理業界での実務経験 5年以上（料理長または副料理長の経験があれば尚可）</li>
          <li>リーダーシップを発揮できる方</li>
          <li>メニュー開発、食材管理の実績がある方</li>
          <li>チーム全体の士気向上や改善提案ができる方</li>
        </ul>
        <h4 className="font-bold mb-2">勤務時間・シフト:</h4>
        <p className="mb-4">
          例: 16:00～24:00（休憩含む）
          <br />
          業務内容に応じた柔軟な勤務体制（管理業務含む）
        </p>
        <h4 className="font-bold mb-2">給与:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>月給 330,000円～450,000円（経験・能力により決定）</li>
          <li>賞与（年1回）および昇給制度あり</li>
        </ul>
        <h4 className="font-bold mb-2">待遇・福利厚生:</h4>
        <ul className="list-disc list-inside mb-4">
          <li>各種社会保険完備</li>
          <li>交通費支給</li>
          <li>住宅手当（条件あり）</li>
          <li>健康診断、研修制度あり</li>
        </ul>
        <h4 className="font-bold mb-2">応募方法:</h4>
        <p>
          履歴書、職務経歴書、及び過去の実績（メニュー開発実績等があればポートフォリオなど）をメールまたは応募フォームからご提出ください
          <br />
          書類選考後、面接および実技試験（必要に応じて）を実施します
        </p>
      </>
    ),
  },
]

export default function StaffRecruitment() {
  return (
    <section className="py-16 bg-orange-50">
      <div className="container mx-auto px-4">
        <h2
          className="text-3xl md:text-4xl font-bold text-center mb-12 animate-title"
          style={{ animationDelay: "0.6s" }}
        >
          スタッフ募集要項
        </h2>
        <div className="animate-fade-in" style={{ animationDelay: "0.8s" }}>
          <Accordion type="single" collapsible className="w-full">
            {jobPositions.map((job, index) => (
              <AccordionItem key={job.title} value={`item-${index}`}>
                <AccordionTrigger>{job.title}</AccordionTrigger>
                <AccordionContent>{job.content}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/RestaurantOverview.tsx" isEdit="true" isMerged="true"
import Image from "next/image"
import Link from "next/link"

export default function RestaurantOverview() {
  return (
    <section className="py-16 bg-gradient-to-b from-white to-orange-50">
      <div className="container mx-auto px-4">
        <div className="max-w-6xl mx-auto text-center space-y-8">
          <h2 className="text-3xl md:text-4xl font-bold mb-8 animate-title" style={{ animationDelay: "0.7s" }}>
            レストラン概要
          </h2>
          <div className="mb-8 animate-fade-in" style={{ animationDelay: "0.9s" }}>
            <h3 className="text-2xl md:text-3xl font-bold text-orange-600 mb-2 font-serif italic">
              Italian Restaurant Vivacchus
            </h3>
            <p className="text-xl text-gray-600">イタリアンレストラン ヴィヴァッカス</p>
          </div>
          <p className="text-lg leading-relaxed mb-12 animate-fade-in" style={{ animationDelay: "1.1s" }}>
            2010年の創業以来、Vivacchusは「美食と至福のひととき」をコンセプトに、厳選された食材と確かな技術で、本格的なイタリア料理とワインのマリアージュをお届けしてきました。
            ギフトブック掲載常連店舗として、またグルメサイト等でも3.5以上を継続し権威あるワインガイド誌で2年連続「優れたワインリストを置いている店」として選出され、料理とワインの両面で高い評価を得ています。
            落ち着いた地下空間で、お客様に特別なダイニング体験を提供する一方、スタッフ一人一人が自身の可能性を追求できる環境づくりにも力を入れています。
          </p>
          <div
            className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12 animate-fade-in"
            style={{ animationDelay: "1.3s" }}
          >
            <div className="relative h-64 rounded-lg overflow-hidden shadow-lg">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/tavoli_1-mpi92O814LrYKdHr3pYx0DWc6DLmT2.png"
                alt="レストランの店内"
                fill
                className="object-cover"
              />
            </div>
            <div className="relative h-64 rounded-lg overflow-hidden shadow-lg">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sommelier%20up-big.jpg-QnRADoLocKyYmAXdUQJSJIXu7J2J8U.jpeg"
                alt="ワインサービス"
                fill
                className="object-cover"
              />
            </div>
            <div className="relative h-64 rounded-lg overflow-hidden shadow-lg">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/piato%20bello-maqiIzKzyN9oBdj3bs6uRTvo0fgL4m.png"
                alt="料理"
                fill
                className="object-cover"
              />
            </div>
          </div>
          <div className="bg-white p-8 rounded-lg shadow-md animate-fade-in" style={{ animationDelay: "1.5s" }}>
            <h4 className="text-xl font-bold mb-4">ホームページのご案内</h4>
            <p className="text-lg mb-4">当店の詳細な情報、メニューなどは公式ホームページでご覧いただけます。</p>
            <Link
              href="https://vivacchus.co.jp"
              target="_blank"
              className="inline-block bg-orange-500 text-white px-6 py-3 rounded-md hover:bg-orange-600 transition-colors"
            >
              公式ホームページを見る
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/SuccessMessage.tsx" isEdit="true" isQuickEdit="true"
import { CheckCircle } from "lucide-react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function SuccessMessage() {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div
        className="bg-white rounded-lg p-8 max-w-md w-full mx-4 text-center animate-fade-in animate-scale"
        style={{ animationDelay: "0.2s" }}
      >
        <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
        <h3 className="text-2xl font-bold mb-4">応募完了</h3>
        <p className="text-gray-600 mb-6">
          お問い合わせありがとうございます。
          <br />
          担当から数日以内にご連絡させていただきます。
        </p>
        <Link href="/">
          <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white">トップページに戻る</Button>
        </Link>
      </div>
    </div>
  )
}
</article></body></html>

About

About