chore: transfer repo

components/home/WoltDelivery.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { Button } from "@/components/ui/Button";
+import { Heading, Text } from "@/components/ui/Typography";
+import { useTranslation } from "@/lib/hooks/useTranslation";
+import { container } from "@/lib/utils";
+import Image from "next/image";
+
+export function WoltDelivery() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="relative">
+      {/* Top wave */}
+      <div className="w-full">
+        <Image
+          src="/assets/images/Frame3.png"
+          alt=""
+          width={1440}
+          height={140}
+          className="w-full object-cover"
+        />
+      </div>
+      
+      {/* Main content with background color */}
+      <div className="bg-wolt">
+        <div className={`${container} py-[80px] relative`}>
+          {/* Desktop Wolt logo - only visible on desktop */}
+          <div className="absolute top-0 right-0 z-10 hidden md:block">
+            <div className="w-[160px] h-[160px] bg-wolt-blue rounded-md flex items-center justify-center">
+              <Image
+                src="/assets/images/wolt.png"
+                alt="Wolt"
+                width={120}
+                height={120}
+                className="object-contain"
+              />
+            </div>
+          </div>
+          
+          {/* Text and image layout */}
+          <div className="flex flex-col md:flex-row md:items-center">
+            {/* Text container - comes first on both mobile and desktop */}
+            <div className="w-full md:w-1/2 md:pr-12 order-1 mb-8 md:mb-0">
+              <Heading level={2} className="mb-4">
+                {t('woltDelivery.title')}
+              </Heading>
+              <Text size="lg" className="mb-8">
+                {t('woltDelivery.description')}
+              </Text>
+              <Button 
+                href="https://wolt.com" 
+                external 
+                variant="filled" 
+                size="lg" 
+                fullWidthMobile
+              >
+                {t('woltDelivery.button')}
+              </Button>
+            </div>
+            
+            {/* Image container with mobile logo */}
+            <div className="w-full md:w-1/2 h-[310px] md:h-[400px] relative order-2 mb-12 md:mb-0">
+              <Image
+                src="/assets/images/wolt-image.png"
+                alt={t('woltDelivery.altText')}
+                fill
+                className="object-cover"
+                priority
+              />
+              
+              {/* Mobile Wolt logo - positioned at bottom-right of image */}
+              <div className="absolute bottom-[-40px] right-[-10px] z-10 md:hidden">
+                <div className="w-[120px] h-[120px] bg-wolt-blue rounded-md flex items-center justify-center">
+                  <Image
+                    src="/assets/images/wolt.png"
+                    alt="Wolt"
+                    width={90}
+                    height={90}
+                    className="object-contain"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}