diff --git a/lp-code/package-lock.json b/lp-code/package-lock.json
index f4ee3fb..b104816 100644
--- a/lp-code/package-lock.json
+++ b/lp-code/package-lock.json
@@ -10,14 +10,19 @@
       "dependencies": {
         "@gsap/react": "^2.1.2",
         "@tailwindcss/vite": "^4.1.18",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "framer-motion": "^12.34.5",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.1.18"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -1915,6 +1920,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -2668,6 +2687,27 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3241,6 +3281,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "12.35.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.35.1.tgz",
+      "integrity": "sha512-rL8cLrjYZNShZqKV3U0Qj6Y5WDiZXYEM5giiTLfEqsIZxtspzMDCkKmrO5po76jWfvOg04+Vk+sfBvTD0iMmLw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.35.1",
+        "motion-utils": "^12.29.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3929,6 +3996,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.35.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.35.1.tgz",
+      "integrity": "sha512-7n6r7TtNOsH2UFSAXzTkfzOeO5616v9B178qBIjmu/WgEyJK0uqwytCEhwKBTuM/HJA40ptAw7hLFpxtPAMRZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.29.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4192,6 +4274,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4415,8 +4498,6 @@
         "node": ">=8"
       }
     },
-<<<<<<< Updated upstream
-=======
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -4434,7 +4515,6 @@
         "url": "https://github.com/sponsors/dcastil"
       }
     },
->>>>>>> Stashed changes
     "node_modules/tailwindcss": {
       "version": "4.1.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
@@ -4556,6 +4636,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/lp-code/package.json b/lp-code/package.json
index 4eb4a18..93b5972 100644
--- a/lp-code/package.json
+++ b/lp-code/package.json
@@ -12,14 +12,19 @@
   "dependencies": {
     "@gsap/react": "^2.1.2",
     "@tailwindcss/vite": "^4.1.18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.34.5",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
diff --git a/lp-code/src/components/ui/button/Button.test.tsx b/lp-code/src/components/ui/button/Button.test.tsx
new file mode 100644
index 0000000..63f9596
--- /dev/null
+++ b/lp-code/src/components/ui/button/Button.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, it, expect, vi } from "vitest"
+import { Button } from "./Button"
+
+describe("Button component",
+() => {
+
+    /**
+     * Testa se o botão renderiza o texto corretamente
+     * 
+     *  */ 
+    it("renders button text", () => {
+        render(<Button>Click</Button>)
+
+        const btn = screen.getByRole("button")
+
+        expect(btn).toBeInTheDocument()
+        expect(btn).toHaveTextContent("Click")
+    })
+
+    /**
+     * Testa se a variante primária é aplicada por padrão
+     */
+    it("applies primary variant by default", () => {
+    render(<Button>Click</Button>)
+
+    const btn = screen.getByRole("button")
+
+    expect(btn.className).toContain("bg-blue-600")
+    })
+
+    /**
+     * Testa se a variante secundária é aplicada quando especificada
+     */
+    it("applies secondary variant", () => {
+    render(<Button variant="secondary">Click</Button>)
+
+    const btn = screen.getByRole("button")
+
+    expect(btn.className).toContain("bg-gray-200")
+    })
+
+    /**
+     * Testa se o evento onClick é disparado corretamente
+     */
+    it("fires onClick", async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+
+    render(<Button onClick={handleClick}>Click</Button>)
+
+    const btn = screen.getByRole("button")
+
+    await user.click(btn)
+
+    expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/button/Button.tsx b/lp-code/src/components/ui/button/Button.tsx
new file mode 100644
index 0000000..c48404e
--- /dev/null
+++ b/lp-code/src/components/ui/button/Button.tsx
@@ -0,0 +1,33 @@
+import { forwardRef } from "react"
+import type { ButtonHTMLAttributes } from "react"
+import type { VariantProps } from "class-variance-authority"
+import { buttonVariants } from "./button.variants"
+import { cn } from "../../../lib/cn"
+
+type ButtonProps =
+  ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>
+/**
+ * Button Component
+ *
+ * Componente base do Design System.
+ * Suporta variantes visuais (primary, secondary, ghost)
+ * e tamanhos (sm, md, lg) via class-variance-authority.
+ *
+ * Implementado com forwardRef para permitir:
+ * - Integração com bibliotecas de animação (ex: Framer Motion)
+ * - Controle imperativo externo (focus, etc.)
+ */
+  export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(buttonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+  }
+)
+
+Button.displayName = "Button"
\ No newline at end of file
diff --git a/lp-code/src/components/ui/button/button.variants.ts b/lp-code/src/components/ui/button/button.variants.ts
new file mode 100644
index 0000000..dd64f7a
--- /dev/null
+++ b/lp-code/src/components/ui/button/button.variants.ts
@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary: "bg-blue-600 text-white hover:bg-blue-700",
+        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+        ghost: "bg-transparent hover:bg-gray-100"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+)
\ No newline at end of file
diff --git a/lp-code/src/components/ui/card/Card.test.tsx b/lp-code/src/components/ui/card/Card.test.tsx
new file mode 100644
index 0000000..beac794
--- /dev/null
+++ b/lp-code/src/components/ui/card/Card.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { Card } from "./Card"
+
+describe("Card component", () => {
+
+  /**
+   * Verifica se o Card renderiza corretamente
+   */
+  it("renders card component", () => {
+    render(<Card>Content</Card>)
+
+    const card = screen.getByText("Content")
+
+    expect(card).toBeInTheDocument()
+  })
+
+  /**
+   * Verifica se children são renderizados
+   */
+  it("renders children correctly", () => {
+    render(
+      <Card>
+        <p>Card text</p>
+      </Card>
+    )
+
+    expect(screen.getByText("Card text")).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/card/Card.tsx b/lp-code/src/components/ui/card/Card.tsx
new file mode 100644
index 0000000..fd2f7f9
--- /dev/null
+++ b/lp-code/src/components/ui/card/Card.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from "react"
+import { cardVariants, type CardVariants } from "./card.variants"
+import { cn } from "../../../lib/cn"
+
+type Props = CardVariants & {
+  icon?: ReactNode
+  title?: string
+  description?: string
+  children?: ReactNode
+  className?: string
+}
+/**
+ * Card Component
+ *
+ * Componente estruturado para exibição de conteúdo
+ * com suporte a:
+ * - icon opcional
+ * - title
+ * - description
+ * - children customizados
+ *
+ * Mantém separação entre estrutura e estilo (via cardVariants).
+ */
+export function Card({
+  icon,
+  title,
+  description,
+  children,
+  className,
+  variant,
+}: Props) {
+  return (
+    <div className={cn(cardVariants({ variant }), className)}>
+      {icon && <div className="mb-4">{icon}</div>}
+
+      {title && (
+        <h3 className="text-xl font-semibold mb-2">
+          {title}
+        </h3>
+      )}
+
+      {description && (
+        <p className="text-muted-foreground mb-4">
+          {description}
+        </p>
+      )}
+
+      {children}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lp-code/src/components/ui/card/card.variants.ts b/lp-code/src/components/ui/card/card.variants.ts
new file mode 100644
index 0000000..697abbe
--- /dev/null
+++ b/lp-code/src/components/ui/card/card.variants.ts
@@ -0,0 +1,19 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+export const cardVariants = cva(
+  "rounded-2xl border bg-background p-6 transition-all",
+  {
+    variants: {
+      variant: {
+        default: "border-muted",
+        elevated: "shadow-lg border-transparent",
+        ghost: "border-transparent bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export type CardVariants = VariantProps<typeof cardVariants>
\ No newline at end of file
diff --git a/lp-code/src/components/ui/container/Container.test.tsx b/lp-code/src/components/ui/container/Container.test.tsx
new file mode 100644
index 0000000..366da85
--- /dev/null
+++ b/lp-code/src/components/ui/container/Container.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { Container } from "./Container"
+
+describe("Container component", () => {
+
+  /**
+   * Verifica se o container renderiza corretamente
+   */
+  it("renders container", () => {
+    render(
+      <Container>
+        <div>Content</div>
+      </Container>
+    )
+
+    expect(screen.getByText("Content")).toBeInTheDocument()
+  })
+
+  /**
+   * Verifica se aplica classes de layout
+   */
+  it("applies container classes", () => {
+    const { container } = render(
+      <Container>
+        <div>Test</div>
+      </Container>
+    )
+
+    expect(container.firstChild).toHaveClass("mx-auto")
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/container/Container.tsx b/lp-code/src/components/ui/container/Container.tsx
new file mode 100644
index 0000000..54c32dd
--- /dev/null
+++ b/lp-code/src/components/ui/container/Container.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/cn"
+import { containerVariants } from "./container.variants"
+
+type Props = {
+  children: ReactNode
+  className?: string
+}
+/**
+ * Container Component
+ *
+ * Responsável por:
+ * - Centralização horizontal
+ * - Controle de max-width
+ * - Padding responsivo consistente
+ *
+ * Base estrutural para layout da aplicação.
+ */
+export function Container({ children, className }: Props) {
+  return (
+    <div className={cn(containerVariants(), className)}>
+      {children}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lp-code/src/components/ui/container/container.variants.ts b/lp-code/src/components/ui/container/container.variants.ts
new file mode 100644
index 0000000..4804051
--- /dev/null
+++ b/lp-code/src/components/ui/container/container.variants.ts
@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority"
+
+export const containerVariants = cva(
+  "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8"
+)
\ No newline at end of file
diff --git a/lp-code/src/components/ui/file-explorer/FileExplorer.test.tsx b/lp-code/src/components/ui/file-explorer/FileExplorer.test.tsx
new file mode 100644
index 0000000..62d7375
--- /dev/null
+++ b/lp-code/src/components/ui/file-explorer/FileExplorer.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { FileExplorer } from "./FileExplorer"
+
+describe("FileExplorer component", () => {
+
+  /**
+   * Verifica se os arquivos são renderizados
+   */
+  it("renders file explorer items", () => {
+    render(<FileExplorer />)
+
+    expect(screen.getByText("src")).toBeInTheDocument()
+    expect(screen.getByText("components")).toBeInTheDocument()
+    expect(screen.getByText("App.tsx")).toBeInTheDocument()
+    expect(screen.getByText("package.json")).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/file-explorer/FileExplorer.tsx b/lp-code/src/components/ui/file-explorer/FileExplorer.tsx
new file mode 100644
index 0000000..f43ce46
--- /dev/null
+++ b/lp-code/src/components/ui/file-explorer/FileExplorer.tsx
@@ -0,0 +1,22 @@
+import { FileItem } from "./FileItem"
+/**
+ * FileExplorer Component
+ *
+ * Dados atualmente mockados internamente.
+ */
+export function FileExplorer() {
+  const files = [
+    { name: "src", type: "folder" as const },
+    { name: "components", type: "folder" as const },
+    { name: "App.tsx", type: "file" as const },
+    { name: "package.json", type: "file" as const }
+  ]
+
+  return (
+    <div className="rounded-xl border p-4 bg-white shadow-sm">
+      {files.map((file) => (
+        <FileItem key={file.name} {...file} />
+      ))}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lp-code/src/components/ui/file-explorer/FileItem.test.tsx b/lp-code/src/components/ui/file-explorer/FileItem.test.tsx
new file mode 100644
index 0000000..3836ce8
--- /dev/null
+++ b/lp-code/src/components/ui/file-explorer/FileItem.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { FileItem } from "./FileItem"
+
+describe("FileItem component", () => {
+
+  /**
+   * Testa se o item de arquivo renderiza o nome
+   */
+  it("renders file name", () => {
+    render(<FileItem name="index.tsx" />)
+
+    expect(screen.getByText("index.tsx")).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/file-explorer/FileItem.tsx b/lp-code/src/components/ui/file-explorer/FileItem.tsx
new file mode 100644
index 0000000..5eb25ad
--- /dev/null
+++ b/lp-code/src/components/ui/file-explorer/FileItem.tsx
@@ -0,0 +1,27 @@
+import type { VariantProps } from "class-variance-authority"
+import { fileItemVariants } from "./fileItem.variants"
+import { cn } from "../../../lib/cn"
+
+export type FileItemProps =
+  VariantProps<typeof fileItemVariants> & {
+    name: string
+    className?: string
+  }
+/**
+ * FileItem Component
+ *
+ * Representa item individual do FileExplorer.
+ * Estilização baseada em variant "type" (file | folder).
+ */
+export function FileItem({
+  name,
+  type,
+  className
+}: FileItemProps) {
+  return (
+    <div className={cn(fileItemVariants({ type }), className)}>
+      <span>{type === "folder" ? "📁" : "📄"}</span>
+      {name}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lp-code/src/components/ui/file-explorer/fileItem.variants.ts b/lp-code/src/components/ui/file-explorer/fileItem.variants.ts
new file mode 100644
index 0000000..028cd7c
--- /dev/null
+++ b/lp-code/src/components/ui/file-explorer/fileItem.variants.ts
@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority"
+
+export const fileItemVariants = cva(
+  "flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100",
+  {
+    variants: {
+      type: {
+        file: "text-gray-700",
+        folder: "text-blue-600 font-medium"
+      }
+    },
+    defaultVariants: {
+      type: "file"
+    }
+  }
+)
\ No newline at end of file
diff --git a/lp-code/src/components/ui/footer/Footer.test.tsx b/lp-code/src/components/ui/footer/Footer.test.tsx
new file mode 100644
index 0000000..4d4331b
--- /dev/null
+++ b/lp-code/src/components/ui/footer/Footer.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { Footer } from "./Footer"
+
+describe("Footer component", () => {
+
+  /**
+   * Verifica se o footer renderiza
+   */
+  it("renders footer", () => {
+    render(<Footer />)
+
+    const footer = screen.getByRole("contentinfo")
+
+    expect(footer).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/footer/Footer.tsx b/lp-code/src/components/ui/footer/Footer.tsx
new file mode 100644
index 0000000..7c70b95
--- /dev/null
+++ b/lp-code/src/components/ui/footer/Footer.tsx
@@ -0,0 +1,45 @@
+import { cn } from "../../../lib/cn"
+
+type Props = {
+  className?: string
+}
+/**
+ * Footer Component
+ *
+ * Rodapé estruturado com grid responsivo.
+ */
+export function Footer({ className }: Props) {
+  return (
+    <footer
+      className={cn(
+        "border-t bg-white py-10",
+        className
+      )}
+    >
+      <div className="mx-auto max-w-7xl px-4 grid gap-8 md:grid-cols-3">
+        <div>
+          <h4 className="font-semibold mb-2">Produto</h4>
+          <ul className="space-y-1 text-sm">
+            <li>Features</li>
+            <li>Pricing</li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 className="font-semibold mb-2">Empresa</h4>
+          <ul className="space-y-1 text-sm">
+            <li>Sobre</li>
+            <li>Carreira</li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 className="font-semibold mb-2">Contato</h4>
+          <p className="text-sm text-gray-600">
+            contato@email.com
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
\ No newline at end of file
diff --git a/lp-code/src/components/ui/index.ts b/lp-code/src/components/ui/index.ts
new file mode 100644
index 0000000..83a279d
--- /dev/null
+++ b/lp-code/src/components/ui/index.ts
@@ -0,0 +1,7 @@
+export * from "./button/Button"
+export * from "./card/Card"
+export * from "./section-title/SectionTitle"
+export * from "./navbar/NavBar"
+export * from "./footer/Footer"
+export * from "./container/Container"
+export * from "./file-explorer/FileExplorer"
\ No newline at end of file
diff --git a/lp-code/src/components/ui/navbar/NavBar.test.tsx b/lp-code/src/components/ui/navbar/NavBar.test.tsx
new file mode 100644
index 0000000..87dcc54
--- /dev/null
+++ b/lp-code/src/components/ui/navbar/NavBar.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { Navbar } from "./NavBar"
+
+describe("NavBar component", () => {
+
+  /**
+   * Testa se a navbar renderiza
+   */
+  it("renders navbar", () => {
+    render(<Navbar />)
+
+    const nav = screen.getByRole("navigation")
+
+    expect(nav).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/navbar/NavBar.tsx b/lp-code/src/components/ui/navbar/NavBar.tsx
new file mode 100644
index 0000000..9a1210b
--- /dev/null
+++ b/lp-code/src/components/ui/navbar/NavBar.tsx
@@ -0,0 +1,30 @@
+import { cn } from "../../../lib/cn"
+
+type Props = {
+  className?: string
+}
+/**
+ * Navbar Component
+ *
+ * Estrutura de navegação principal.
+ * Layout interno fixo com grid responsivo.
+ */
+export function Navbar({ className }: Props) {
+  return (
+    <nav
+      className={cn(
+        "sticky top-0 z-50 w-full border-b bg-white",
+        className
+      )}
+    >
+      <div className="mx-auto max-w-7xl px-4 py-4 flex justify-between">
+        <span className="font-bold">Logo</span>
+        <div className="flex gap-6 text-sm">
+          <a href="#home">Home</a>
+          <a href="#about">Sobre</a>
+          <a href="#contact">Contato</a>
+        </div>
+      </div>
+    </nav>
+  )
+}
\ No newline at end of file
diff --git a/lp-code/src/components/ui/scroll-indicator/ScrollIndicator.test.tsx b/lp-code/src/components/ui/scroll-indicator/ScrollIndicator.test.tsx
new file mode 100644
index 0000000..2b1cc19
--- /dev/null
+++ b/lp-code/src/components/ui/scroll-indicator/ScrollIndicator.test.tsx
@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { ScrollIndicator } from "./ScrollIndicator"
+
+describe("ScrollIndicator component", () => {
+
+  /**
+   * Verifica se o indicador de scroll renderiza
+   */
+  it("renders scroll indicator", () => {
+    const { container } = render(<ScrollIndicator />)
+
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/scroll-indicator/ScrollIndicator.tsx b/lp-code/src/components/ui/scroll-indicator/ScrollIndicator.tsx
new file mode 100644
index 0000000..11e448b
--- /dev/null
+++ b/lp-code/src/components/ui/scroll-indicator/ScrollIndicator.tsx
@@ -0,0 +1,69 @@
+import { forwardRef } from "react"
+import { motion } from "framer-motion"
+import { cn } from "../../../lib/cn"
+
+type ScrollIndicatorProps = {
+  className?: string
+  targetId?: string
+  clickable?: boolean
+}
+/**
+ * ScrollIndicator Component
+ *
+ * Indicador visual animado de rolagem.
+ *
+ * Features:
+ * - Animação contínua via Framer Motion
+ * - Scroll suave opcional para targetId
+ * - Suporte a forwardRef
+ * - Pode ser configurado como clicável
+ *
+ * Otimização: will-change aplicado para melhorar performance
+ * de animações transform.
+ */
+export const ScrollIndicator = forwardRef<HTMLDivElement, ScrollIndicatorProps>(
+  ({ className, targetId, clickable = false }, ref) => {
+    // Realiza scroll suave até o elemento alvo, se definido.
+    const handleClick = () => {
+      if (!targetId) return
+
+      const element = document.getElementById(targetId)
+      if (!element) return
+
+      element.scrollIntoView({ behavior: "smooth" })
+    }
+
+    return (
+      <motion.div
+        ref={ref}
+        className={cn(
+          "absolute bottom-8 left-1/2 -translate-x-1/2",
+          clickable && "cursor-pointer",
+          className
+        )}
+        animate={{ y: [0, 8, 0] }}
+        transition={{
+          repeat: Infinity,
+          duration: 2.5,
+          ease: "easeInOut",
+        }}
+        style={{ willChange: "transform" }}
+        onClick={clickable ? handleClick : undefined}
+      >
+        <div className="w-5 h-9 rounded-full border-2 border-muted-foreground/40 flex justify-center pt-2">
+          <motion.div
+            className="w-1 h-2 rounded-full bg-primary"
+            animate={{ y: [0, 10, 0], opacity: [1, 0.4, 1] }}
+            transition={{
+              repeat: Infinity,
+              duration: 1.8,
+              ease: "easeInOut",
+            }}
+          />
+        </div>
+      </motion.div>
+    )
+  }
+)
+
+ScrollIndicator.displayName = "ScrollIndicator"
\ No newline at end of file
diff --git a/lp-code/src/components/ui/section-title/SectionTitle.test.tsx b/lp-code/src/components/ui/section-title/SectionTitle.test.tsx
new file mode 100644
index 0000000..65f3619
--- /dev/null
+++ b/lp-code/src/components/ui/section-title/SectionTitle.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { SectionTitle } from "./SectionTitle"
+
+describe("SectionTitle component", () => {
+
+  /**
+   * Testa se o título principal é renderizado
+   */
+  it("renders title", () => {
+    render(<SectionTitle title="My Title" />)
+
+    expect(screen.getByText("My Title")).toBeInTheDocument()
+  })
+
+  /**
+   * Testa se o subtítulo é renderizado quando fornecido
+   */
+  it("renders subtitle when provided", () => {
+    render(
+      <SectionTitle
+        title="Title"
+        subtitle="Subtitle text"
+      />
+    )
+
+    expect(screen.getByText("Subtitle text")).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file
diff --git a/lp-code/src/components/ui/section-title/SectionTitle.tsx b/lp-code/src/components/ui/section-title/SectionTitle.tsx
new file mode 100644
index 0000000..e4e449c
--- /dev/null
+++ b/lp-code/src/components/ui/section-title/SectionTitle.tsx
@@ -0,0 +1,29 @@
+import { cn } from "../../../lib/cn"
+import { sectionTitleVariants } from "./sectionTitle.variants"
+
+type Props = {
+  title: string
+  subtitle?: string
+  className?: string
+}
+/**
+ * SectionTitle Component
+ *
+ * Componente padronizado para títulos de seção.
+ * Suporta título obrigatório e subtítulo opcional.
+ *
+ * Estrutura preparada para futura animação individual
+ * de title e subtitle.
+ */
+export function SectionTitle({ title, subtitle, className }: Props) {
+  return (
+    <div className={cn(sectionTitleVariants(), className)}>
+      <h2 className="text-3xl font-bold tracking-tight">{title}</h2>
+      {subtitle && (
+        <p className="text-muted-foreground text-lg">
+          {subtitle}
+        </p>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/lp-code/src/components/ui/section-title/sectionTitle.variants.ts b/lp-code/src/components/ui/section-title/sectionTitle.variants.ts
new file mode 100644
index 0000000..8d9bedd
--- /dev/null
+++ b/lp-code/src/components/ui/section-title/sectionTitle.variants.ts
@@ -0,0 +1,3 @@
+import { cva } from "class-variance-authority"
+
+export const sectionTitleVariants = cva("space-y-2 text-center")
\ No newline at end of file
diff --git a/lp-code/src/lib/cn.ts b/lp-code/src/lib/cn.ts
new file mode 100644
index 0000000..d0e4736
--- /dev/null
+++ b/lp-code/src/lib/cn.ts
@@ -0,0 +1,12 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+/**
+ * Utilitário para merge inteligente de classes.
+ *
+ * Combina:
+ * - clsx (condicional)
+ * - tailwind-merge (resolve conflitos de classes Tailwind)
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
\ No newline at end of file