make the following code beautiful and responsive <script setup>
import { Link } from '@inertiajs/vue3';
</script>

<template>
  <!-- Hero Section -->
  <section
    class="relative min-h-[85vh] flex items-center justify-center text-center text-white px-4 sm:px-10 lg:px-20 bg-cover bg-center"
    style="background-image: linear-gradient(rgba(255, 115, 29, 0.35), rgba(191, 54, 12, 0.5)), url('https://images.unsplash.com/photo-1600891964835-0c9f55e420f9?auto=format&fit=crop&w=1470&q=80');"
  >
    <div class="absolute inset-0 bg-gradient-to-br from-orange-900 via-orange-700 to-orange-500 opacity-70 backdrop-blur-sm"></div>
    <div class="relative z-10 max-w-4xl px-4">
      <h1 class="text-4xl sm:text-5xl font-extrabold mb-6 text-orange-300 drop-shadow-lg italic tracking-wide">
        Discover Our Story
      </h1>
      <p class="text-lg sm:text-xl mb-10 leading-relaxed text-white/90 drop-shadow-md">
        We’re passionate about food, technology, and helping local restaurants thrive.<br class="hidden sm:inline">
        Our platform connects hungry users to great meals quickly, reliably, and with care.
      </p>
      <Link
        href="/"
        class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-10 rounded-full shadow-lg transition-transform duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-300"
      >
        Back to Home
      </Link>
    </div>
  </section>

  <!-- Values Section -->
  <section class="bg-white py-16 sm:py-20 px-4 sm:px-8">
    <div class="max-w-6xl mx-auto text-center">
      <h2 class="text-3xl sm:text-4xl font-bold text-orange-600 mb-4 sm:mb-6 drop-shadow">
        What We Stand For
      </h2>
      <p class="text-gray-700 max-w-3xl mx-auto mb-12 sm:mb-16 text-base sm:text-lg">
        Our mission is rooted in quality, empowerment, and innovation.<br class="hidden sm:inline">
        Every bite delivered and every dish managed supports a growing network of passionate culinary partners.
      </p>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-10">
        <div
          v-for="(value, index) in values"
          :key="index"
          class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl shadow-lg hover:shadow-2xl p-6 sm:p-8 border border-orange-200 transition-transform duration-300 hover:scale-105 group"
        >
          <h3 class="text-xl font-semibold text-orange-700 mb-3 group-hover:text-orange-900 transition">
            {{ value.title }}
          </h3>
          <p class="text-gray-800 text-sm sm:text-base">
            {{ value.description }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      values: [
        {
          title: 'Customer Delight',
          description: 'We prioritize customer satisfaction through intuitive design, reliability, and fast delivery.',
        },
        {
          title: 'Restaurant Empowerment',
          description: 'Local restaurants thrive with our management tools, analytics, and wide user reach.',
        },
        {
          title: 'Continuous Innovation',
          description: 'We evolve with trends and tech to deliver the most modern and efficient food service experience.',
        },
      ],
    };
  },
};
</script>