Merge branch 'dev' of https://git.profit-planet.partners/Seazn/profit-planet-frontend into dev

src/app/shop/vip/page.tsx

@@ -6,43 +6,53 @@ import { HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline'
 import { HeartIcon as HeartIconSolid } from '@heroicons/react/24/solid'
 import PageLayout from '../../components/PageLayout'
 
+// Collections für die Promo Section
+const collections = [
+  {
+    name: "Women's",
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-collection-01.jpg',
+    imageAlt: 'Woman wearing an off-white cotton t-shirt.',
+  },
+  {
+    name: "Men's",
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-collection-02.jpg',
+    imageAlt: 'Man wearing a charcoal gray cotton t-shirt.',
+  },
+  {
+    name: 'Desk Accessories',
+    href: '#',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-collection-03.jpg',
+    imageAlt: 'Person sitting at a wooden desk with paper note organizer, pencil and tablet.',
+  },
+]
+
 // Featured Products für die Shop-Startseite
 const featuredProducts = [
   {
     id: 101,
-    name: 'Leather Long Wallet',
-    color: 'Natural',
-    price: '$75',
+    name: 'Black Basic Tee',
+    price: '$32',
     href: '#',
-    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-02.jpg',
-    imageAlt: 'Hand stitched, orange leather long wallet.',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-01.jpg',
+    imageAlt: "Model wearing women's black cotton crewneck tee.",
   },
   {
     id: 102,
-    name: 'Machined Pencil and Pen Set',
-    color: 'Black',
-    price: '$70',
+    name: 'Off-White Basic Tee',
+    price: '$32',
     href: '#',
-    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-03.jpg',
-    imageAlt: '12-sided, machined black pencil and pen.',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-02.jpg',
+    imageAlt: "Model wearing women's off-white cotton crewneck tee.",
   },
   {
     id: 103,
-    name: 'Mini-Sketchbooks',
-    color: 'Light Brown',
-    price: '$27',
+    name: 'Mountains Artwork Tee',
+    price: '$36',
     href: '#',
-    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-04.jpg',
-    imageAlt: 'Set of three light and dark brown mini sketch books.',
-  },
-  {
-    id: 104,
-    name: 'Organizer Set',
-    color: 'Walnut',
-    price: '$149',
-    href: '#',
-    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-04-trending-product-01.jpg',
-    imageAlt: 'Beautiful walnut organizer set with multiple white compartments',
+    imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-favorite-03.jpg',
+    imageAlt: "Model wearing women's burgundy red crewneck artwork tee with small white triangle overlapping larger black triangle.",
   },
 ]
 
@@ -161,7 +171,7 @@ const products = [
 const stats = [
   { name: 'Total Users', stat: '71,897' },
   { name: 'Gold Members', stat: '68,161' },
-  { name: 'Saved through Gold Membership', stat: '25k €' },
+  { name: 'Savings as Gold member', stat: '25k €' },
 ]
 
 function classNames(...classes: (string | undefined | null | boolean)[]): string {
@@ -237,31 +247,108 @@ export default function ShopPage() {
   return (
     <PageLayout>
       <div className="bg-white">
-        {/* Header Section */}
-        <div 
-          className="text-white py-16 relative"
-          style={{
-            backgroundImage: 'url(/images/misc/grey_BG.jpg)',
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat'
-          }}
-        >
-          {/* <div className="absolute inset-0 bg-black/40"></div> */}
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-            <div className="text-center">
-              <div>
-                <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
+        {/* Promo Section with Stats Cards */}
+        <div className="relative overflow-hidden bg-white">
+          <div className="pt-16 pb-80 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
+            <div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
+              <div className="sm:max-w-lg">
+                {/* Stats Cards */}
+                {/* <div className="mb-8">
+                  <dl className="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-5">
                     {stats.map((item) => (
                       <div
                         key={item.name}
-                      className="overflow-hidden rounded-lg bg-[#0F172A]/90 px-4 py-5 shadow-sm inset-ring inset-ring-white/10 sm:p-6"
+                        className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow-lg border border-gray-200 sm:p-6"
                       >
-                      <dt className="truncate text-sm font-medium text-gray-400">{item.name}</dt>
-                      <dd className="mt-1 text-3xl font-semibold tracking-tight text-white">{item.stat}</dd>
+                        <dt className="truncate text-sm font-medium text-gray-600">{item.name}</dt>
+                        <dd className="mt-1 text-2xl font-semibold tracking-tight text-gray-900 sm:text-3xl">{item.stat}</dd>
                       </div>
                     ))}
                   </dl>
+                </div> */}
+                
+                <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+                  Shop with an infinite variety of products
+                </h1>
+                <p className="mt-4 text-xl text-gray-500">
+                  Discover a curated selection of high-quality products that cater to your every need.
+                </p>
+              </div>
+              <div>
+                <div className="mt-10">
+                  {/* Decorative image grid */}
+                  <div
+                    aria-hidden="true"
+                    className="pointer-events-none lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl"
+                  >
+                    <div className="absolute transform sm:top-0 sm:left-1/2 sm:translate-x-8 lg:top-1/2 lg:left-1/2 lg:translate-x-8 lg:-translate-y-1/2">
+                      <div className="flex items-center space-x-6 lg:space-x-8">
+                        <div className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
+                          <div className="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100">
+                            <img
+                              alt=""
+                              src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-01.jpg"
+                              className="size-full object-cover"
+                            />
+                          </div>
+                          <div className="h-64 w-44 overflow-hidden rounded-lg">
+                            <img
+                              alt=""
+                              src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-02.jpg"
+                              className="size-full object-cover"
+                            />
+                          </div>
+                        </div>
+                        <div className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
+                          <div className="h-64 w-44 overflow-hidden rounded-lg">
+                            <img
+                              alt=""
+                              src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-03.jpg"
+                              className="size-full object-cover"
+                            />
+                          </div>
+                          <div className="h-64 w-44 overflow-hidden rounded-lg">
+                            <img
+                              alt=""
+                              src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-04.jpg"
+                              className="size-full object-cover"
+                            />
+                          </div>
+                          <div className="h-64 w-44 overflow-hidden rounded-lg">
+                            <img
+                              alt=""
+                              src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-05.jpg"
+                              className="size-full object-cover"
+                            />
+                          </div>
+                        </div>
+                        <div className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8">
+                          <div className="h-64 w-44 overflow-hidden rounded-lg">
+                            <img
+                              alt=""
+                              src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-06.jpg"
+                              className="size-full object-cover"
+                            />
+                          </div>
+                          <div className="h-64 w-44 overflow-hidden rounded-lg">
+                            <img
+                              alt=""
+                              src="https://tailwindcss.com/plus-assets/img/ecommerce-images/home-page-03-hero-image-tile-07.jpg"
+                              className="size-full object-cover"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <a
+                    href="#"
+                    className="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-center font-medium text-white hover:bg-indigo-700"
+                  >
+                    Shop Collection
+                  </a>
+                </div>
               </div>
             </div>
           </div>
@@ -269,36 +356,37 @@ export default function ShopPage() {
 
         {/* Featured Products Section */}
         <div className="bg-white">
-          <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
-            <div className="md:flex md:items-center md:justify-between">
-              <h2 className="text-2xl font-bold tracking-tight text-gray-900">Trending products</h2>
-              <a href="#" className="hidden text-sm font-medium text-indigo-600 hover:text-indigo-500 md:block">
-                Shop the collection
+          <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
+            <div className="sm:flex sm:items-baseline sm:justify-between">
+              <h2 className="text-2xl font-bold tracking-tight text-gray-900">Trending right now</h2>
+              <a href="#" className="hidden text-sm font-semibold text-indigo-600 hover:text-indigo-500 sm:block">
+                Browse all trending
                 <span aria-hidden="true"> &rarr;</span>
               </a>
             </div>
 
-            <div className="mt-6 grid grid-cols-2 gap-x-4 gap-y-10 sm:gap-x-6 md:grid-cols-4 md:gap-y-0 lg:gap-x-8">
+            <div className="mt-6 grid grid-cols-1 gap-y-10 sm:grid-cols-3 sm:gap-x-6 sm:gap-y-0 lg:gap-x-8">
               {featuredProducts.map((product) => (
                 <div key={product.id} className="group relative">
-                  <div className="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                    <img alt={product.imageAlt} src={product.imageSrc} className="size-full object-cover" />
-                  </div>
-                  <h3 className="mt-4 text-sm text-gray-700">
+                  <img
+                    alt={product.imageAlt}
+                    src={product.imageSrc}
+                    className="h-96 w-full rounded-lg object-cover group-hover:opacity-75 sm:aspect-2/3 sm:h-auto"
+                  />
+                  <h3 className="mt-4 text-base font-semibold text-gray-900">
                     <a href={product.href}>
                       <span className="absolute inset-0" />
                       {product.name}
                     </a>
                   </h3>
-                  <p className="mt-1 text-sm text-gray-500">{product.color}</p>
-                  <p className="mt-1 text-sm font-medium text-gray-900">{product.price}</p>
+                  <p className="mt-1 text-sm text-gray-500">{product.price}</p>
                 </div>
               ))}
             </div>
 
-            <div className="mt-8 text-sm md:hidden">
-              <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
-                Shop the collection
+            <div className="mt-6 sm:hidden">
+              <a href="#" className="block text-sm font-semibold text-indigo-600 hover:text-indigo-500">
+                Browse all favorites
                 <span aria-hidden="true"> &rarr;</span>
               </a>
             </div>