add new component

2024-09-24 19:17:07 +02:00
parent 05277a28c2
commit 76601e5c71
95 changed files with 1798 additions and 176 deletions
--- a/src/components/Bentosection.jsx
+++ b/src/components/Bentosection.jsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { clsx } from 'clsx'
+import { motion } from 'framer-motion'
+import { Subheading } from './text'
+import { Container } from './Container'
+
+
+export default function BentoSection() {
+  function BentoCard({
+    dark = false,
+    className = '',
+    eyebrow,
+    title,
+    description,
+    graphic,
+    fade = [],
+    link = '/',
+  }) {
+    return (
+      <motion.div
+        initial="idle"
+        whileHover="active"
+        variants={{ idle: {}, active: {} }}
+        data-dark={dark ? 'true' : undefined}
+        className={clsx(
+          className,
+          'group relative flex flex-col overflow-hidden rounded-lg',
+          'bg-white shadow-sm ring-1 ring-black/5',
+          'data-[dark]:bg-gray-800 data-[dark]:ring-white/15',
+        )}
+      >
+        <div className="relative h-80 pb-20 shrink-0">
+          {graphic}
+          {fade.includes('top') && (
+            <div className="absolute inset-0 bg-gradient-to-b from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]" />
+          )}
+          {fade.includes('bottom') && (
+            <div className="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]" />
+          )}
+        </div>
+        <div className="relative p-10">
+          <Subheading as="h3" dark={dark}>
+            {eyebrow}
+          </Subheading>
+          <p className="mt-1 text-2xl/8 font-medium tracking-tight text-gradient-dark group-data-[dark]:text-white">
+            {title}
+          </p>
+          <p className="mt-2 max-w-[600px] text-sm/6 text-gray-600 group-data-[dark]:text-gray-400">
+            {description}
+          </p>
+          <a href={link} className="lg:text-xs mt-4 text-sm font-mono text-cyan-600  hover:text-purple-600">
+                    Learn More <span aria-hidden="true">→</span>
+         </a>
+        </div>
+      </motion.div>
+    )
+  }
+
+  return (
+    <Container>
+        <div className="relative pt-24 z-10 mx-auto max-w-2xl lg:mx-0 lg:max-w-5xl lg:pr-24">
+          <h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Features</h2>
+          <h2 className="mt-2  h3-title">
+            Collaboration & Creation Tools
+          </h2>
+          <p className="mt-4 section-text">
+          Transform how you and your team work together with our innovative, real-time creative tools.
+          </p>
+        </div>
+      <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+        <BentoCard
+          eyebrow="Creativity"
+          title="3D Collaboration Tools"
+          description="Transform how you and your team work together with our innovative, real-time creative tools."
+          graphic={
+            <div className="h-80 bg-[url(/images/collaborate.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
+          link="/features"
+        />
+        <BentoCard
+          eyebrow="Connected Experiences"
+          title="OurVerse Studio"
+          description="Elevate your virtual conferences with cutting-edge communication features designed to keep your audience connected and engaged."
+          graphic={
+            <div className="h-80 bg-[url(/images/studio.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="lg:col-span-3 lg:rounded-tr-4xl"
+          link="/features"
+        />
+        <BentoCard
+          eyebrow="3D Modeling"
+          title="Verse Builder Pro"
+          description="Create and customize your virtual world with powerful tools that make building and managing your digital space easy and intuitive."
+          graphic={
+            <div className="h-80 bg-[url(/images/builder.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="lg:col-span-2 lg:rounded-bl-4xl"
+        />
+        <BentoCard
+          eyebrow="Next-Gen Interactions"
+          title="Virtual Meeting Tools"
+          description="Elevate your virtual interactions with cutting-edge communication features designed to keep you connected and engaged.."
+          graphic={
+            <div className="h-80 bg-[url(/images/communicate.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="lg:col-span-2"
+          link="/features"
+        />
+        <BentoCard
+          eyebrow="Business Platform"
+          title="Integrated CRM"
+          description="Manage customer interactions, tasks, and meetings seamlessly in one platform, helping your business transition smoothly to the digital landscape."
+          graphic={
+            <div className="h-80 bg-[url(/images/crm.png)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl"
+          link="/features"
+        />
+      </div>
+    </Container>
+  )
+}