chore: transfer repo

components/home/ProductSliderSection.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { Section } from "@/components/ui/Section";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import type { Product } from "lib/shopify/types";
+import { ProductSlider } from "./ProductSlider";
+
+interface ProductSliderSectionProps {
+  products: Product[];
+}
+
+/**
+ * Presentation component for the product slider section
+ * Handles the layout and presentation aspects, but not data fetching
+ */
+export function ProductSliderSection({ products }: ProductSliderSectionProps) {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="overflow-x-hidden w-full">
+      <Section spacing="medium">
+        <div className="mb-8">
+          {/* Container for header section with relative positioning */}
+          <div className="relative">
+            {/* Button positioned absolutely to the right */}
+            <div className="hidden sm:block absolute right-0 bottom-[0px]">
+              <Button 
+                href="/search" 
+                variant="custom" 
+                size="lg"
+                fullWidthMobile={false}
+              >
+                {t('productSlider.button')}
+              </Button>
+            </div>
+            
+            {/* Title and description */}
+            <div className="mb-4">
+              <Heading level={2}>{t('productSlider.title')}</Heading>
+            </div>
+            
+            <div>
+              <Text size="lg" className="mb-4 sm:mb-0">{t('productSlider.description')}</Text>
+            </div>
+          </div>
+          
+          {/* Mobile full-width button */}
+          <div className="sm:hidden mt-2">
+            <Button 
+              href="/search" 
+              variant="custom" 
+              size="lg"
+              fullWidthMobile
+            >
+              {t('productSlider.button')}
+            </Button>
+          </div>
+        </div>
+
+        {/* Carousel container s overflow da se vidi 4. proizvod */}
+        <div className="relative w-full overflow-visible">
+          <ProductSlider products={products} />
+        </div>
+      </Section>
+    </div>
+  );
+}