diff --git a/src/app/id/[slug]/page.tsx b/src/app/id/[slug]/page.tsx
new file mode 100644
index 0000000..417310c
--- /dev/null
+++ b/src/app/id/[slug]/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { Props } from "@/hooks/useValidateFrameUrl";
+import { notFound, useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import LoadingOverlay from "../go/_components/form/loading-overlay";
+
+export default function SlugPage() {
+  const [isNotFound, setIsNotFound] = useState(false);
+  const { slug } = useParams();
+  const router = useRouter();
+
+  useEffect(() => {
+    const params = localStorage.getItem(slug as string);
+
+    if (!params) setIsNotFound(true);
+    else {
+      const searchParams = JSON.parse(params) as Props["searchParams"];
+
+      router.push(`/go?${new URLSearchParams(searchParams).toString()}`);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug]);
+
+  return isNotFound ? notFound() : <LoadingOverlay isLoading />;
+}
diff --git a/src/app/id/_components/footer.tsx b/src/app/id/_components/footer.tsx
new file mode 100644
index 0000000..31da912
--- /dev/null
+++ b/src/app/id/_components/footer.tsx
@@ -0,0 +1,11 @@
+export const Footer = () => {
+  return (
+    <footer className="w-full px-4 md:px-8 bg-primary-500 text-white">
+      <div className="border-neutral-600 max-w-7xl mx-auto mt-12 py-8 text-center">
+        <p>
+          © {new Date().getFullYear()} Moklet Developers. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+};
diff --git a/src/app/id/_components/global/button.tsx b/src/app/id/_components/global/button.tsx
new file mode 100644
index 0000000..a259d0d
--- /dev/null
+++ b/src/app/id/_components/global/button.tsx
@@ -0,0 +1,90 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import Link, { LinkProps as NextLinkProps } from "next/link";
+import {
+  ComponentProps,
+  HTMLAttributeAnchorTarget,
+  MouseEventHandler,
+  ReactNode,
+} from "react";
+
+import cn from "@/lib/clsx";
+
+const buttonVariants = cva(
+  "inline-flex items-center rounded-full transition-all duration-500",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-primary-400 px-4 py-2 md:px-6 md:py-3 hover:bg-primary-200 text-base text-white disabled:text-neutral-500 disabled:bg-neutral-300",
+        secondary:
+          "border-primary-400 px-4 py-2 md:px-6 md:py-3 hover:bg-primary-50 text-base text-primary-400 disabled:bg-neutral-300 text-primary-400 disabled:text-neutral-500",
+        tertiary:
+          "text-base text-black hover:text-primary-400 text-black disabled:text-neutral-500",
+        quartiary:
+          "text-base px-4 py-2 md:px-6 md:py-3 text-primary-400 bg-white hover:bg-primary-50 disabled:bg-neutral-400 disabled:text-white",
+      },
+    },
+  }
+);
+
+interface LinkButtonProps
+  extends NextLinkProps,
+    VariantProps<typeof buttonVariants> {
+  children?: ReactNode;
+  href: string;
+  scroll?: boolean;
+  target?: HTMLAttributeAnchorTarget;
+  className?: string;
+}
+
+interface ButtonProps
+  extends ComponentProps<"button">,
+    VariantProps<typeof buttonVariants> {
+  children?: ReactNode;
+  type?: "button" | "reset" | "submit";
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  isDisabled?: boolean;
+  className?: string;
+}
+
+export function LinkButton({
+  children,
+  href,
+  variant,
+  className,
+  target,
+  scroll,
+}: Readonly<LinkButtonProps>) {
+  return (
+    <Link
+      href={href}
+      className={cn(buttonVariants({ variant }), className)}
+      target={target}
+      scroll={scroll}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function Button({
+  children,
+  type,
+  onClick,
+  isDisabled,
+  className,
+  variant,
+  ...props
+}: Readonly<ButtonProps>) {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={isDisabled}
+      className={cn(buttonVariants({ variant }), className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/app/id/_components/global/card.tsx b/src/app/id/_components/global/card.tsx
new file mode 100644
index 0000000..c994bea
--- /dev/null
+++ b/src/app/id/_components/global/card.tsx
@@ -0,0 +1,82 @@
+import cn from "@/lib/clsx";
+import * as React from "react";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border border-zinc-200 bg-white text-zinc-950 shadow dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-zinc-500 dark:text-zinc-400", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};
diff --git a/src/app/id/_components/global/image.tsx b/src/app/id/_components/global/image.tsx
new file mode 100644
index 0000000..9dfcf07
--- /dev/null
+++ b/src/app/id/_components/global/image.tsx
@@ -0,0 +1,16 @@
+import { default as NextImage, ImageProps } from "next/image";
+
+import cn from "@/lib/clsx";
+
+export default function Image(props: Readonly<ImageProps>) {
+  return (
+    <NextImage
+      {...props}
+      referrerPolicy="no-referrer"
+      className={cn(
+        "pointer-events-none object-cover bg-center bg-no-repeat",
+        props.className,
+      )}
+    />
+  );
+}
diff --git a/src/app/id/_components/global/input.tsx b/src/app/id/_components/global/input.tsx
new file mode 100644
index 0000000..160c25f
--- /dev/null
+++ b/src/app/id/_components/global/input.tsx
@@ -0,0 +1,274 @@
+"use client";
+
+import { ChangeEvent, KeyboardEventHandler, useState } from "react";
+import { FaEye, FaEyeSlash } from "react-icons/fa";
+
+import cn from "@/lib/clsx";
+
+interface InputProps {
+  label?: string;
+  placeholder?: string;
+  className?: string;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  defaultValue?: string;
+  handleChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+}
+
+interface OptionFieldProps {
+  label: string;
+  required?: boolean;
+  options: { id: string; value: string }[];
+  className?: string;
+  value?: string | Array<string>;
+  name: string;
+  handleChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+}
+
+interface SelectFieldProps {
+  label?: string;
+  required?: boolean;
+  options: { value: string; label: string }[];
+  className?: string;
+  value?: string | Array<string>;
+  name: string;
+  handleChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
+  disabled?: boolean;
+}
+
+interface TextFieldProps extends InputProps {
+  type: "email" | "text" | "password" | "number" | "url";
+}
+
+export function TextField({
+  label,
+  placeholder,
+  className,
+  name,
+  required,
+  type = "text",
+  handleChange,
+  value,
+  defaultValue,
+  onKeyDown,
+  disabled,
+}: Readonly<TextFieldProps>) {
+  const [showPassword, setShowPassword] = useState(false);
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            `first-letter:capitalize ${
+              required ? "after:text-red-500 after:content-['*']" : ""
+            }`
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {type == "password" && (
+          <button
+            className="absolute right-3 mt-4 flex items-center px-2 text-neutral-400 hover:text-neutral-500 transition-all"
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+          >
+            {showPassword ? <FaEyeSlash size={20} /> : <FaEye size={20} />}
+          </button>
+        )}
+        <input
+          type={showPassword ? "text" : type}
+          name={name}
+          defaultValue={defaultValue}
+          value={value}
+          placeholder={placeholder}
+          onChange={handleChange}
+          id={name}
+          className="w-full rounded-full border border-neutral-400 px-[18px] active:border-black hover:border-black py-[14px] text-black placeholder-neutral-500 focus:outline-none transition-all duration-500"
+          required={required}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function TextArea({
+  label,
+  placeholder,
+  className,
+  required,
+  name,
+  value,
+  disabled,
+}: Readonly<InputProps>) {
+  return (
+    <div className={"flex flex-col gap-2 " + className}>
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            `first-letter:capitalize ${
+              required ? "after:text-red-500 after:content-['*']" : ""
+            }`
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <textarea
+        name={name}
+        placeholder={placeholder}
+        required={required}
+        defaultValue={value}
+        id={name}
+        className="h-[144px] rounded-2xl border border-neutral-400 px-[18px] focus:border-black hover:border-black py-[14px] text-black placeholder-neutral-400 focus:outline-none transition-all duration-500"
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+export function SelectField({
+  label,
+  options,
+  className,
+  required,
+  value,
+  name,
+  handleChange,
+  disabled,
+}: Readonly<SelectFieldProps>) {
+  return (
+    <div className={"flex flex-col gap-2 " + className}>
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            `first-letter:capitalize ${
+              required ? "after:text-red-500 after:content-['*']" : ""
+            }`
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <select
+        name={name}
+        defaultValue={value}
+        className="rounded-xl border border-neutral-400 px-[18px] active:border-black hover:border-black py-[14px] text-black placeholder-neutral-400 focus:outline-none transition-all duration-500"
+        id={name}
+        required={required}
+        onChange={handleChange}
+        disabled={disabled}
+      >
+        <option value="" disabled hidden>
+          Pilih
+        </option>
+        {options &&
+          options.map((option, index) => (
+            <option value={option.value} key={index}>
+              {option.label}
+            </option>
+          ))}
+      </select>
+    </div>
+  );
+}
+
+export function RadioField({
+  label,
+  options,
+  className,
+  required,
+  value,
+  name,
+  disabled,
+}: Readonly<OptionFieldProps>) {
+  return (
+    <div className={cn("flex flex-col gap-2 " + className)}>
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            `first-letter:capitalize ${
+              required ? "after:text-red-500 after:content-['*']" : ""
+            }`
+          )}
+        >
+          {label}
+        </label>
+      )}
+      {options &&
+        options.map((option) => (
+          <div className="flex gap-x-4 cursor-pointer" key={option.id}>
+            <input
+              type="radio"
+              name={name}
+              defaultChecked={option.value === value}
+              value={option.value}
+              className="w-5 h-5 cursor-pointer accent-primary-500 shrink-0 mt-0.5 border-gray-200 rounded-full text-primary-500 disabled:opacity-50 disabled:pointer-events-none transition-all ease-linear"
+              id={option.id}
+              required={required}
+              disabled={disabled}
+            />
+            <label htmlFor={option.id} className="cursor-pointer text-sm ms-2">
+              {option.value}
+            </label>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+export function CheckboxField({
+  label,
+  options,
+  className,
+  required,
+  value,
+  name,
+  disabled,
+}: Readonly<OptionFieldProps>) {
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {label && (
+        <label
+          htmlFor={label}
+          className={cn(
+            `first-letter:capitalize ${
+              required ? "after:text-red-500 after:content-['*']" : ""
+            }`
+          )}
+        >
+          {label}
+        </label>
+      )}
+      {options &&
+        options.map((option) => (
+          <div className="flex gap-x-4 cursor-pointer" key={option.id}>
+            <input
+              type="checkbox"
+              name={name}
+              value={option.value}
+              defaultChecked={value?.includes(option.value)}
+              className="w-4 h-4 cursor-pointer bg-white text-primary-500 accent-primary-500 shrink-0 mt-0.5 border-gray-200 rounded focus:ring-primary-500 disabled:opacity-50 disabled:pointer-events-none transition-all"
+              id={option.id}
+              data-required={required}
+              disabled={disabled}
+            />
+            <label htmlFor={option.id} className="cursor-pointer text-sm ms-2">
+              {option.value}
+            </label>
+          </div>
+        ))}
+    </div>
+  );
+}
diff --git a/src/app/id/_components/global/text.tsx b/src/app/id/_components/global/text.tsx
new file mode 100644
index 0000000..3fc2a1d
--- /dev/null
+++ b/src/app/id/_components/global/text.tsx
@@ -0,0 +1,95 @@
+import { ReactNode } from "react";
+
+import cn from "../../../lib/clsx";
+
+interface TextProps {
+  children?: ReactNode;
+  className?: string;
+  textClassName?: string;
+  underlineClassName?: string;
+}
+
+export function H1({ children, className }: Readonly<TextProps>) {
+  return (
+    <h1
+      className={cn(
+        "text-[36px] font-bold leading-[130%] sm:text-[44px]",
+        className
+      )}
+    >
+      {children}
+    </h1>
+  );
+}
+
+export function P({ children, className }: Readonly<TextProps>) {
+  return (
+    <p className={cn("text-neutral-500 leading-[160%]", className)}>
+      {children}
+    </p>
+  );
+}
+
+export function H2({ children, className }: Readonly<TextProps>) {
+  return (
+    <h2
+      className={cn(
+        "text-[24px] md:text-4xl leading-[130%] font-bold text-black",
+        className
+      )}
+    >
+      {children}
+    </h2>
+  );
+}
+
+export function H3({ children, className }: Readonly<TextProps>) {
+  return (
+    <h3
+      className={cn(
+        "text-[28px] leading-[140%] font-bold text-black",
+        className
+      )}
+    >
+      {children}
+    </h3>
+  );
+}
+
+export function H4({ children, className }: Readonly<TextProps>) {
+  return (
+    <h4
+      className={cn("text-2xl leading-[150%] font-bold text-black", className)}
+    >
+      {children}
+    </h4>
+  );
+}
+
+export function UnderlinedTitle({
+  children,
+  textClassName,
+  underlineClassName,
+  className,
+}: Readonly<TextProps>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-start md:flex-row md:items-center justify-between gap-[18px] md:gap-0 mb-[18px]",
+        className
+      )}
+    >
+      <div className="relative">
+        <H2 className={cn("z-10 font-bold text-black", textClassName)}>
+          {children}
+        </H2>
+        <div
+          className={cn(
+            "absolute left-[3px] -z-10 h-[16px] bg-primary-100",
+            underlineClassName
+          )}
+        ></div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/id/_components/parts/examples.tsx b/src/app/id/_components/parts/examples.tsx
new file mode 100644
index 0000000..91d98ba
--- /dev/null
+++ b/src/app/id/_components/parts/examples.tsx
@@ -0,0 +1,195 @@
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useMemo, useState } from "react";
+
+const EXAMPLES = [
+  {
+    title: "Movaganza",
+    category: "Memo",
+    image: "/examples/Example Twibbon 1.jpg",
+  },
+  {
+    title: "MPLS 2024",
+    category: "OSIS",
+    image: "/examples/Example Twibbon 2.jpg",
+  },
+  {
+    title: "MOYI",
+    category: "METIC",
+    image: "/examples/Example Twibbon 3.jpg",
+  },
+];
+
+export const Examples = () => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  const examples = useMemo(() => {
+    const isAll = selectedCategory === null;
+
+    const filteredExamples = isAll
+      ? EXAMPLES
+      : EXAMPLES.filter((example) => example.category === selectedCategory);
+
+    return filteredExamples;
+  }, [selectedCategory]);
+
+  const categories = useMemo(
+    () => Array.from(new Set(EXAMPLES.map((example) => example.category))),
+    []
+  );
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.3,
+      },
+    },
+  };
+
+  const overlayVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { duration: 0.2 },
+    },
+  };
+
+  return (
+    <section className="w-full py-24 px-4 md:px-8 bg-gradient-to-b from-neutral-50 to-white">
+      <div className="max-w-6xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          <motion.h2
+            className="text-3xl md:text-4xl font-bold mb-4"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3, duration: 0.5 }}
+            viewport={{ once: true }}
+          >
+            Contoh Twibbon
+          </motion.h2>
+
+          <motion.p
+            className="text-lg text-neutral-600 max-w-2xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+            viewport={{ once: true }}
+          >
+            Lihat beberapa hasil twibbon yang dibuat menggunakan platform kita
+          </motion.p>
+        </motion.div>
+
+        <motion.div
+          className="flex flex-wrap justify-center gap-2 mb-10"
+          initial={{ opacity: 0, y: 10 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.5, duration: 0.5 }}
+          viewport={{ once: true }}
+        >
+          <motion.button
+            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+              selectedCategory === null
+                ? "bg-primary-500 text-white"
+                : "bg-white text-neutral-600 hover:bg-neutral-100 border border-neutral-200"
+            }`}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => setSelectedCategory(null)}
+          >
+            Semua
+          </motion.button>
+          {categories.map((category) => (
+            <motion.button
+              key={category}
+              className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                selectedCategory === category
+                  ? "bg-primary-500 text-white"
+                  : "bg-white text-neutral-600 hover:bg-neutral-100 border border-neutral-200"
+              }`}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => setSelectedCategory(category)}
+            >
+              {category}
+            </motion.button>
+          ))}
+        </motion.div>
+
+        <motion.div
+          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          {examples.map((example, index) => (
+            <motion.div
+              key={index}
+              className="relative rounded-xl overflow-hidden shadow-md bg-white border border-neutral-200 aspect-square group"
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              whileHover={{
+                y: -10,
+                boxShadow: "0 20px 40px -12px rgba(0, 0, 0, 0.15)",
+                transition: { type: "spring", stiffness: 300, damping: 20 },
+              }}
+            >
+              <motion.div
+                className="w-full h-full"
+                animate={{
+                  scale: hoveredIndex === index ? 1.05 : 1,
+                }}
+                transition={{ duration: 0.4 }}
+              >
+                <Image
+                  src={example.image || "/placeholder.svg"}
+                  alt={example.title}
+                  fill
+                  className="object-cover"
+                />
+              </motion.div>
+
+              <motion.div
+                className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent flex flex-col justify-end p-6"
+                variants={overlayVariants}
+                initial="hidden"
+                animate={hoveredIndex === index ? "visible" : "hidden"}
+              >
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={
+                    hoveredIndex === index
+                      ? { opacity: 1, y: 0 }
+                      : { opacity: 0, y: 20 }
+                  }
+                  transition={{ duration: 0.3, delay: 0.1 }}
+                >
+                  <div className="text-xs font-medium text-primary-300 mb-1">
+                    {example.category}
+                  </div>
+                  <h3 className="text-xl font-bold text-white mb-3">
+                    {example.title}
+                  </h3>
+                </motion.div>
+              </motion.div>
+
+              <div className="absolute top-4 left-4 px-3 py-1 bg-white/80 backdrop-blur-sm rounded-full text-xs font-medium text-neutral-800">
+                {example.category}
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/app/id/_components/parts/features.tsx b/src/app/id/_components/parts/features.tsx
new file mode 100644
index 0000000..0a4870f
--- /dev/null
+++ b/src/app/id/_components/parts/features.tsx
@@ -0,0 +1,200 @@
+import {
+  BadgeCheck,
+  ImagePlus,
+  MousePointerClick,
+  Shield,
+  Smartphone,
+} from "lucide-react";
+import { motion } from "motion/react";
+
+export const Features = () => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.3,
+      },
+    },
+  };
+
+  const featureVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 50,
+        damping: 10,
+      },
+    },
+  };
+
+  const iconContainerVariants = {
+    hidden: { opacity: 0, scale: 0.5, rotate: -10 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      rotate: 0,
+      transition: {
+        type: "spring",
+        stiffness: 100,
+        delay: 0.2,
+      },
+    },
+  };
+
+  const pulseVariants = {
+    hidden: { scale: 0.8, opacity: 0 },
+    visible: {
+      scale: [0.8, 1.2, 0.8],
+      opacity: [0, 0.5, 0],
+      transition: {
+        repeat: Number.POSITIVE_INFINITY,
+        duration: 2,
+        ease: "easeInOut",
+        delay: 1,
+      },
+    },
+  };
+
+  const features = [
+    {
+      title: "100% Gratis, Tanpa Watermark",
+      description:
+        "Tidak seperti layanan lainnya, kita tidak menambahkan watermark ke twibbon kalian. Twibbon kalian tetap terlihat profesional dan bersih.",
+      icon: <BadgeCheck className="w-6 h-6" />,
+      color: "bg-gradient-to-br from-primary-500 to-primary-700",
+    },
+    {
+      title: "Full Client-side",
+      description:
+        "Logika aplikasi ini terjadi di sisi browser tanpa bergantung pada server backend, data sama sekali tidak meninggalkan perangkat kalian.",
+      icon: <Shield className="w-6 h-6" />,
+      color: "bg-gradient-to-br from-primary-500 to-primary-700",
+    },
+    {
+      title: "Mudah Digunakan",
+      description:
+        "Desain antarmuka kami membuat pembuatan twibbon menjadi mudah hanya dalam beberapa klik, tampa membutuhkan skil desain.",
+      icon: <MousePointerClick className="w-6 h-6" />,
+      color: "bg-gradient-to-br from-primary-500 to-primary-700",
+    },
+    {
+      title: "Frame Kustom",
+      description:
+        "Unggah desain frame-mu sendiri untuk membuat twibbon yang mencolok.",
+      icon: <ImagePlus className="w-6 h-6" />,
+      color: "bg-gradient-to-br from-primary-500 to-primary-700",
+    },
+    {
+      title: "Hasil Kualitas Tinggi",
+      description:
+        "Dapatkan gambar kualitas tinggi, cocok untuk dibagikan ke platform media sosial apasaja.",
+      icon: <Smartphone className="w-6 h-6" />,
+      color: "bg-gradient-to-br from-primary-500 to-primary-700",
+    },
+  ];
+
+  return (
+    <section className="w-full py-24 px-4 md:px-8 bg-gradient-to-b from-neutral-50 to-white">
+      <div className="max-w-6xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          <motion.h2
+            className="text-3xl md:text-4xl font-bold mb-4"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3, duration: 0.5 }}
+            viewport={{ once: true }}
+          >
+            Kenapa Pilih Moklet Twibbon
+          </motion.h2>
+
+          <motion.p
+            className="text-lg text-neutral-600 max-w-2xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+            viewport={{ once: true }}
+          >
+            Platform kami menawarkan beberapa kelebihan dari platform pembuat
+            lainnya
+          </motion.p>
+        </motion.div>
+
+        <motion.div
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          {features.map((feature, index) => (
+            <motion.div
+              key={index}
+              className="bg-white rounded-xl p-6 border border-neutral-100 shadow-sm"
+              variants={featureVariants}
+            >
+              <div className="flex items-start gap-5">
+                <div className="relative">
+                  <motion.div
+                    className={`w-14 h-14 ${feature.color} rounded-xl flex items-center justify-center text-white`}
+                    variants={iconContainerVariants}
+                  >
+                    {feature.icon}
+                  </motion.div>
+
+                  {/* Pulse effect */}
+                  <motion.div
+                    className={`absolute inset-0 ${feature.color} rounded-xl`}
+                    variants={pulseVariants}
+                  />
+
+                  {/* Animated particles */}
+                  {[...Array(3)].map((_, i) => (
+                    <motion.div
+                      key={i}
+                      className="absolute w-1.5 h-1.5 rounded-full bg-white"
+                      style={{
+                        top: `${20 + Math.random() * 60}%`,
+                        left: `${20 + Math.random() * 60}%`,
+                      }}
+                      initial={{ opacity: 0, scale: 0 }}
+                      animate={{
+                        opacity: [0, 0.8, 0],
+                        scale: [0, 1, 0],
+                        x: [0, (Math.random() - 0.5) * 20],
+                        y: [0, (Math.random() - 0.5) * 20],
+                      }}
+                      transition={{
+                        duration: 1.5,
+                        delay: 1 + index * 0.2 + i * 0.3,
+                        repeat: Number.POSITIVE_INFINITY,
+                        repeatDelay: 3,
+                      }}
+                    />
+                  ))}
+                </div>
+
+                <div className="flex-1">
+                  <h3 className="text-xl font-semibold mb-2">
+                    {feature.title}
+                  </h3>
+                  <p className="text-neutral-600">{feature.description}</p>
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/app/id/_components/parts/hero.tsx b/src/app/id/_components/parts/hero.tsx
new file mode 100644
index 0000000..c8ae841
--- /dev/null
+++ b/src/app/id/_components/parts/hero.tsx
@@ -0,0 +1,257 @@
+import type React from "react";
+
+import { ArrowRight, Upload } from "lucide-react";
+import { motion } from "motion/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRef, useState } from "react";
+import { LinkButton } from "../global/button";
+
+const AnimatedTwibbonPreview = () => {
+  const profileVariants = {
+    initial: { scale: 0.8, opacity: 0 },
+    animate: {
+      scale: 1,
+      opacity: 1,
+      transition: { duration: 0.8, delay: 0.3 },
+    },
+  };
+
+  const frameVariants = {
+    initial: { scale: 1.2, opacity: 0 },
+    animate: {
+      scale: 1,
+      opacity: 1,
+      transition: { duration: 0.8, delay: 0.8 },
+    },
+  };
+
+  const floatingVariants = {
+    animate: {
+      y: [0, -10, 0],
+      transition: {
+        repeat: Number.POSITIVE_INFINITY,
+        duration: 3,
+        ease: "easeInOut",
+      },
+    },
+  };
+
+  return (
+    <div className="relative h-full w-full flex items-center justify-center">
+      <div className="absolute inset-0">
+        {[...Array(12)].map((_, i) => (
+          <motion.div
+            key={i}
+            className="absolute rounded-full bg-primary-300/30"
+            style={{
+              width: Math.random() * 8 + 4,
+              height: Math.random() * 8 + 4,
+              left: `${Math.random() * 100}%`,
+              top: `${Math.random() * 100}%`,
+            }}
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: [0, 0.5, 0],
+              scale: [1, 1.3, 1],
+            }}
+            transition={{
+              duration: Math.random() * 3 + 2,
+              repeat: Number.POSITIVE_INFINITY,
+              delay: Math.random() * 2,
+            }}
+          />
+        ))}
+      </div>
+
+      <motion.div
+        className="relative"
+        animate="animate"
+        variants={floatingVariants}
+      >
+        <motion.div
+          className="w-56 h-56 rounded-full overflow-hidden relative"
+          initial="initial"
+          animate="animate"
+          variants={profileVariants}
+        >
+          <Image
+            src="/placeholder.jpg"
+            alt="Profile picture"
+            fill
+            className="object-cover aspect-square"
+          />
+        </motion.div>
+
+        <motion.div
+          className="absolute inset-0 w-56 h-56"
+          initial="initial"
+          animate="animate"
+          variants={frameVariants}
+        >
+          <svg viewBox="0 0 200 200" className="w-full h-full">
+            <defs>
+              <linearGradient
+                id="frameGradient"
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="100%"
+              >
+                <stop offset="0%" stopColor="rgba(59, 130, 246, 0.7)" />
+                <stop offset="100%" stopColor="rgba(147, 51, 234, 0.7)" />
+              </linearGradient>
+            </defs>
+            <circle
+              cx="100"
+              cy="100"
+              r="95"
+              fill="none"
+              stroke="url(#frameGradient)"
+              strokeWidth="10"
+            />
+          </svg>
+        </motion.div>
+
+        <motion.div
+          className="absolute inset-0 flex items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: [0, 0.4, 0],
+            scale: [0.9, 1.05, 0.9],
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 4,
+            repeat: Number.POSITIVE_INFINITY,
+            repeatType: "loop",
+            ease: "easeInOut",
+          }}
+        >
+          <div className="w-64 h-64 rounded-full border-2 border-primary-300/50 border-t-primary-500/80" />
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+};
+
+export const Hero = () => {
+  const [fileName, setFileName] = useState<string>();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target?.files?.[0];
+
+    if (file) {
+      setFileName(file.name);
+
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const result = reader.result as string;
+        localStorage.setItem("customFrameUrl", result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  return (
+    <section className="w-full py-16 md:py-24 px-4 md:px-8 bg-gradient-to-b from-white to-primary-50/30">
+      <div className="max-w-6xl mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+          {/* Content side */}
+          <motion.div
+            className="space-y-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <motion.h1
+              className="text-4xl md:text-5xl font-bold tracking-tight"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.1 }}
+            >
+              <span className="text-primary-500">Moklet Twibbon</span>
+              <span className="block mt-1">
+                Buat Twibbon Gratis Tanpa Watermark
+              </span>
+            </motion.h1>
+
+            <motion.p
+              className="text-lg text-neutral-600 max-w-xl"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+            >
+              Buat twibbon kamu tanpa watermark sekarang! Powered by{" "}
+              <Link
+                target="_blank"
+                href="https://dev.moklet.org/"
+                className="text-primary-500 font-medium hover:underline"
+              >
+                Moklet Developers
+              </Link>
+              .
+            </motion.p>
+
+            <motion.div
+              className="flex flex-col sm:flex-row gap-4 pt-2"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.3 }}
+            >
+              <input
+                type="file"
+                id="frame"
+                name="frame"
+                accept="image/png"
+                onChange={handleFileChange}
+                ref={fileInputRef}
+                hidden
+              />
+
+              <motion.label
+                htmlFor="frame"
+                className="flex items-center justify-center gap-2 truncate py-3 px-5 rounded-lg text-base font-medium bg-white border border-primary-200 text-primary-700 hover:bg-primary-50 cursor-pointer transition-colors shadow-sm max-w-full sm:max-w-xs"
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <Upload size={18} /> {fileName ?? "Pilih frame"}
+              </motion.label>
+
+              {fileName && (
+                <motion.div
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <LinkButton
+                    variant="primary"
+                    className="w-full sm:w-auto text-center py-3 px-5 rounded-lg shadow-md"
+                    href="/id/go?slug=custom-twibbon"
+                  >
+                    Buat twibbon <ArrowRight className="ml-2" size={18} />
+                  </LinkButton>
+                </motion.div>
+              )}
+            </motion.div>
+          </motion.div>
+
+          {/* Preview side */}
+          <motion.div
+            className="h-[400px] relative w-full rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-primary-50 to-primary-100 border border-primary-100"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <AnimatedTwibbonPreview />
+            <div className="absolute bottom-0 inset-x-0 h-24 bg-gradient-to-t from-primary-500/20 to-transparent flex items-end p-6">
+              <p className="text-primary-500 text-lg font-bold">
+                Twibbon Profesional dengan Instan
+              </p>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/app/id/_components/parts/how-it-works.tsx b/src/app/id/_components/parts/how-it-works.tsx
new file mode 100644
index 0000000..96c5dcc
--- /dev/null
+++ b/src/app/id/_components/parts/how-it-works.tsx
@@ -0,0 +1,213 @@
+import { ArrowRight, Download, Edit, FileImage } from "lucide-react";
+import { motion } from "motion/react";
+
+export const HowItWorks = () => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3,
+      },
+    },
+  };
+
+  const stepVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        type: "spring",
+        stiffness: 100,
+        damping: 15,
+      },
+    },
+  };
+
+  const iconVariants = {
+    hidden: { scale: 0, rotate: -45 },
+    visible: {
+      scale: 1,
+      rotate: 0,
+      transition: {
+        type: "spring",
+        stiffness: 200,
+        delay: 0.3,
+      },
+    },
+  };
+
+  const lineVariants = {
+    hidden: { width: 0 },
+    visible: {
+      width: "100%",
+      transition: {
+        duration: 0.8,
+        ease: "easeInOut",
+        delay: 0.5,
+      },
+    },
+  };
+
+  const steps = [
+    {
+      title: "Unggah Frame-mu",
+      description: "Pilih file PNG yang akan menimpa gambarmu",
+      icon: <FileImage className="w-6 h-6" />,
+      color: "from-blue-500 to-indigo-600",
+    },
+    {
+      title: "Sesuaikan",
+      description: "Sesuaikan gambarmu dengan frame yang sudah di-upload",
+      icon: <Edit className="w-6 h-6" />,
+      color: "from-purple-500 to-pink-600",
+    },
+    {
+      title: "Download & Bagikan",
+      description:
+        "Unduh twibbon tanpa watermark-mu dan bagikan ke media sosial-mu",
+      icon: <Download className="w-6 h-6" />,
+      color: "from-emerald-500 to-teal-600",
+    },
+  ];
+
+  return (
+    <section className="w-full py-24 px-4 md:px-8 bg-gradient-to-b from-white to-neutral-50">
+      <div className="max-w-6xl mx-auto">
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          <motion.h2
+            className="text-3xl md:text-4xl font-bold mb-4"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3, duration: 0.5 }}
+            viewport={{ once: true }}
+          >
+            Bagaimana ini Bekerja
+          </motion.h2>
+
+          <motion.p
+            className="text-lg text-neutral-600 max-w-2xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+            viewport={{ once: true }}
+          >
+            Buat twibbon kustom-mu dalam 3 langkah mudah
+          </motion.p>
+        </motion.div>
+
+        <motion.div
+          className="relative"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          {/* Connection lines for desktop */}
+          <div className="hidden md:block absolute top-1/2 left-0 right-0 h-0.5 bg-neutral-200 -translate-y-1/2 z-0">
+            <motion.div
+              className="h-full bg-gradient-to-r from-primary-300 via-primary-500 to-primary-700"
+              variants={lineVariants}
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative z-10">
+            {steps.map((step, index) => (
+              <motion.div
+                key={index}
+                className="relative"
+                variants={stepVariants}
+              >
+                <motion.div
+                  className="bg-white p-8 rounded-xl shadow-sm border border-neutral-100 h-full"
+                  whileHover={{
+                    y: -8,
+                    boxShadow: "0 20px 40px -12px rgba(0, 0, 0, 0.1)",
+                    transition: { type: "spring", stiffness: 300, damping: 20 },
+                  }}
+                >
+                  <div className="relative mb-6">
+                    <motion.div
+                      className="absolute z-[999] -top-4 -left-4 w-8 h-8 rounded-full bg-primary-500 shadow-md flex items-center justify-center text-sm font-bold text-white border border-white"
+                      initial={{ opacity: 0, scale: 0 }}
+                      whileInView={{ opacity: 1, scale: 1 }}
+                      transition={{
+                        delay: 0.6 + index * 0.2,
+                        duration: 0.4,
+                        type: "spring",
+                      }}
+                      viewport={{ once: true }}
+                    >
+                      {index + 1}
+                    </motion.div>
+
+                    <motion.div
+                      className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${step.color} flex items-center justify-center text-white mb-5`}
+                      variants={iconVariants}
+                    >
+                      {step.icon}
+
+                      <motion.div
+                        className="absolute inset-0"
+                        initial="hidden"
+                        whileInView="visible"
+                        viewport={{ once: true }}
+                      >
+                        {[...Array(4)].map((_, i) => (
+                          <motion.div
+                            key={i}
+                            className="absolute w-1.5 h-1.5 rounded-full bg-white/80"
+                            style={{
+                              top: `${20 + Math.random() * 60}%`,
+                              left: `${20 + Math.random() * 60}%`,
+                            }}
+                            initial={{ opacity: 0, scale: 0 }}
+                            animate={{
+                              opacity: [0, 0.8, 0],
+                              scale: [0, 1, 0],
+                              x: [0, (Math.random() - 0.5) * 30],
+                              y: [0, (Math.random() - 0.5) * 30],
+                            }}
+                            transition={{
+                              duration: 2,
+                              delay: 1 + index * 0.3 + i * 0.3,
+                              repeat: Number.POSITIVE_INFINITY,
+                              repeatDelay: 3,
+                            }}
+                          />
+                        ))}
+                      </motion.div>
+                    </motion.div>
+                  </div>
+
+                  <h3 className="text-xl font-semibold mb-3">{step.title}</h3>
+                  <p className="text-neutral-600 mb-4">{step.description}</p>
+                </motion.div>
+
+                {index < steps.length - 1 && (
+                  <motion.div
+                    className="flex justify-center md:hidden my-2"
+                    initial={{ opacity: 0, y: -10 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.5 + index * 0.2 }}
+                    viewport={{ once: true }}
+                  >
+                    <ArrowRight className="text-primary-700 w-5 h-5 rotate-90" />
+                  </motion.div>
+                )}
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/app/id/_components/sonner-wrapper.tsx b/src/app/id/_components/sonner-wrapper.tsx
new file mode 100644
index 0000000..70cb891
--- /dev/null
+++ b/src/app/id/_components/sonner-wrapper.tsx
@@ -0,0 +1,24 @@
+import {
+  FaCheckCircle,
+  FaExclamationCircle,
+  FaInfoCircle,
+} from "react-icons/fa";
+import { FaCircleXmark } from "react-icons/fa6";
+import { Toaster } from "sonner";
+
+export default function SonnerWrapper() {
+  return (
+    <Toaster
+      duration={1500} // 1.5 seconds
+      pauseWhenPageIsHidden
+      theme="light"
+      toastOptions={{ className: "shadow-sm shadow-white bg-white/70" }}
+      icons={{
+        success: <FaCheckCircle className="text-green-500" size={20} />,
+        error: <FaCircleXmark className="text-red-500" size={20} />,
+        info: <FaInfoCircle className="text-blue-500" size={20} />,
+        warning: <FaExclamationCircle className="text-yellow-500" size={20} />,
+      }}
+    />
+  );
+}
diff --git a/src/app/id/go/_components/form/action-buttons.tsx b/src/app/id/go/_components/form/action-buttons.tsx
new file mode 100644
index 0000000..2615061
--- /dev/null
+++ b/src/app/id/go/_components/form/action-buttons.tsx
@@ -0,0 +1,60 @@
+import { Button } from "@/app/_components/global/button";
+import React from "react";
+import { FaCopy, FaDownload, FaShare, FaSpinner } from "react-icons/fa6";
+
+interface ActionButtonsProps {
+  fileName: string | undefined;
+  isDownloading: boolean;
+  isLoading: boolean;
+  caption?: string;
+  onDownload: () => void;
+  onShare: () => void;
+}
+
+const ActionButtons: React.FC<ActionButtonsProps> = ({
+  fileName,
+  isDownloading,
+  isLoading,
+  caption,
+  onDownload,
+  onShare,
+}) => {
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4 mt-4">
+      <Button
+        onClick={onDownload}
+        variant="primary"
+        className="flex items-center gap-2 !py-3 !px-6 shadow hover:shadow-md !rounded-lg transition-all duration-200 transform hover:translate-y-[-2px]"
+        disabled={!fileName || isDownloading || isLoading}
+      >
+        {isDownloading ? (
+          <FaSpinner className="animate-spin" />
+        ) : (
+          <FaDownload />
+        )}{" "}
+        Unduh Gambar
+      </Button>
+      {caption && (
+        <Button
+          variant="quartiary"
+          className="copy-btn flex items-center gap-2 !py-3 !px-6 shadow hover:shadow-md !rounded-lg transition-all duration-200 transform hover:translate-y-[-2px]"
+          data-clipboard-text={decodeURIComponent(caption)}
+          data-clipboard-action="copy"
+          disabled={isLoading}
+        >
+          <FaCopy /> Salin Caption
+        </Button>
+      )}
+      <Button
+        onClick={onShare}
+        variant="secondary"
+        className="flex items-center gap-2 !py-3 !px-6 shadow hover:shadow-md !rounded-lg transition-all duration-200 transform hover:translate-y-[-2px]"
+        disabled={!fileName || isLoading}
+      >
+        <FaShare /> Bagikan
+      </Button>
+    </div>
+  );
+};
+
+export default ActionButtons;
diff --git a/src/app/id/go/_components/form/canvas.tsx b/src/app/id/go/_components/form/canvas.tsx
new file mode 100644
index 0000000..7f16eee
--- /dev/null
+++ b/src/app/id/go/_components/form/canvas.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { forwardRef, CSSProperties, useEffect, useState } from "react";
+import cn from "@/lib/clsx";
+
+interface CanvasProps {
+  width: number;
+  height: number;
+  canvasid: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const Canvas = forwardRef<HTMLCanvasElement, CanvasProps>(({ width, height, canvasid, className, style }, ref) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div
+      className={cn("relative canvas-container transition-all duration-500", isVisible ? "opacity-100" : "opacity-0", className)}
+      style={{
+        width: `${width}px`,
+        height: `${height}px`,
+        ...style,
+      }}
+    >
+      <canvas id={canvasid} width={width} height={height} ref={ref} className={cn("rounded-lg transition-all duration-500", isVisible ? "scale-100" : "scale-95")}></canvas>
+    </div>
+  );
+});
+
+Canvas.displayName = "Canvas";
+
+export default Canvas;
diff --git a/src/app/id/go/_components/form/editing-controls.tsx b/src/app/id/go/_components/form/editing-controls.tsx
new file mode 100644
index 0000000..957884b
--- /dev/null
+++ b/src/app/id/go/_components/form/editing-controls.tsx
@@ -0,0 +1,173 @@
+import { Button } from "@/app/_components/global/button";
+import React from "react";
+import { FaFileImage, FaRedo, FaSearch, FaUndo } from "react-icons/fa";
+import { MdBrightness6, MdContrast } from "react-icons/md";
+
+interface EditingControlsProps {
+  scale: number;
+  brightness: number;
+  contrast: number;
+  historyIndex: number;
+  editHistoryLength: number;
+  isLoading: boolean;
+  onScaleChange: (scale: number) => void;
+  onBrightnessChange: (brightness: number) => void;
+  onContrastChange: (contrast: number) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onChangeImage: () => void;
+}
+
+const EditingControls: React.FC<EditingControlsProps> = ({
+  scale,
+  brightness,
+  contrast,
+  historyIndex,
+  editHistoryLength,
+  isLoading,
+  onScaleChange,
+  onBrightnessChange,
+  onContrastChange,
+  onUndo,
+  onRedo,
+  onChangeImage,
+}) => {
+  return (
+    <>
+      <div className="flex justify-center gap-3 lg:mt-2">
+        <Button
+          variant="quartiary"
+          onClick={onUndo}
+          disabled={historyIndex <= 0 || isLoading}
+          className="!rounded-md !px-3 !py-2 shadow-sm hover:shadow transition-all duration-200"
+          title="Undo"
+        >
+          <FaUndo />
+        </Button>
+        <Button
+          variant="quartiary"
+          onClick={onRedo}
+          disabled={historyIndex >= editHistoryLength - 1 || isLoading}
+          className="!rounded-md !px-3 !py-2 shadow-sm hover:shadow transition-all duration-200"
+          title="Redo"
+        >
+          <FaRedo />
+        </Button>
+      </div>
+
+      <div className="w-full bg-gray-50 p-4 rounded-xl shadow-inner">
+        <div className="grid grid-cols-1 gap-5">
+          {/* Zoom control */}
+          <div className="flex flex-col">
+            <div className="flex justify-between items-center mb-2">
+              <label
+                htmlFor="zoom"
+                className="text-sm font-medium text-slate-700 flex items-center"
+              >
+                <FaSearch className="h-4 w-4 mr-1" />
+                Zoom
+              </label>
+              <span className="text-sm bg-primary-100 text-primary-600 px-2 py-0.5 rounded-full font-medium">
+                {(Math.round((scale + Number.EPSILON) * 100) / 100).toFixed(2)}x
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="quartiary"
+                onClick={() => onScaleChange(Math.max(0.2, scale - 0.05))}
+                className="!rounded-lg !px-2 !py-1 !text-sm !bg-white shadow-sm"
+              >
+                -
+              </Button>
+              <input
+                id="zoom"
+                type="range"
+                min="0.2"
+                max="3"
+                step="0.01"
+                value={scale}
+                onChange={(e) =>
+                  onScaleChange(parseFloat(e.currentTarget.value))
+                }
+                className="w-full h-2 flex-1 bg-primary-100 rounded-lg appearance-none cursor-pointer"
+              />
+              <Button
+                variant="quartiary"
+                onClick={() => onScaleChange(Math.min(3, scale + 0.05))}
+                className="!rounded-lg !px-2 !py-1 !text-sm !bg-white shadow-sm"
+              >
+                +
+              </Button>
+            </div>
+          </div>
+
+          {/* Brightness and contrast controls */}
+          <div className="flex gap-2 md:flex-row flex-col w-full">
+            <div className="flex flex-col">
+              <div className="flex justify-between items-center mb-2">
+                <label
+                  htmlFor="brightness"
+                  className="text-sm font-medium text-slate-700 flex items-center"
+                >
+                  <MdBrightness6 className="mr-1" /> Kecerahan
+                </label>
+                <span className="text-sm bg-primary-100 text-primary-600 px-2 py-0.5 rounded-full font-medium">
+                  {brightness.toFixed(2)}
+                </span>
+              </div>
+              <input
+                id="brightness"
+                type="range"
+                min="-0.5"
+                max="0.5"
+                step="0.01"
+                value={brightness}
+                onChange={(e) =>
+                  onBrightnessChange(parseFloat(e.currentTarget.value))
+                }
+                className="w-full h-2 bg-primary-100 rounded-lg appearance-none cursor-pointer"
+              />
+            </div>
+            <div className="flex flex-col">
+              <div className="flex justify-between items-center mb-2">
+                <label
+                  htmlFor="contrast"
+                  className="text-sm font-medium text-slate-700 flex items-center"
+                >
+                  <MdContrast className="mr-1" /> Kontras
+                </label>
+                <span className="text-sm bg-primary-100 text-primary-600 px-2 py-0.5 rounded-full font-medium">
+                  {contrast.toFixed(2)}
+                </span>
+              </div>
+              <input
+                id="contrast"
+                type="range"
+                min="-0.5"
+                max="0.5"
+                step="0.01"
+                value={contrast}
+                onChange={(e) =>
+                  onContrastChange(parseFloat(e.currentTarget.value))
+                }
+                className="w-full h-2 bg-primary-100 rounded-lg appearance-none cursor-pointer"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-center mt-3">
+        <Button
+          variant="quartiary"
+          onClick={onChangeImage}
+          className="flex items-center gap-2 !py-2 !px-4 !rounded-lg text-sm shadow-sm hover:shadow transition-all duration-200"
+        >
+          <FaFileImage size={14} /> Ganti Gambar
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default EditingControls;
diff --git a/src/app/id/go/_components/form/help-section.tsx b/src/app/id/go/_components/form/help-section.tsx
new file mode 100644
index 0000000..8d190df
--- /dev/null
+++ b/src/app/id/go/_components/form/help-section.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import type React from "react";
+
+import { motion } from "motion/react";
+import { useState } from "react";
+import { FaDownload } from "react-icons/fa";
+import { MdFileUpload, MdSettings, MdShare } from "react-icons/md";
+
+type HelpStep = {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+};
+
+const HelpSection = () => {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  const steps: HelpStep[] = [
+    {
+      icon: <MdFileUpload size={24} />,
+      title: "Unggah",
+      description: "Unggah gambar untuk memulai",
+    },
+    {
+      icon: <MdSettings size={24} />,
+      title: "Sesuaikan",
+      description: "Sesuaikan posisi dan penampilan-nya sesuai selera-mu",
+    },
+    {
+      icon: <FaDownload size={24} />,
+      title: "Unduh",
+      description: "Simpan hasil gambar-mu ke perangkat mu.",
+    },
+    {
+      icon: <MdShare size={24} />,
+      title: "Bagikan",
+      description: "Bagikan twibbon-mu ke media sosial",
+    },
+  ];
+
+  return (
+    <section
+      className="mt-6 text-center p-6 rounded-xl shadow-sm"
+      aria-labelledby="help-section-title"
+    >
+      <h2
+        id="help-section-title"
+        className="text-xl font-bold text-primary-700 mb-4"
+      >
+        Cara Menggunakan
+      </h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 text-left">
+        {steps.map((step, index) => (
+          <motion.div
+            key={index}
+            className="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm border border-primary-100 hover:shadow-md transition-shadow"
+            onMouseEnter={() => setHoveredIndex(index)}
+            onMouseLeave={() => setHoveredIndex(null)}
+            whileHover={{ y: -5 }}
+            transition={{ type: "spring", stiffness: 300 }}
+          >
+            <div
+              className={`
+                bg-primary-100 text-primary-600 rounded-full p-3 mb-3
+                ${hoveredIndex === index ? "bg-primary-200" : ""}
+                transition-colors duration-300
+              `}
+              aria-hidden="true"
+            >
+              {step.icon}
+            </div>
+            <h3 className="font-medium text-primary-800 mb-1">{step.title}</h3>
+            <p className="text-sm text-slate-600 text-center">
+              {step.description}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+
+      <p className="mt-5 text-sm text-slate-500 max-w-lg mx-auto">
+        Butuh bantuan?{" "}
+        <a href="#" className="text-primary-600 hover:underline font-medium">
+          Hubungi Kami
+        </a>
+        .
+      </p>
+    </section>
+  );
+};
+
+export default HelpSection;
diff --git a/src/app/id/go/_components/form/hidden-file-input.tsx b/src/app/id/go/_components/form/hidden-file-input.tsx
new file mode 100644
index 0000000..4cc4fbb
--- /dev/null
+++ b/src/app/id/go/_components/form/hidden-file-input.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+interface HiddenFileInputProps {
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const HiddenFileInput: React.FC<HiddenFileInputProps> = ({ onChange }) => {
+  return (
+    <div className="hidden">
+      <input
+        type="file"
+        id="foto"
+        accept="image/png, image/jpeg, image/jpg"
+        onChange={onChange}
+      />
+    </div>
+  );
+};
+
+export default HiddenFileInput;
diff --git a/src/app/id/go/_components/form/index.tsx b/src/app/id/go/_components/form/index.tsx
new file mode 100644
index 0000000..53dd2f0
--- /dev/null
+++ b/src/app/id/go/_components/form/index.tsx
@@ -0,0 +1,412 @@
+"use client";
+
+import { H1 } from "@/app/_components/global/text";
+import { OBJECT_NAMES, useTwibbonCanvas } from "@/hooks/useTwibbonCanvas";
+import ClipboardJS from "clipboard";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { Props, useValidateFrameUrl } from "@/hooks/useValidateFrameUrl";
+import ActionButtons from "./action-buttons";
+import EditingControls from "./editing-controls";
+import HelpSection from "./help-section";
+import HiddenFileInput from "./hidden-file-input";
+import LoadingOverlay from "./loading-overlay";
+import UploadArea from "./upload-area";
+
+interface EditHistoryItem {
+  scale: number;
+  brightness: number;
+  contrast: number;
+}
+
+/**
+ * Helper function to trigger a download of a data URI
+ * @param uri - Data URI of the image to download
+ * @param name - Filename for the downloaded file
+ */
+function downloadURI(uri: string, name: string) {
+  const link = document.createElement("a");
+  link.download = name;
+  link.href = uri;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+/**
+ * Twibbon Form component for image editing with frame overlay
+ *
+ * This component handles both validation of the frame URL and provides a UI for users to:
+ * - Upload an image
+ * - Adjust the image (scale, brightness, contrast)
+ * - Download the resulting image with a frame overlay
+ * - Share the image on social media
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export default function TwibbonForm({ searchParams }: Readonly<Props>) {
+  // Validate frame URL or retrieve from localStorage
+  const validatedParams = useValidateFrameUrl(searchParams);
+
+  // If there's no valid frame URL, return error message
+  if (!validatedParams?.frameUrl) {
+    return <H1>There is no frame URL available!</H1>;
+  }
+
+  // Proceed with the form rendering using validated parameters
+  return <TwibbonFormContent searchParams={validatedParams} />;
+}
+
+/**
+ * Main content component for the Twibbon form
+ */
+const TwibbonFormContent = ({
+  searchParams,
+}: Readonly<{ searchParams: Props["searchParams"] }>) => {
+  const frameUrl = useMemo(() => {
+    const { frameUrl } = searchParams;
+    if (!frameUrl) return localStorage.getItem("customFrameUrl");
+
+    return frameUrl;
+  }, [searchParams]);
+  const canvasHook = useTwibbonCanvas();
+
+  // State management
+  const [fileName, setFileName] = useState<string>();
+  const [scale, setScale] = useState<number>(1);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [brightness, setBrightness] = useState<number>(0);
+  const [contrast, setContrast] = useState<number>(0);
+  const [historyIndex, setHistoryIndex] = useState<number>(0);
+  const [editHistory, setEditHistory] = useState<EditHistoryItem[]>([
+    { scale: 1, brightness: 0, contrast: 0 },
+  ]);
+
+  // Image filter application
+  const applyImageFilters = useCallback(
+    (brightnessValue: number, contrastValue: number) => {
+      if (!canvasHook.fabricCanvas) return;
+      canvasHook.applyImageFilters(brightnessValue, contrastValue);
+    },
+    [canvasHook]
+  );
+
+  // History management
+  const addToHistory = useCallback(
+    (scale: number, brightness: number, contrast: number) => {
+      setEditHistory((prev) => {
+        const newHistory = prev.slice(0, historyIndex + 1);
+        return [...newHistory, { scale, brightness, contrast }];
+      });
+      setHistoryIndex((prev) => prev + 1);
+    },
+    [historyIndex]
+  );
+
+  const handleUndo = useCallback(() => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      const {
+        scale: prevScale,
+        brightness: prevBrightness,
+        contrast: prevContrast,
+      } = editHistory[newIndex];
+
+      setScale(prevScale);
+      setBrightness(prevBrightness);
+      setContrast(prevContrast);
+      setHistoryIndex(newIndex);
+
+      applyImageFilters(prevBrightness, prevContrast);
+    }
+  }, [historyIndex, editHistory, applyImageFilters]);
+
+  const handleRedo = useCallback(() => {
+    if (historyIndex < editHistory.length - 1) {
+      const newIndex = historyIndex + 1;
+      const {
+        scale: nextScale,
+        brightness: nextBrightness,
+        contrast: nextContrast,
+      } = editHistory[newIndex];
+
+      setScale(nextScale);
+      setBrightness(nextBrightness);
+      setContrast(nextContrast);
+      setHistoryIndex(newIndex);
+
+      applyImageFilters(nextBrightness, nextContrast);
+    }
+  }, [historyIndex, editHistory, applyImageFilters]);
+
+  // Image adjustment handlers
+  const handleBrightnessChange = useCallback(
+    (value: number) => {
+      setBrightness(value);
+      applyImageFilters(value, contrast);
+      addToHistory(scale, value, contrast);
+    },
+    [scale, contrast, applyImageFilters, addToHistory]
+  );
+
+  const handleContrastChange = useCallback(
+    (value: number) => {
+      setContrast(value);
+      applyImageFilters(brightness, value);
+      addToHistory(scale, brightness, value);
+    },
+    [scale, brightness, applyImageFilters, addToHistory]
+  );
+
+  const handleScaleChange = useCallback(
+    (newScale: number) => {
+      setScale(newScale);
+      addToHistory(newScale, brightness, contrast);
+    },
+    [brightness, contrast, addToHistory]
+  );
+
+  // File handling
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      setIsDragging(false);
+
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        const file = e.dataTransfer.files[0];
+        if (/image.*/.exec(file.type)) {
+          setFileName(file.name);
+          setIsLoading(true);
+
+          canvasHook
+            .addFrame(URL.createObjectURL(file))
+            .then(() => {
+              setIsLoading(false);
+              // Reset filters and history
+              setEditHistory([{ scale, brightness: 0, contrast: 0 }]);
+              setHistoryIndex(0);
+              setBrightness(0);
+              setContrast(0);
+            })
+            .catch((error) => {
+              console.error(error);
+
+              setIsLoading(false);
+              toast.error("Failed to load image. Mohon coba kembali.");
+            });
+        } else {
+          toast.error("Please upload an image file.");
+        }
+      }
+    },
+    [canvasHook, scale]
+  );
+
+  const handleFileUpload = async (ev: React.ChangeEvent<HTMLInputElement>) => {
+    if (ev.currentTarget.files?.length) {
+      setFileName(ev.currentTarget.files[0].name);
+      setIsLoading(true);
+
+      try {
+        await canvasHook.addFrame(
+          URL.createObjectURL(ev.currentTarget.files[0])
+        );
+
+        setEditHistory([{ scale, brightness: 0, contrast: 0 }]);
+        setHistoryIndex(0);
+        setBrightness(0);
+        setContrast(0);
+      } catch (error) {
+        console.error(error);
+        toast.error("Failed to load image. Mohon coba kembali.");
+      } finally {
+        setIsLoading(false);
+      }
+    }
+  };
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  const handleUploadClick = useCallback(() => {
+    if (!fileName) {
+      document.getElementById("foto")?.click();
+    }
+  }, [fileName]);
+
+  // File operations
+  const handleDownload = useCallback(() => {
+    setIsDownloading(true);
+    try {
+      const data = canvasHook.toDataUrl();
+      if (data) {
+        downloadURI(data, `Twibbon ${searchParams?.title ?? "Moklet"}.jpg`);
+        toast.success("Gambar berhasil diunduh!");
+      } else {
+        toast.error("Gagal mengunduh. Mohon coba kembali.");
+      }
+    } catch (error) {
+      toast.error("Kesalahan terjadi. Mohon coba kembali.");
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [canvasHook, searchParams?.title]);
+
+  const handleShare = useCallback(async () => {
+    if (!canvasHook.fabricCanvas) {
+      toast.error("Canvas tidak tersedia. Silakan coba lagi.");
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const imageData = canvasHook.toDataUrl();
+
+      if (!imageData) {
+        toast.error("Gagal mendapatkan gambar. Silakan coba lagi.");
+        return;
+      }
+
+      const response = await fetch(imageData);
+      const blob = await response.blob();
+      const imageFile = new File(
+        [blob],
+        `Twibbon ${searchParams?.title ?? "Moklet"}.jpg`,
+        { type: "image/jpeg" }
+      );
+
+      const shareData: ShareData = {
+        files: [imageFile],
+        title: `Twibbon ${searchParams?.title ?? "Moklet"}`,
+      };
+
+      if (searchParams?.caption) {
+        shareData.text = searchParams.caption;
+      }
+
+      if (navigator.share && navigator.canShare(shareData)) {
+        await navigator.share(shareData);
+        toast.success("Berhasil membagikan twibbon!");
+      } else {
+        toast.error("Browser Anda tidak mendukung fitur berbagi.");
+      }
+    } catch (error) {
+      console.error("Error Membagikan:", error);
+      toast.error("Gagal membagikan gambar. Silakan coba lagi.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [canvasHook, searchParams?.title, searchParams?.caption]);
+
+  // Side effects
+  // Initialize clipboard for caption copying
+  useEffect(() => {
+    const clipboard = new ClipboardJS(".copy-btn");
+
+    clipboard.on("success", (e) => {
+      toast.success("Caption berhasil disalin!");
+      e.clearSelection();
+    });
+
+    clipboard.on("error", (e) => {
+      console.log(e);
+      toast.error("Gagal menyalin caption!");
+    });
+
+    return () => {
+      clipboard.destroy();
+    };
+  }, []);
+
+  // Initialize canvas with frame
+  useEffect(() => {
+    const initializeFrame = async () => {
+      if (!canvasHook.fabricCanvas || !frameUrl) return;
+
+      const hasBackground = canvasHook.fabricCanvas
+        .getObjects()
+        .some((obj) => (obj as any).name === OBJECT_NAMES.BACKGROUND);
+
+      if (hasBackground) return;
+
+      try {
+        setIsLoading(true);
+        await canvasHook.addBackground(frameUrl);
+      } catch (error) {
+        console.error("Gagal memuat background:", error);
+        toast.error("Gagal memuat frame. Mohon coba kembali.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    // Delay for safety in hydration/render timing
+    const timeout = setTimeout(initializeFrame, 50);
+
+    return () => clearTimeout(timeout);
+  }, [canvasHook.fabricCanvas, frameUrl]);
+
+  // Update canvas when scale changes
+  useEffect(() => {
+    canvasHook.setScaled(scale);
+  }, [scale, canvasHook]);
+
+  return (
+    <div className="flex flex-col gap-4 bg-white p-4 rounded-md shadow-sm">
+      <LoadingOverlay isLoading={isLoading} />
+      <div className="px-4 w-full max-w-[500px] lg:max-w-full mx-auto">
+        <UploadArea
+          isDragging={isDragging}
+          fileName={fileName}
+          canvasRef={canvasHook.canvasRef}
+          canvasWidth={canvasHook.recommendedSize.width}
+          canvasHeight={canvasHook.recommendedSize.height}
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onClick={handleUploadClick}
+        />
+      </div>
+
+      {fileName && (
+        <EditingControls
+          scale={scale}
+          brightness={brightness}
+          contrast={contrast}
+          historyIndex={historyIndex}
+          editHistoryLength={editHistory.length}
+          isLoading={isLoading}
+          onScaleChange={handleScaleChange}
+          onBrightnessChange={handleBrightnessChange}
+          onContrastChange={handleContrastChange}
+          onUndo={handleUndo}
+          onRedo={handleRedo}
+          onChangeImage={() => document.getElementById("foto")?.click()}
+        />
+      )}
+
+      <HiddenFileInput onChange={handleFileUpload} />
+
+      <ActionButtons
+        fileName={fileName}
+        isDownloading={isDownloading}
+        isLoading={isLoading}
+        caption={searchParams?.caption}
+        onDownload={handleDownload}
+        onShare={handleShare}
+      />
+
+      {!fileName && <HelpSection />}
+    </div>
+  );
+};
diff --git a/src/app/id/go/_components/form/loading-overlay.tsx b/src/app/id/go/_components/form/loading-overlay.tsx
new file mode 100644
index 0000000..1ac4ed0
--- /dev/null
+++ b/src/app/id/go/_components/form/loading-overlay.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { FaSpinner } from "react-icons/fa";
+import { P } from "@/app/_components/global/text";
+
+interface LoadingOverlayProps {
+  isLoading: boolean;
+}
+
+const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ isLoading }) => {
+  if (!isLoading) return null;
+
+  return (
+    <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center z-10 rounded-md">
+      <div className="text-white flex flex-col items-center">
+        <FaSpinner className="animate-spin text-4xl mb-2" />
+        <P className="text-white">Memuat...</P>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingOverlay;
diff --git a/src/app/id/go/_components/form/upload-area.tsx b/src/app/id/go/_components/form/upload-area.tsx
new file mode 100644
index 0000000..3fb3f93
--- /dev/null
+++ b/src/app/id/go/_components/form/upload-area.tsx
@@ -0,0 +1,71 @@
+import { P } from "@/app/_components/global/text";
+import cn from "@/lib/clsx";
+import React from "react";
+import { FaFileImage } from "react-icons/fa";
+import Canvas from "./canvas";
+
+interface UploadAreaProps {
+  isDragging: boolean;
+  fileName: string | undefined;
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+  canvasWidth: number;
+  canvasHeight: number;
+  onDrop: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDragOver: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDragLeave: () => void;
+  onClick: () => void;
+}
+
+const UploadArea: React.FC<UploadAreaProps> = ({
+  isDragging,
+  fileName,
+  canvasRef,
+  canvasWidth,
+  canvasHeight,
+  onDrop,
+  onDragOver,
+  onDragLeave,
+  onClick,
+}) => {
+  return (
+    <div
+      className={cn(
+        "z-[1000] relative flex justify-center items-center flex-col space-y-4 w-fit h-fit mx-auto rounded-lg transition-all duration-300 group",
+        isDragging
+          ? "bg-blue-50 border-2 border-dashed border-blue-300 scale-[0.99]"
+          : fileName
+          ? "border-none shadow-sm"
+          : "border-2 border-dashed border-gray-200 hover:border-primary-300 hover:bg-primary-50 cursor-pointer"
+      )}
+      onDrop={onDrop}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onClick={onClick}
+    >
+      <Canvas
+        width={canvasWidth}
+        height={canvasHeight}
+        canvasid="twibbon"
+        ref={canvasRef}
+        className="group-hover:opacity-95 transition-all duration-300"
+      />
+
+      {!fileName && canvasRef.current && (
+        <div className="absolute inset-0 flex -top-4 items-center justify-center bg-gray-50 bg-opacity-60 transition-opacity group-hover:bg-opacity-90 cursor-pointer">
+          <div className="text-center p-6 rounded-xl transition-all duration-300 transform group-hover:scale-105">
+            <div className="mb-3 bg-primary-100 text-primary-500 rounded-full p-3 inline-block">
+              <FaFileImage size={24} />
+            </div>
+            <P className="text-gray-600 font-medium">
+              Drag & drop gambar ke sini
+              <br />
+              atau klik untuk mengunggah
+            </P>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default UploadArea;
diff --git a/src/app/id/go/page.tsx b/src/app/id/go/page.tsx
new file mode 100644
index 0000000..6c42d2a
--- /dev/null
+++ b/src/app/id/go/page.tsx
@@ -0,0 +1,33 @@
+import { Props } from "@/hooks/useValidateFrameUrl";
+import { Metadata } from "next";
+import { Footer } from "../../_components/footer";
+import { H2 } from "../../_components/global/text";
+import TwibbonForm from "./_components/form";
+
+interface MetadataProps {
+  searchParams: { [key: string]: string | string[] | undefined };
+}
+
+export function generateMetadata({ searchParams }: MetadataProps): Metadata {
+  const title = searchParams.title?.toString();
+
+  return {
+    title: title ?? "Twibbon Kustom",
+  };
+}
+
+export default function GoPage({ searchParams }: Readonly<Props>) {
+  return (
+    <>
+      <section className="py-6 flex justify-center items-center flex-col space-y-4 md:space-y-6">
+        <H2 className="text-primary-500">
+          {searchParams?.title ?? "Twibbon Kustom"}
+        </H2>
+        <TwibbonForm searchParams={searchParams} />
+      </section>
+      <Footer />
+    </>
+  );
+}
+
+export const dynamic = "force-dynamic";
diff --git a/src/app/id/page.tsx b/src/app/id/page.tsx
new file mode 100644
index 0000000..2c8ef10
--- /dev/null
+++ b/src/app/id/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { Footer } from "./_components/footer";
+import { Examples } from "./_components/parts/examples";
+import { Features } from "./_components/parts/features";
+import { Hero } from "./_components/parts/hero";
+import { HowItWorks } from "./_components/parts/how-it-works";
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-white to-neutral-100">
+      <Hero />
+      <HowItWorks />
+      <Features />
+      <Examples />
+      <Footer />
+    </div>
+  );
+}