moreminimore-website/src/pages/about-us.astro

---
import Layout from '../layouts/Layout.astro'

const schemaData = {
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "บริษัท มอร์มินิมอร์ จำกัด",
  "description": "บริษัท มอร์มินิมอร์ จำกัด ให้บริการรับทำเว็บไซต์ SEO และ AI Chatbot สำหรับ SMEs ไทย",
  "url": "https://www.moreminimore.com",
  "telephone": "0809955945",
  "email": "contact@moreminimore.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว อ.บ้านแพ้ว",
    "addressLocality": "สมุทรสาคร",
    "postalCode": "74120",
    "addressCountry": "TH"
  },
  "foundingDate": "2020",
  "founders": [
    {
      "@type": "Person",
      "name": "ทีมงาน MoreminiMore"
    }
  ],
  "sameAs": [
    "https://www.facebook.com/moreminimore",
    "https://twitter.com/moreminimore",
    "https://www.linkedin.com/company/moreminimore"
  ]
}
---

<Layout title="เกี่ยวกับเรา | บริษัท มอร์มินิมอร์ จำกัด - รับทำเว็บไซต์ SEO AI Chatbot">
  <script type="application/ld+json" set:html={JSON.stringify(schemaData)} />
  
  <!-- Hero Section -->
  <section id="hero" class="reveal relative overflow-hidden min-h-[50vh] flex items-center">
    <!-- Hero Image Background -->
    <div class="absolute inset-0">
      <img 
        src="/images/hero/about-us-hero.jpg" 
        alt="ทีมงานมอร์มินิมอร์ - พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ"
        class="w-full h-full object-cover"
      />
      <div class="absolute inset-0 bg-gradient-to-br from-purple-600/80 via-purple-500/70 to-blue-600/80"></div>
      <!-- Floating Shapes - Lighter purple/blue -->
      <div class="absolute top-20 left-10 w-72 h-72 bg-white/10 rounded-full blur-3xl animate-float-1"></div>
      <div class="absolute bottom-20 right-10 w-96 h-96 bg-blue-400/10 rounded-full blur-3xl animate-float-2"></div>
      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/5 rounded-full blur-2xl animate-float-3"></div>
      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-300/10 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
    </div>
    
    <!-- Floating dots -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
    </div>
    
    <!-- Grid Pattern -->
    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
    
    <div class="container mx-auto px-4 relative z-10 py-20">
      <div class="max-w-4xl mx-auto text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
          เกี่ยวกับเรา
        </h1>
        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
          มอร์มินิมอร์ — พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ
        </p>
      </div>
    </div>
  </section>

  <!-- Vision Section -->
  <section id="vision" class="reveal py-24 bg-white">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <div class="text-center mb-12">
          <span class="inline-flex items-center gap-2 px-4 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium mb-4">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            วิสัยทัศน์
          </span>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-black">
            เติบโตไปด้วยกัน
          </h2>
        </div>
        
        <div class="bg-gray-50 rounded-3xl p-8 md:p-12 text-center">
          <p class="text-xl md:text-2xl text-gray-700 leading-relaxed">
            "เราเชื่อว่าความสำเร็จของลูกค้าคือความสำเร็จของเรา<br/>
            <span class="text-black font-bold">เมื่อธุรกิจของคุณเติบโต</span> เราก็เติบโตไปด้วยกัน"
          </p>
          <p class="text-gray-600 mt-6">
            ความสำเร็จที่แท้จริงไม่ใช่แค่ตัวเลข แต่คือการเห็นผลงานที่เกิดขึ้นจริงของลูกค้า
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Values Section -->
  <section id="values" class="reveal py-24 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12 max-w-2xl mx-auto">
          <span class="inline-flex items-center gap-2 px-4 py-1 bg-purple-100 text-purple-700 rounded-full text-sm font-medium mb-4">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
            ค่านิยม
          </span>
        <h2 class="text-3xl md:text-4xl font-bold mb-4 text-black">
          สิ่งที่เรายึดมั่น
        </h2>
        <p class="text-gray-600">
          เรามุ่งเน้นที่ผลลัพธ์ที่จับต้องได้ ไม่ใช่แค่ตัวเลขบนหน้าจอ
        </p>
      </div>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
        <!-- Value 1 -->
        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-black">เน้นผลงานจริง</h3>
          <p class="text-gray-600 text-sm">
            เราวัดความสำเร็จจากยอดขายที่เพิ่มขึ้นของลูกค้า ไม่ใช่แค่คะแนน SEO หรือจำนวนการเข้าชม
          </p>
        </div>
        
        <!-- Value 2 -->
        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-black">เป็นพาร์ทเนอร์</h3>
          <p class="text-gray-600 text-sm">
            เราไม่ได้มองลูกค้าเป็นแค่ผู้จ้าง แต่มองเป็นพาร์ทเนอร์ที่จะเติบโตไปด้วยกันในระยะยาว
          </p>
        </div>
        
        <!-- Value 3 -->
        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-black">คุ้มค่าที่สุด</h3>
          <p class="text-gray-600 text-sm">
            ออกแบบโซลูชันให้เหมาะกับงบประมาณของคุณ เริ่มต้นง่าย ไม่ต้องลงทุนมาก
          </p>
        </div>
        
        <!-- Value 4 -->
        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-black">ทำงานเร็ว</h3>
          <p class="text-gray-600 text-sm">
            เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวันประงัน
          </p>
        </div>
        
        <!-- Value 5 -->
        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-black">ดูแลต่อเนื่อง</h3>
          <p class="text-gray-600 text-sm">
            ไม่ทิ้งหลังขาย พร้อมสนับสนุนและปรับปรุงระบบให้ตลอดเวลา
          </p>
        </div>
        
        <!-- Value 6 -->
        <div class="bg-white rounded-3xl p-8 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300">
          <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
          </div>
          <h3 class="text-xl font-bold mb-3 text-black">โปร่งใส</h3>
          <p class="text-gray-600 text-sm">
            ราคาชัดเจน ไม่มีค่าใช้จ่ายซ่อนเร้น รายงานผลตรง ชัดเจน
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Image Section -->
  <section class="reveal py-12 bg-white">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <div class="relative rounded-3xl shadow-2xl overflow-hidden">
          <img 
            src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=1200&h=600&fit=crop" 
            alt="MoreminiMore Team - AI Technology Partner"
            class="w-full h-64 md:h-96 object-cover"
            loading="lazy"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
          <div class="absolute bottom-0 left-0 right-0 p-6 md:p-8">
            <p class="text-white text-lg md:text-xl font-medium">พาร์ทเนอร์ด้าน IT และ AI ที่พร้อมเติบโตไปกับคุณ</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Why Choose Us -->
  <section class="reveal py-24 bg-gray-50">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12 text-black">
          ทำไมเลือกเรา?
        </h2>
        
        <div class="grid md:grid-cols-2 gap-6">
          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            </div>
            <h3 class="font-bold mb-2 text-black">เน้นผลลัพธ์</h3>
            <p class="text-gray-600 text-sm">เราวัดผลทุกอย่าง และมุ่งเน้นให้เห็นผลจริงในการเพิ่มยอดขาย</p>
          </div>
          
          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <h3 class="font-bold mb-2 text-black">ราคาเหมาะสม</h3>
            <p class="text-gray-600 text-sm">ออกแบบมาให้ SMEs สามารถเริ่มต้นได้ง่าย ไม่ต้องลงทุนมาก</p>
          </div>
          
          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
            </div>
            <h3 class="font-bold mb-2 text-black">ดูแลต่อเนื่อง</h3>
            <p class="text-gray-600 text-sm">ไม่ทิ้งหลังขาย พร้อมอบรมและสนับสนุนตลอดการใช้งาน</p>
          </div>
          
          <div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg transition-shadow">
            <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            </div>
            <h3 class="font-bold mb-2 text-black">ทำงานเร็ว</h3>
            <p class="text-gray-600 text-sm">เข้าใจว่าธุรกิจต้องการผลลัพธ์เร็ว ทำงานตรงเวลา ไม่ผัดวัน</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section class="reveal py-20 bg-primary">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-black">
        พร้อมร่วมงานกับคุณแล้วหรือยัง?
      </h2>
      <p class="text-black/70 mb-8 max-w-xl mx-auto">
        เริ่มต้นง่ายๆ แค่โทรหาหรือเพิ่ม LINE มาคุยกันก่อน ไม่มีค่าใช้จ่าย!
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="tel:0809955945" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
          </svg>
          080-995-5945
        </a>
        <a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all hover:scale-105 shadow-xl flex items-center justify-center gap-2">
          <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5" />
          เพิ่ม Line
        </a>
      </div>
    </div>
  </section>
</Layout>

<style>
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fade-in-up {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes float-1 {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-30px) translateX(15px); }
    50% { transform: translateY(-20px) translateX(-15px); }
    75% { transform: translateY(-40px) translateX(10px); }
  }
  
  @keyframes float-2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-25px) translateX(-20px); }
    50% { transform: translateY(-35px) translateX(15px); }
    75% { transform: translateY(-15px) translateX(-10px); }
  }
  
  @keyframes float-3 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.1); }
  }
  
  @keyframes float-dot-1 {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
    50% { transform: translateY(-40px) translateX(15px); opacity: 0.3; }
  }
  
  @keyframes float-dot-2 {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
    50% { transform: translateY(-30px) translateX(-20px); opacity: 0.35; }
  }
  
  @keyframes float-dot-3 {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.1; }
    50% { transform: translateY(-35px) translateX(10px); opacity: 0.25; }
  }
  
  .animate-fade-in-up {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
  }
  
  .animate-float-1 { animation: float-1 4s ease-in-out infinite; }
  .animate-float-2 { animation: float-2 5s ease-in-out infinite; }
  .animate-float-3 { animation: float-3 3s ease-in-out infinite; }
  .animate-float-dot-1 { animation: float-dot-1 2s ease-in-out infinite; }
  .animate-float-dot-2 { animation: float-dot-2 2.5s ease-in-out infinite; }
  .animate-float-dot-3 { animation: float-dot-3 3s ease-in-out infinite; }
</style>