add buid

src/components/Build.jsx

@@ -0,0 +1,89 @@
+import {
+    ArrowPathIcon,
+    CloudArrowUpIcon,
+    Cog6ToothIcon,
+    FingerPrintIcon,
+    LockClosedIcon,
+    ServerIcon,
+  } from '@heroicons/react/20/solid'
+  
+  const features = [
+    {
+      name: 'Push to deploy.',
+      description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.',
+      icon: CloudArrowUpIcon,
+    },
+    {
+      name: 'SSL certificates.',
+      description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
+      icon: LockClosedIcon,
+    },
+    {
+      name: 'Simple queues.',
+      description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.',
+      icon: ArrowPathIcon,
+    },
+    {
+      name: 'Advanced security.',
+      description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.',
+      icon: FingerPrintIcon,
+    },
+    {
+      name: 'Powerful API.',
+      description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
+      icon: Cog6ToothIcon,
+    },
+    {
+      name: 'Database backups.',
+      description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. ',
+      icon: ServerIcon,
+    },
+  ]
+  
+  export default function Build() {
+    return (
+      <div className="bg-white py-24 sm:py-32">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl sm:text-center">
+            <h2 className="text-base font-medium font-mono leading-7 text-blue-600">Get Started</h2>
+            <p className="mt-2 text-3xl font-semibold tracking-tight text-blue-700 sm:text-4xl">Build Your Own Verse</p>
+            <p className="mt-6 text-lg leading-8 text-blue-900">
+            Create and customize your virtual world with powerful tools and resources that make building and managing your digital space easy and intuitive.
+            </p>
+          </div>
+        </div>
+        <div className="relative overflow-hidden pt-16">
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            {/* embed Video */}
+            <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="relative w-full h-full overflow-hidden rounded-lg shadow-lg"
+            >
+          <source src="/videos/ourverse.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+         </video>
+            <div aria-hidden="true" className="relative">
+              <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]" />
+            </div>
+          </div>
+        </div>
+        <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
+          <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative pl-9">
+                <dt className="inline font-semibold text-gray-900">
+                  <feature.icon aria-hidden="true" className="absolute left-1 top-1 h-5 w-5 text-indigo-600" />
+                  {feature.name}
+                </dt>{' '}
+                <dd className="inline">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    )
+  }
+