chore: transfer repo

components/home/GiftBoxBuilder.tsx

@@ -0,0 +1,73 @@
+"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 GiftBoxBuilder() {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="relative">
+      {/* Top frame image */}
+      <div className="w-full">
+        <Image
+          src="/assets/images/Frame4.png"
+          alt=""
+          width={1440}
+          height={140}
+          className="w-full object-cover"
+        />
+      </div>
+      
+      {/* Main content with pink background */}
+      <div className="bg-[#F58EA7]">
+        <div className={`${container} py-[80px]`}>
+          <div className="flex flex-col md:flex-row md:items-center">
+            {/* Image container - takes up full width on mobile, half on desktop */}
+            <div className="w-full md:w-1/2 h-[240px] md:h-[500px] relative mb-8 md:mb-0">
+              <Image
+                src="/assets/images/build-box.png"
+                alt={t('giftBoxBuilder.altText')}
+                fill
+                className="object-cover"
+                priority
+              />
+            </div>
+            
+            {/* Text container - takes up full width on mobile, half on desktop */}
+            <div className="w-full md:w-1/2 md:pl-20">
+              <Heading level={2} className="mb-4">
+                {t('giftBoxBuilder.title')}
+              </Heading>
+              <Text size="lg" className="mb-8">
+                {t('giftBoxBuilder.description')}
+              </Text>
+              <Button 
+                href="/build-box" 
+                variant="filled" 
+                size="lg" 
+                fullWidthMobile
+              >
+                {t('giftBoxBuilder.button')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Bottom frame image */}
+      <div className="w-full">
+        <Image
+          src="/assets/images/Frame5.png"
+          alt=""
+          width={1440}
+          height={140}
+          className="w-full object-cover"
+        />
+      </div>
+    </div>
+  );
+}