Mirai farm lp - v0 by Vercel

コンテンツが微妙に異なっています。完全な元のコードを添付するので、ほぼこれをコピペするような形式で実装してください。 "use client" import type React from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Phone, Mail, ArrowRight, Users, Award, Shield, Globe, CheckCircle, AlertCircle } from "lucide-react" import Image from "next/image" import { validateContactForm, submitContactForm } from "./actions" import { sendEmailsWithFallback, type ContactFormData } from "@/lib/emailjs" import { useState, useRef } from "react" import Head from "next/head" export default function LandingPage() { const [isSubmitting, setIsSubmitting] = useState(false) const [submitResult, setSubmitResult] = useState<{ success: boolean; message: string } | null>(null) const formRef = useRef<HTMLFormElement>(null) const handleFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault() setIsSubmitting(true) setSubmitResult(null) try { const formData = new FormData(event.currentTarget) // Server-side validation const validationResult = await validateContactForm(formData) if (!validationResult.success) { setSubmitResult({ success: false, message: validationResult.message, }) return } const contactData: ContactFormData = validationResult.data! // Use optimized email sending with fallback console.log("=== 最適化されたメール送信開始 ===") const emailResult = await sendEmailsWithFallback(contactData) if (emailResult.success) { console.log("EmailJS送信成功:", emailResult.details) setSubmitResult({ success: true, message: emailResult.message, }) // Safe form reset if (formRef.current) { formRef.current.reset() } } else { // EmailJS failed, fallback to Resend console.log("EmailJS失敗、Resendにフォールバック:", emailResult.message) console.log("EmailJS詳細:", emailResult.details) try { const resendResult = await submitContactForm(formData) console.log("Resend送信結果:", resendResult) if (resendResult.success) { setSubmitResult({ success: true, message: resendResult.message, }) // Safe form reset if (formRef.current) { formRef.current.reset() } } else { setSubmitResult({ success: false, message: resendResult.message, }) } } catch (resendError) { console.error("Resendも失敗:", resendError) setSubmitResult({ success: false, message: "メール送信に失敗しました。直接メール（info@sr-mirai.or.jp）でお問い合わせください。", }) } } } catch (error) { console.error("フォーム送信エラー:", error) setSubmitResult({ success: false, message: "システムエラーが発生しました。しばらく時間をおいて再度お試しください。", }) } finally { setIsSubmitting(false) } } const scrollToContact = () => { const element = document.getElementById("contact-form") if (element) { element.scrollIntoView({ behavior: "smooth" }) } } return ( <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-green-50"> <Head> <title>補助金申請サポートならミライファーム｜中小企業の省力化投資を支援</title> <meta name="description" content="中小企業省力化投資補助金の申請サポートなら株式会社ミライファーム。月5社限定の手厚いサポートで、あなたの事業に寄り添い補助金獲得を目指します。" /> </Head> {/* Header */} <header className="bg-gradient-to-r from-green-400/90 via-yellow-400/90 via-blue-400/90 to-pink-400/90 backdrop-blur-sm border-b border-white/20 sticky top-0 z-50"> <div className="container mx-auto px-4 py-4 sm:py-5"> {/* PC版レイアウト（sm以上） */} <div className="hidden sm:flex justify-between items-center"> <div className="flex items-center space-x-3"> <div className="relative bg-white/95 rounded-lg p-2 shadow-lg"> <Image src="/images/mirai-farm-logo-new.png" alt="株式会社ミライファーム" width={400} height={100} className="h-12 sm:h-14 lg:h-16 xl:h-20 w-auto transition-all duration-300 hover:scale-105" style={{ filter: "contrast(1.2) saturate(1.1) brightness(1.05)", }} priority /> <div className="absolute inset-0 bg-white/90 rounded-lg -z-10"></div> </div> <div className="hidden lg:block"> <p className="text-xs sm:text-sm lg:text-base text-white font-medium drop-shadow-sm"> 中小企業省力化投資補助金申請サポート </p> </div> </div> <div className="flex items-center space-x-4"> <Button onClick={scrollToContact} className="bg-white/90 hover:bg-white text-orange-600 shadow-lg hover:shadow-xl transition-all duration-300 font-bold" > 無料で相談する </Button> </div> </div> {/* モバイル版レイアウト（smより小さい） */} <div className="sm:hidden"> <div className="flex items-center justify-between"> <div className="relative bg-white/95 rounded-xl p-2 shadow-lg"> <Image src="/images/mirai-farm-logo-new.png" alt="株式会社ミライファーム" width={300} height={75} className="h-8 w-auto" style={{ filter: "contrast(1.2) saturate(1.1) brightness(1.05)", }} priority /> <div className="absolute inset-0 bg-white/90 rounded-xl -z-10"></div> </div> <Button onClick={scrollToContact} size="sm" className="bg-white/95 hover:bg-white text-blue-600 shadow-lg hover:shadow-xl transition-all duration-300 font-bold rounded-full px-4 py-2" > <Mail className="h-4 w-4 mr-1" /> <span className="text-sm">相談</span> </Button> </div> </div> </div> </header> {/* Hero Section */} <section className="py-12 sm:py-20 px-4"> <div className="container mx-auto max-w-6xl"> <div className="text-center space-y-8"> <div className="space-y-6"> <h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-gray-900 leading-tight"> あなたの事業に <br /> <span className="text-green-600">寄り添う</span> <br /> 補助金申請サポート </h1> <p className="text-xl sm:text-2xl text-gray-600 leading-relaxed max-w-4xl mx-auto"> 大手のマニュアル対応とは違います。 <br /> お客様一人ひとりと向き合い、二人三脚で補助金獲得を目指します。 </p> </div> {/* Achievement Badges */} <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-4xl mx-auto"> <Card className="text-center p-6 border-0 bg-gradient-to-br from-green-50 to-green-100 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 rounded-2xl"> <div className="bg-gradient-to-br from-green-400 to-green-500 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center shadow-lg"> <Award className="h-8 w-8 text-white" /> </div> <div className="text-lg font-bold text-green-700 mb-2">月5社限定</div> <div className="text-sm text-green-600 mb-1">手厚いサポート</div> <div className="text-xs text-gray-500">※質重視</div> </Card> <Card className="text-center p-6 border-0 bg-gradient-to-br from-blue-50 to-blue-100 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 rounded-2xl"> <div className="bg-gradient-to-br from-blue-400 to-blue-500 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center shadow-lg"> <Shield className="h-8 w-8 text-white" /> </div> <div className="text-lg font-bold text-blue-700 mb-2">専任担当制</div> <div className="text-sm text-blue-600 mb-1">最後まで同じ人</div> <div className="text-xs text-gray-500">安心です</div> </Card> <Card className="text-center p-6 border-0 bg-gradient-to-br from-purple-50 to-purple-100 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 rounded-2xl"> <div className="bg-gradient-to-br from-purple-400 to-purple-500 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center shadow-lg"> <Globe className="h-8 w-8 text-white" /> </div> <div className="text-lg font-bold text-purple-700 mb-2">オーダーメイド</div> <div className="text-sm text-purple-600 mb-1">あなただけの提案</div> <div className="text-xs text-gray-500">個別対応</div> </Card> </div> {/* CTA Buttons */} <div className="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-2xl mx-auto"> <Button size="lg" onClick={scrollToContact} className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white px-8 py-4 text-lg font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 w-full sm:w-auto" > 無料で相談する <ArrowRight className="ml-2 h-5 w-5" /> </Button> </div> </div> </div> </section> {/* Contact Form Section */} <section id="contact-form" className="py-16 px-4 bg-gradient-to-br from-orange-50 to-red-50"> <div className="container mx-auto max-w-4xl"> <div className="text-center mb-12"> <div className="inline-block bg-gradient-to-r from-orange-500 to-red-500 text-white px-6 py-2 rounded-full text-sm font-bold mb-4"> CONTACT </div> <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">まずはお気軽にお話しませんか？</h2> <p className="text-lg text-gray-600">（じっくりお聞きします）</p> </div> <Card className="p-8 shadow-2xl border-0 bg-white/95 backdrop-blur-sm rounded-3xl"> <CardContent className="space-y-6 px-0"> {/* 送信結果の表示 */} {submitResult && ( <div className={p-4 rounded-2xl border-2 ${ submitResult.success ? "bg-green-50 border-green-200 text-green-800" : "bg-red-50 border-red-200 text-red-800" }} > <div className="flex items-center space-x-2"> {submitResult.success ? ( <CheckCircle className="h-5 w-5 text-green-600" /> ) : ( <AlertCircle className="h-5 w-5 text-red-600" /> )} <p className="font-medium">{submitResult.message}</p> </div> </div> )} <form ref={formRef} onSubmit={handleFormSubmit} className="space-y-6"> <div className="space-y-2"> <label className="text-sm font-medium text-gray-700 flex items-center"> <span className="bg-orange-100 text-orange-600 rounded-full px-2 py-1 text-xs font-bold mr-2"> 必須 </span> ご相談内容 </label> <select name="consultationType" required disabled={isSubmitting} className="w-full p-4 border-2 border-gray-200 rounded-2xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-base min-h-[52px] bg-white shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" > <option value="">選択してください</option> <option value="詳しく知りたい">補助金について詳しく知りたい</option> <option value="サポート依頼">申請サポートを依頼したい</option> <option value="対象確認">対象かどうか確認したい</option> <option value="その他">その他</option> </select> </div> <div className="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div className="space-y-2"> <label className="text-sm font-medium text-gray-700 flex items-center"> <span className="bg-orange-100 text-orange-600 rounded-full px-2 py-1 text-xs font-bold mr-2"> 必須 </span> 企業名 </label> <input type="text" name="companyName" required disabled={isSubmitting} placeholder="○○会社" className="w-full p-4 border-2 border-gray-200 rounded-2xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-base min-h-[52px] bg-white shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" /> </div> <div className="space-y-2"> <label className="text-sm font-medium text-gray-700 flex items-center"> <span className="bg-orange-100 text-orange-600 rounded-full px-2 py-1 text-xs font-bold mr-2"> 必須 </span> 担当者名 </label> <input type="text" name="contactName" required disabled={isSubmitting} placeholder="○○様" className="w-full p-4 border-2 border-gray-200 rounded-2xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-base min-h-[52px] bg-white shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" /> </div> </div> <div className="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div className="space-y-2"> <label className="text-sm font-medium text-gray-700 flex items-center"> <span className="bg-orange-100 text-orange-600 rounded-full px-2 py-1 text-xs font-bold mr-2"> 必須 </span> メールアドレス </label> <input type="email" name="email" required disabled={isSubmitting} placeholder="example@mail.com" className="w-full p-4 border-2 border-gray-200 rounded-2xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-base min-h-[52px] bg-white shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" /> </div> <div className="space-y-2"> <label className="text-sm font-medium text-gray-700 flex items-center"> <span className="bg-orange-100 text-orange-600 rounded-full px-2 py-1 text-xs font-bold mr-2"> 必須 </span> 電話番号 </label> <input type="tel" name="phone" required disabled={isSubmitting} placeholder="0197-62-3815" className="w-full p-4 border-2 border-gray-200 rounded-2xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-base min-h-[52px] bg-white shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed" /> </div> </div> <div className="space-y-2"> <label className="text-sm font-medium text-gray-700 flex items-center"> <span className="bg-gray-100 text-gray-600 rounded-full px-2 py-1 text-xs font-bold mr-2"> 任意 </span> 詳細・ご質問 </label> <textarea name="message" rows={4} disabled={isSubmitting} placeholder="ご質問やご相談内容があればお聞かせください" className="w-full p-4 border-2 border-gray-200 rounded-2xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 text-base bg-white shadow-sm transition-all duration-200 resize-none disabled:opacity-50 disabled:cursor-not-allowed" /> </div> <Button type="submit" disabled={isSubmitting} className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white py-4 text-lg font-bold min-h-[56px] rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none" > {isSubmitting ? ( <> <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div> 送信中... </> ) : ( <> 無料で相談する <ArrowRight className="ml-2 h-5 w-5" /> </> )} </Button> </form> {/* 送信後の注意事項 */} <div className="mt-6 p-4 bg-blue-50 rounded-2xl border border-blue-200"> <div className="flex items-start space-x-2"> <Mail className="h-5 w-5 text-blue-600 mt-0.5" /> <div className="text-sm text-blue-800"> <p className="font-medium mb-1">メール送信について</p> <ul className="space-y-1 text-xs"> <li>• 送信後、確認メールをお送りします</li> <li>• 24時間以内に担当者よりご連絡いたします</li> <li>• メールが届かない場合は、迷惑メールフォルダもご確認ください</li> </ul> </div> </div> </div> </CardContent> </Card> </div> </section> {/* 中小企業省力化投資補助金の概要 */} <section className="py-20 bg-white"> <div className="container mx-auto px-4 max-w-6xl"> <div className="text-center mb-16"> <div className="inline-block bg-gradient-to-r from-blue-500 to-green-500 text-white px-6 py-2 rounded-full text-sm font-bold mb-4"> ABOUT </div> <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-8">中小企業省力化投資補助金の概要</h2> </div> <div className="max-w-5xl mx-auto"> <Card className="p-8 bg-gradient-to-br from-blue-50 via-white to-green-50 shadow-xl mb-12 rounded-3xl border-0"> <div className="space-y-8"> <div className="border-b border-gray-200 pb-6"> <div className="flex flex-col space-y-4 md:flex-row md:items-start md:space-y-0 md:space-x-6"> <div className="md:w-1/4"> <div className="flex items-center mb-2"> <div className="bg-blue-500 rounded-full p-2 mr-3"> <Award className="h-4 w-4 text-white" /> </div> <h3 className="text-xl font-bold text-blue-600">テーマ</h3> </div> </div> <div className="md:w-3/4"> <p className="text-base text-gray-700 leading-relaxed"> 中小企業が直面する「人手不足」「業務効率の向上」「コスト削減」といった課題を解決するために、設備導入を支援する制度です。この支援を通して、生産性の向上や売上の拡大、さらには従業員の負担軽減を実現することを目指します。 </p> </div> </div> </div> <div className="border-b border-gray-200 pb-6"> <div className="flex flex-col space-y-4 md:flex-row md:items-start md:space-y-0 md:space-x-6"> <div className="md:w-1/4"> <div className="flex items-center mb-2"> <div className="bg-green-500 rounded-full p-2 mr-3"> <Users className="h-4 w-4 text-white" /> </div> <h3 className="text-xl font-bold text-green-600">対象者</h3> </div> </div> <div className="md:w-3/4"> <p className="text-base text-gray-700 leading-relaxed"> 中小企業や小規模事業者（個人事業主を含む） </p> </div> </div> </div> <div> <div className="flex flex-col space-y-4 md:flex-row md:items-start md:space-y-0 md:space-x-6"> <div className="md:w-1/4"> <div className="flex items-center mb-2"> <div className="bg-purple-500 rounded-full p-2 mr-3"> <Globe className="h-4 w-4 text-white" /> </div> <h3 className="text-xl font-bold text-purple-600">補助方法</h3> </div> </div> <div className="md:w-3/4"> <p className="text-base text-gray-700 leading-relaxed"> 企業ごとの設備環境や事業内容に応じた設備導入やシステム構築など、多様な省力化投資に対応。オーダーメイド設備等やシステムの導入を行う事業計画が必要です。 </p> </div> </div> </div> </div> </Card> {/* 2通りの申請枠 */} <div className="mb-12"> <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">2通りの申請枠</h3> <div className="grid md:grid-cols-2 gap-6"> <Card className="p-6 border-0 bg-gradient-to-br from-blue-50 to-blue-100 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 rounded-3xl"> <div className="bg-blue-500 rounded-full p-3 w-12 h-12 mb-4 flex items-center justify-center"> <Award className="h-6 w-6 text-white" /> </div> <h4 className="text-lg font-bold text-blue-800 mb-4">カタログ型</h4> <p className="text-gray-700">カタログに掲載された省力化効果のある汎用製品が対象。</p> </Card> <Card className="p-6 border-0 bg-gradient-to-br from-green-50 to-green-100 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 rounded-3xl"> <div className="bg-green-500 rounded-full p-3 w-12 h-12 mb-4 flex items-center justify-center"> <Globe className="h-6 w-6 text-white" /> </div> <h4 className="text-lg font-bold text-green-800 mb-4">一般型</h4> <p className="text-gray-700"> 個別の事情に合わせた製品・システムが対象。オーダーメイドの一点物か、汎用設備の場合は2つ以上を組み合わせる必要あり。 </p> </Card> </div> </div> {/* 補助金の詳細情報へのリンク */} <div className="mt-12 text-center"> <Card className="bg-gradient-to-br from-orange-100 via-yellow-100 to-orange-100 p-8 rounded-3xl border-0 shadow-xl"> <div className="bg-gradient-to-r from-orange-500 to-red-500 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center shadow-lg"> <Phone className="h-8 w-8 text-white" /> </div> <h3 className="text-2xl font-bold text-gray-900 mb-4"> 事業内容と設備の購入タイミングによって申請可否が決まります。 <br /> まずは無料相談で詳しくご説明いたします。 </h3> <div className="flex flex-col sm:flex-row gap-4 justify-center"> <Button onClick={scrollToContact} className="bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white px-8 py-4 text-lg font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1" > 無料で補助金診断を受ける <ArrowRight className="ml-2 h-5 w-5" /> </Button> <Link href="/subsidy-info"> <Button variant="outline" className="border-2 border-orange-500 text-orange-600 hover:bg-orange-50 px-8 py-4 text-lg font-bold rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 bg-transparent" > 詳細情報を見る <ArrowRight className="ml-2 h-5 w-5" /> </Button> </Link> </div> </Card> </div> </div> </div> </section> {/* Service Flow Section */} <section className="py-20 bg-gradient-to-br from-gray-50 to-blue-50"> <div className="container mx-auto px-4 max-w-6xl"> <div className="text-center mb-16"> <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">あなたと二人三脚で進む4つのステップ</h2> <p className="text-xl text-gray-600">お申し込みから補助金受領まで、手と手を取り合って一緒に歩みます</p> </div> <div className="space-y-8"> {/* Step 1 */} <Card className="bg-white shadow-lg overflow-hidden rounded-2xl"> <div className="flex flex-col lg:flex-row"> <div className="lg:w-2/3 p-8"> <div className="flex flex-col sm:flex-row items-start space-y-4 sm:space-y-0 sm:space-x-6"> <div className="flex-shrink-0 mx-auto sm:mx-0"> <div className="bg-blue-600 text-white rounded-lg p-4 text-center min-w-[100px]"> <div className="text-sm font-medium">STEP</div> <div className="text-4xl font-bold">01</div> </div> </div> <div className="flex-1 text-center sm:text-left"> <h3 className="text-2xl font-bold text-blue-600 mb-4">お問い合わせ</h3> <p className="text-lg text-gray-700 leading-relaxed"> 中小企業省力化投資補助金に関してまずはお気軽にご相談ください。ご相談は、お電話・問い合わせフォーム、いずれも対応可能です！ </p> </div> </div> </div> <div className="lg:w-1/3 bg-gradient-to-br from-blue-500 to-blue-600 p-8 flex flex-col justify-center space-y-4"> <Button onClick={scrollToContact} className="bg-orange-500 hover:bg-orange-600 text-white py-3 px-6 text-lg font-bold" > 今すぐ無料相談 </Button> </div> </div> </Card> {/* Step 2 */} <Card className="bg-white shadow-lg overflow-hidden rounded-2xl"> <div className="p-8"> <div className="flex flex-col sm:flex-row items-start space-y-4 sm:space-y-0 sm:space-x-6"> <div className="flex-shrink-0 mx-auto sm:mx-0"> <div className="bg-blue-600 text-white rounded-lg p-4 text-center min-w-[100px]"> <div className="text-sm font-medium">STEP</div> <div className="text-4xl font-bold">02</div> </div> </div> <div className="flex-1 text-center sm:text-left"> <h3 className="text-2xl font-bold text-blue-600 mb-4">ヒアリング</h3> <p className="text-lg text-gray-700 leading-relaxed"> 事業内容や対象設備、実施体制など新しい事業に関しヒアリングさせていただきます。事前に必要な書類等はご連絡致します。 </p> </div> </div> </div> </Card> {/* Step 3 */} <Card className="bg-white shadow-lg overflow-hidden rounded-2xl"> <div className="p-8"> <div className="flex flex-col sm:flex-row items-start space-y-4 sm:space-y-0 sm:space-x-6"> <div className="flex-shrink-0 mx-auto sm:mx-0"> <div className="bg-blue-600 text-white rounded-lg p-4 text-center min-w-[100px]"> <div className="text-sm font-medium">STEP</div> <div className="text-4xl font-bold">03</div> </div> </div> <div className="flex-1 text-center sm:text-left"> <h3 className="text-2xl font-bold text-blue-600 mb-4">事業計画書（申請書）作成・提出のサポート</h3> <p className="text-lg text-gray-700 leading-relaxed mb-4"> お客様の事業内容やニーズに合わせた事業計画書の作成を丁寧にサポートします。 <br className="hidden sm:block" /> 豊富な経験を活かして、採択されるためのポイントを明確にしながら、質の高い計画書の完成と提出に向けて丁寧にお手伝いいたします。 </p> <div className="flex flex-wrap justify-center sm:justify-start gap-2"> <Badge variant="outline" className="text-sm"> 着手金: 無料 </Badge> <Badge variant="outline" className="text-sm"> 初回相談無料 </Badge> </div> </div> </div> </div> </Card> {/* Step 4 */} <Card className="bg-white shadow-lg overflow-hidden rounded-2xl"> <div className="p-8"> <div className="flex flex-col sm:flex-row items-start space-y-4 sm:space-y-0 sm:space-x-6"> <div className="flex-shrink-0 mx-auto sm:mx-0"> <div className="bg-blue-600 text-white rounded-lg p-4 text-center min-w-[100px]"> <div className="text-sm font-medium">STEP</div> <div className="text-4xl font-bold">04</div> </div> </div> <div className="flex-1 text-center sm:text-left"> <h3 className="text-2xl font-bold text-blue-600 mb-4">採択発表・ご請求</h3> <p className="text-lg text-gray-700 leading-relaxed"> 採択結果がインターネット上で発表され、貴社にも通知が届きます。この段階で、成功報酬としてお会計をご請求いたします。 </p> </div> </div> </div> </Card> </div> {/* Additional Info */} <div className="mt-16 text-center"> <Card className="bg-gradient-to-r from-green-50 to-blue-50 p-8 max-w-4xl mx-auto rounded-3xl"> <h3 className="text-2xl font-bold text-gray-900 mb-4">安心してスタートできます</h3> <p className="text-lg text-gray-700 mb-6"> 「補助金の申請って難しそう...」そんな不安をお持ちの方も大丈夫。 <br className="hidden sm:block" /> 私たちが最初から最後まで、あなたの隣で一緒に歩みます。 </p> <div className="text-center"> <div className="text-4xl font-bold text-green-600 mb-2">初期費用</div> <div className="text-2xl text-gray-700 font-bold">0円</div> <p className="text-sm text-gray-600 mt-2">まずはお話を聞かせてください</p> </div> </Card> </div> </div> </section> {/* Why Choose Us Section */} <section className="py-20 bg-gradient-to-r from-blue-100 to-green-100"> <div className="container mx-auto px-4 max-w-6xl"> <div className="text-center mb-12"> <h2 className="text-3xl font-bold text-gray-900 mb-4">大手とは違う、ミライファームの温かいサポート</h2> <p className="text-xl text-gray-600">3つの安心ポイント</p> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <Card className="p-8 bg-white shadow-lg text-center rounded-2xl"> <div className="bg-blue-100 rounded-full p-4 w-20 h-20 mx-auto mb-6 flex items-center justify-center"> <Award className="h-10 w-10 text-blue-600" /> </div> <h3 className="text-xl font-bold text-gray-900 mb-4">月5社限定の手厚いサポート</h3> <p className="text-base text-gray-700"> 大手のように数をこなすのではなく、お客様一人ひとりとじっくり向き合います。あなたの事業のことを一番に考えた提案をいたします。 </p> </Card> <Card className="p-8 bg-white shadow-lg text-center rounded-2xl"> <div className="bg-green-100 rounded-full p-4 w-20 h-20 mx-auto mb-6 flex items-center justify-center"> <Shield className="h-10 w-10 text-green-600" /> </div> <h3 className="text-xl font-bold text-gray-900 mb-4">専任担当があなたに寄り添います</h3> <p className="text-base text-gray-700"> 最初から最後まで同じ担当者が責任を持ってサポート。「今日は違う人...」なんてことはありません。安心してお任せください。 </p> </Card> <Card className="p-8 bg-white shadow-lg text-center rounded-2xl"> <div className="bg-purple-100 rounded-full p-4 w-20 h-20 mx-auto mb-6 flex items-center justify-center"> <Users className="h-10 w-10 text-purple-600" /> </div> <h3 className="text-xl font-bold text-gray-900 mb-4">あなただけのオーダーメイド提案</h3> <p className="text-base text-gray-700"> マニュアル通りの画一的な提案ではなく、あなたの事業に合わせた世界に一つだけの申請書を一緒に作り上げます。 </p> </Card> </div> </div> </section> {/* CTA Section */} <section className="py-20 bg-gradient-to-r from-orange-400 to-red-400"> <div className="container mx-auto px-4 text-center"> <div className="max-w-4xl mx-auto text-center"> <h2 className="text-4xl font-bold text-white mb-4">補助金相談</h2> <p className="text-3xl font-bold text-yellow-200 mb-8">無料実施中</p> <Button size="lg" onClick={scrollToContact} className="bg-white text-orange-600 hover:bg-gray-100 px-12 py-6 text-xl font-bold" > 今すぐ無料相談を予約する <ArrowRight className="ml-2 h-6 w-6" /> </Button> </div> </div> </section> {/* Footer */} <footer className="bg-gray-900 text-white py-12"> <div className="container mx-auto px-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div> <div className="flex items-center space-x-3 mb-4"> <div className="relative bg-white/95 rounded-lg p-2 shadow-lg"> <Image src="/images/mirai-farm-logo-new.png" alt="株式会社ミライファーム" width={200} height={50} className="h-10 lg:h-12 xl:h-14 w-auto" style={{ filter: "contrast(1.2) saturate(1.1) brightness(1.05)", }} /> </div> </div> <p className="text-base text-gray-400 mb-4"> 中小企業の省力化投資を全力でサポートし、 <br className="hidden sm:block" /> 持続可能な成長を実現します。 </p> </div> <div> <h4 className="font-semibold mb-4 text-lg">お問い合わせ</h4> <div className="space-y-2 text-gray-400 text-base"> <div className="flex items-center space-x-2"> <Mail className="h-4 w-4" /> <span>info@sr-mirai.or.jp</span> </div> </div> </div> </div> <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-base"> <p>© 2025 株式会社ミライファーム. All rights reserved.</p> </div> </div> </footer> </div> ) }

最新版への復元完了

復元内容

完全なランディングページ構成

機能面

デザイン面

SEO最適化

完全復元完了

復元した主要セクション

ヘッダー

ヒーローセクション

お問い合わせフォーム

補助金概要セクション

申請方法比較

CTAセクション

4つのステップ

安心してスタート

3つの強み

最終CTA

フッター