Add about section

Author: pranav89624

public/images/tea.webp

@@ -3,6 +3,7 @@ import { ScrollTrigger, SplitText } from "gsap/all"
 import Navbar from "./components/Navbar";
 import Hero from "./components/Hero";
 import Teas from "./components/Teas";
+import About from "./components/About";
 
 gsap.registerPlugin(ScrollTrigger, SplitText);
 const App = () => {
@@ -11,6 +12,7 @@ const App = () => {
       <Navbar />
       <Hero />
       <Teas />
+      <About />
     </main>
   )
 }

src/app.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+const About = () => {
+  return (
+    <>
+      <div id="about">
+        <div className="mb-16 md:px-0 px-5">
+          <div className="content">
+            <div className="md:col-span-8">
+              <p className="badge">Best Teas</p>
+              <h2>
+                Where every leaf tells a story{" "}
+                <span className="text-white">-</span> from steep to sip
+              </h2>
+            </div>
+
+            <div className="sub-content">
+              <p>
+                Every infusion we craft carries the weight of our passion — from
+                the whisper of steam to the dance of leaves. It’s this care that
+                turns warmth into wonder, and sips into stories.
+              </p>
+
+              <div>
+                <p className="md:text-3xl text-xl font-bold">
+                  <span>4.5</span>/5
+                </p>
+                <p className="text-sm text-white-100">
+                  More than 20000+ customers
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="banner">
+        <div className="slider" style={{ "--quantity": 10 }}>
+          <div className="item" style={{"--position": 1}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 2}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 3}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 4}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 5}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 6}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 7}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 8}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 9}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+          <div className="item" style={{"--position": 10}}> <img src="/images/tea.webp" alt="image 1" /> </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default About;

src/components/About.jsx

@@ -373,4 +373,51 @@ body {
             @apply absolute bottom-0 right-0 lg:w-96 w-1/3 pointer-events-none;
         }
     }
+}
+
+
+.banner{
+    /* @apply w-full h-screen text-center overflow-hidden relative; */
+    width: 100%;
+    height: 100vh;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.banner .slider{
+    /* @apply absolute top-0 left-0 w-full h-full; */
+    position: absolute;
+    top: 10%;
+    left: calc(50% - 100px);
+    width: 200px;
+    height: 250px;
+    transform-style: preserve-3d;
+    transform: perspective(1000px);
+    animation: autoRun 20s linear infinite; 
+}
+
+@keyframes autoRun{
+    0%{
+        transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
+    }
+    100%{
+        transform: perspective(1000px) rotateX(-10deg) rotateY(360deg);
+    }
+}
+
+.banner .slider .item{
+    /* @apply absolute top-0 left-0 w-full h-full; */
+    position: absolute;
+    inset: 0 0 0 0;
+    transform: 
+        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
+        translateZ(550px);
+}
+
+.banner .slider .item img{
+    /* @apply w-full h-full object-cover; */
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }

src/index.css

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
-import App from './App.jsx'
+import App from './app.jsx'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>