[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Navigation } from "@/components/navigation" import { Hero } from "@/components/hero" import { InvestmentStrategy } from "@/components/investment-strategy" import { PortfolioOptions } from "@/components/portfolio-options" import { CoreValues } from "@/components/core-values" import { Footer } from "@/components/footer" export default function Home() { return ( <>

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true" export function Footer() { return ( ) } [V0_FILE]jpg:file="public/night-cityscape-financial-district-modern-skyline.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/night-cityscape-financial-district-modern-skyline-m7oKBLlQBKKkS1Uyz61svpNj50yagb.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/navigation.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" export function Navigation() { const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const scrollToSection = (id: string) => { const element = document.getElementById(id) if (element) { element.scrollIntoView({ behavior: "smooth" }) setIsMobileMenuOpen(false) } } return (

{/* Logo */} {/* Desktop Menu */}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isMobileMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "GDL - Global Dividend Lab | 글로벌 배당 투자 전문", description: "GDL은 한국과 미국에 상장된 배당주식 및 배당ETF에 투자하는 전문 투자회사입니다. 데이터 기반의 체계적인 분석으로 안정적인 배당 수익을 제공합니다.", keywords: ["배당투자", "배당주", "배당ETF", "글로벌투자", "미국주식배당", "한국주식배당", "GDL", "투자전문회사"], openGraph: { title: "GDL - Global Dividend Lab", description: "데이터로 증명하는 글로벌 배당 투자의 정석", type: "website", locale: "ko_KR", }, generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Dark blue & gold theme colors */ --background: oklch(0.15 0.05 240); --foreground: oklch(0.985 0 0); --card: oklch(0.18 0.05 240); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.18 0.05 240); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.75 0.15 85); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.22 0.05 240); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.25 0.05 240); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.75 0.15 85); --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.3 0.05 240); --input: oklch(0.3 0.05 240); --ring: oklch(0.75 0.15 85); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.18 0.05 240); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.75 0.15 85); --sidebar-primary-foreground: oklch(0.145 0 0); --sidebar-accent: oklch(0.22 0.05 240); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.3 0.05 240); --sidebar-ring: oklch(0.75 0.15 85); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Adding custom animations for fade-in, scroll, and hover effects */ @layer utilities { .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; } .animate-fade-in-down { animation: fadeInDown 0.3s ease-out forwards; } .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .delay-400 { animation-delay: 400ms; } .delay-500 { animation-delay: 500ms; } .delay-600 { animation-delay: 600ms; } .delay-700 { animation-delay: 700ms; } .delay-800 { animation-delay: 800ms; } .delay-900 { animation-delay: 900ms; } .delay-1000 { animation-delay: 1000ms; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } } /* Smooth scroll behavior for entire page */ html { scroll-behavior: smooth; } [V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Globe, TrendingUp, BarChart3, ChevronDown } from "lucide-react" export function Hero() { const [scrollY, setScrollY] = useState(0) useEffect(() => { const handleScroll = () => { setScrollY(window.scrollY) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const scrollToNext = () => { const element = document.getElementById("strategy") if (element) { element.scrollIntoView({ behavior: "smooth" }) } } const scrollToPortfolio = () => { const element = document.getElementById("portfolio") if (element) { element.scrollIntoView({ behavior: "smooth" }) } } return (

GDL

Premium Investment Solution

데이터로 증명하는
글로벌 배당 투자의 정석

GDL은 흔들리지 않는 원칙과 실증적인 시장 분석으로
자본소득을 견고하게 지키고 키웁니다.

{/* Stats */}

주요시장

150+

분석 기업

AVG +6%

Total Return

{/* Three value props */}

GLOBAL INSIGHT

Global dividend investors insights premium cover description for institutional investors.

STABLE DIVIDEND

GDL is committed dividend analysis AI and resources monitoring with local research economies.

LAB EXPERTISE

Leveraging integrations with innovations and analysis the data landscape, environment & markets.

) } [V0_FILE]typescriptreact:file="components/investment-strategy.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { Search, FileText, Shield, LineChart } from "lucide-react" export function InvestmentStrategy() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 }, ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) const steps = [ { number: "01", title: "글로벌 기업 선별", description: "전 세계 주요 시장에서 안정적인 배당 이력과 성장 가능성을 보유한 우량 기업을 엄선합니다.", points: ["G7 주요국가 분석", "배당 지속성 평가", "재무 건전성 검증"], icon: Search, }, { number: "02", title: "심층 재무 분석", description: "기업의 재무제표, 현금흐름, 배당 정책을 철저히 분석하여 지속 가능한 배당 능력을 평가합니다.", points: ["재무비율 종합 분석", "현금흐름 안정성 검토", "배당성향 적정성 평가"], icon: FileText, }, { number: "03", title: "리스크 관리", description: "분산투자와 헤지 전략을 통해 포트폴리오의 변동성을 최소화하고 안정성을 극대화합니다.", points: ["섹터별 분산 투자", "지역별 리스크 헤징", "환율 변동 대응 전략"], icon: Shield, }, { number: "04", title: "성과 모니터링", description: "실시간 포트폴리오 성과를 추적하고 시장 변화에 따라 최적의 투자 전략을 지속적으로 업데이트합니다.", points: ["월간 성과 리포트 제공", "포트폴리오 리밸런싱", "시장 변화 대응 전략"], icon: LineChart, }, ] return (

Investment Strategy

배당주 투자 4단계 프로세스

체계적이고 검증된 투자 프로세스로 안정적인 배당 수익을 실현합니다

{steps.map((step, index) => { const Icon = step.icon return (

STEP {step.number}

{step.title}

{step.description}

• {point}

) })}

) } [V0_FILE]typescriptreact:file="components/portfolio-options.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Shield, Zap, Calendar } from "lucide-react" export function PortfolioOptions() { const [activeTab, setActiveTab] = useState<"conservative" | "high-yield" | "monthly">("conservative") const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 }, ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) const portfolios = { conservative: { title: "저위험 안정배당", subtitle: "Conservative Dividend", description: "안정적인 대형 우량주 중심으로 구성된 포트폴리오입니다. 변동성이 낮고 꾸준한 배당 수익을 추구합니다.", risk: "낮음", return: "4-6%", features: ["대형 우량주 80% 이상 구성", "배당 수익률 4-6% 목표", "낮은 변동성 유지", "장기 투자 적합"], sectors: ["금융", "통신", "유틸리티", "필수소비재"], suitable: "안정적인 수익을 원하는 보수적 투자자, 은퇴 자금 운용을 계획하는 투자자에게 적합합니다.", icon: Shield, }, "high-yield": { title: "모험형 고배당", subtitle: "High Yield Dividend", description: "고배당 중소형주와 성장 가능성이 높은 기업에 투자합니다. 높은 수익률을 추구하는 공격적인 포트폴리오입니다.", risk: "중상", return: "8-12%", features: ["고배당 성장주 중심", "배당 수익률 8-12% 목표", "적극적 리밸런싱", "중장기 고수익 추구"], sectors: ["부동산", "에너지", "금융", "기술"], suitable: "높은 수익률을 추구하며 변동성을 감수할 수 있는 공격적 투자자에게 적합합니다.", icon: Zap, }, monthly: { title: "월배당 집중형", subtitle: "Monthly Dividend", description: "매월 안정적인 현금흐름을 창출하는 포트폴리오입니다. 월배당 ETF와 월배당 주식으로 구성됩니다.", risk: "중", return: "5-8%", features: ["매월 배당금 수령", "배당 수익률 5-8% 목표", "현금흐름 최적화", "은퇴 계획 적합"], sectors: ["리츠", "월배당 ETF", "통신", "인프라"], suitable: "매월 일정한 현금흐름이 필요한 투자자, 배당금으로 생활비를 충당하고자 하는 투자자에게 적합합니다.", icon: Calendar, }, } const activePortfolio = portfolios[activeTab] const Icon = activePortfolio.icon return (

Portfolio Options

맞춤형 투자 포트폴리오

투자 성향과 목표에 맞는 다양한 포트폴리오를 제공합니다

{activePortfolio.title}

{activePortfolio.subtitle}

{activePortfolio.description}

리스크 수준

{activePortfolio.risk}

예상 수익률

{activePortfolio.return}

주요 특징

• {feature}

투자 섹터 구성

{activePortfolio.sectors.map((sector, idx) => ( {sector} ))}

이 포트폴리오가 적합한 투자자

{activePortfolio.suitable}

) } [V0_FILE]typescriptreact:file="components/core-values.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef, useState } from "react" import { Globe, TrendingUp, Microscope } from "lucide-react" export function CoreValues() { const [isVisible, setIsVisible] = useState(false) const sectionRef = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) } }, { threshold: 0.1 }, ) if (sectionRef.current) { observer.observe(sectionRef.current) } return () => observer.disconnect() }, []) const values = [ { title: "Global Insight", subtitle: "글로벌 인사이트", description: "전 세계 주요 시장을 모니터링하며, 다양한 지역과 산업에 걸친 투자 기회를 발굴합니다.", points: [ "북미, 유럽, 아시아 주요 시장 커버", "24시간 글로벌 시장 모니터링", "현지 전문가 네트워크 활용", "다국적 기업 심층 분석", ], icon: Globe, }, { title: "Stable Dividend", subtitle: "안정적 배당", description: "지속 가능한 배당 정책을 가진 우량 기업을 선별하여, 장기적으로 안정적인 배당 수익을 제공합니다.", points: [ "10년 이상 배당 지속 기업 선호", "배당 성장률 분석", "현금흐름 기반 배당 안정성 평가", "배당 재투자 전략 최적화", ], icon: TrendingUp, }, { title: "Lab Expertise", subtitle: "연구소 전문성", description: "데이터 기반의 체계적인 분석과 연구를 통해 투자 의사결정의 정확성을 높이고 리스크를 최소화합니다.", points: [ "AI 기반 재무 분석 시스템", "빅데이터 활용 트렌드 예측", "전문 리서치팀 운영", "정기적 투자 레포트 발간", ], icon: Microscope, }, ] return (

Core Values

GDL만의 핵심 가치

글로벌 인사이트, 안정적 배당, 연구소 전문성으로 최고의 투자 솔루션을 제공합니다

{values.map((value, index) => { const Icon = value.icon return (

{value.title}

{value.subtitle}

{value.description}

• {point}

) })}

주요국가

6.5%

평균 배당률

150+

분석 기업

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This