374 lines
23 KiB
TypeScript
374 lines
23 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
||
import {
|
||
ArrowRight, Calculator, Code2, Smartphone, Palette, LineChart, Eye, Menu, X,
|
||
Sun, Moon, ChevronDown, Phone, Mail, MessageCircle, Rocket, Users, Clock,
|
||
Headphones, Award
|
||
} from "lucide-react";
|
||
import AOS from "aos";
|
||
import "aos/dist/aos.css";
|
||
|
||
// Korean i18n strings to replace <%- __('...') %>
|
||
const t = {
|
||
navigation: {
|
||
home: "홈",
|
||
about: "회사소개",
|
||
services: "서비스",
|
||
portfolio: "포트폴리오",
|
||
contact: "연락처",
|
||
calculator: "비용계산기"
|
||
},
|
||
language: {
|
||
korean: "한국어",
|
||
english: "English",
|
||
russian: "Русский",
|
||
kazakh: "Қазақша"
|
||
},
|
||
hero: {
|
||
title: { smart: "스마트", solutions: "솔루션" },
|
||
subtitle: "혁신적인 기술로 비즈니스를 성장시키세요",
|
||
description: "비즈니스의 디지털 전환을 이끄는 혁신적인 웹개발, 모바일 앱, UI/UX 디자인",
|
||
cta: { start: "시작하기", portfolio: "포트폴리오 보기" },
|
||
},
|
||
services: {
|
||
title: { our: "우리의", services: "서비스" },
|
||
subtitle: "아이디어를 현실로 만드는 전문 개발 서비스",
|
||
description: "최첨단 기술과 창의적 아이디어로 완성하는 디지털 솔루션",
|
||
view_all: "모든 서비스 보기",
|
||
web: { title: "웹 개발", description: "반응형 웹사이트 및 웹 애플리케이션 개발", price: "500,000원부터" },
|
||
mobile: { title: "모바일 앱", description: "iOS 및 Android 네이티브 앱 개발", price: "1,000,000원부터" },
|
||
design: { title: "UI/UX 디자인", description: "사용자 중심의 인터페이스 및 경험 디자인", price: "300,000원부터" },
|
||
marketing: { title: "디지털 마케팅", description: "SEO, 소셜미디어 마케팅, 광고 관리", price: "200,000원부터" },
|
||
hero: {
|
||
title: "우리의",
|
||
title_highlight: "서비스",
|
||
subtitle: "혁신적인 기술로 비즈니스 성장 지원"
|
||
},
|
||
cards: {
|
||
starting_price: "시작 가격",
|
||
consultation: "상담",
|
||
calculate_cost: "비용 계산",
|
||
popular: "인기"
|
||
},
|
||
process: {
|
||
title: "프로젝트 수행 과정",
|
||
subtitle: "체계적이고 전문적인 프로세스로 프로젝트를 진행합니다",
|
||
step1: { title: "상담 및 기획", description: "고객의 요구사항을 정확히 파악하고 최적의 솔루션을 기획합니다" },
|
||
step2: { title: "디자인 및 설계", description: "사용자 중심의 직관적인 디자인과 견고한 시스템 아키텍처를 설계합니다" },
|
||
step3: { title: "개발 및 구현", description: "최신 기술과 모범 사례를 활용하여 효율적이고 확장 가능한 솔루션을 개발합니다" },
|
||
step4: { title: "테스트 및 배포", description: "철저한 테스트를 통해 품질을 보장하고 안정적인 배포를 진행합니다" }
|
||
},
|
||
why_choose: {
|
||
title: "왜 SmartSolTech를 선택해야 할까요?",
|
||
modern_tech: { title: "최신 기술 활용", description: "항상 최신 기술 트렌드를 파악하고, 검증된 기술 스택을 활용하여 미래 지향적인 솔루션을 제공합니다." },
|
||
expert_team: { title: "전문가 팀", description: "각 분야의 전문가들로 구성된 팀이 협력하여 최고 품질의 결과물을 보장합니다." },
|
||
fast_response: { title: "빠른 대응", description: "신속한 의사소통과 빠른 피드백을 통해 프로젝트를 효율적으로 진행합니다." },
|
||
continuous_support: { title: "지속적인 지원", description: "프로젝트 완료 후에도 지속적인 유지보수와 기술 지원을 제공합니다." },
|
||
quality_guarantee: { title: "품질 보장", subtitle: "최고 품질의 결과물을 약속드립니다" }
|
||
},
|
||
cta: {
|
||
title: "프로젝트를 시작할 준비가 되셨나요?",
|
||
subtitle: "지금 바로 무료 상담을 받아보세요",
|
||
calculate_cost: "비용 계산하기",
|
||
view_portfolio: "포트폴리오 보기"
|
||
}
|
||
},
|
||
portfolio: {
|
||
title: { recent: "최근", projects: "프로젝트" },
|
||
subtitle: "웹, 모바일, 브랜딩 분야의 선별된 작업들",
|
||
view_all: "전체 포트폴리오 보기",
|
||
},
|
||
calculator: {
|
||
cta: { title: "프로젝트 비용 계산기", subtitle: "몇 가지 질문에 답하여 빠른 견적을 받아보세요", button: "계산기 열기" },
|
||
},
|
||
contact: {
|
||
cta: { ready: "시작할", start: "준비가", question: " 되셨나요?", subtitle: "프로젝트에 대해 알려주세요 - 하루 안에 답변드리겠습니다" },
|
||
phone: { title: "전화", number: "+82 10-1234-5678" },
|
||
email: { title: "이메일", address: "hello@smartsoltech.kr" },
|
||
telegram: { title: "텔레그램", subtitle: "@smartsoltech" },
|
||
form: {
|
||
title: "빠른 연락",
|
||
name: "성함",
|
||
email: "이메일",
|
||
phone: "전화번호 (선택사항)",
|
||
service: {
|
||
select: "어떤 서비스에 관심이 있으신가요?",
|
||
web: "웹 개발",
|
||
mobile: "모바일 앱",
|
||
design: "UI/UX 디자인",
|
||
branding: "브랜딩",
|
||
consulting: "컨설팅",
|
||
other: "기타",
|
||
},
|
||
message: "프로젝트에 대해 알려주세요",
|
||
submit: "메시지 보내기",
|
||
},
|
||
},
|
||
common: { view_details: "자세히 보기" },
|
||
theme: { toggle: "테마 변경" }
|
||
};
|
||
|
||
const services = [
|
||
{ icon: <Code2 className="w-10 h-10" />, title: t.services.web.title, description: t.services.web.description, price: t.services.web.price, delay: 0 },
|
||
{ icon: <Smartphone className="w-10 h-10" />, title: t.services.mobile.title, description: t.services.mobile.description, price: t.services.mobile.price, delay: 100 },
|
||
{ icon: <Palette className="w-10 h-10" />, title: t.services.design.title, description: t.services.design.description, price: t.services.design.price, delay: 200 },
|
||
{ icon: <LineChart className="w-10 h-10" />, title: t.services.marketing.title, description: t.services.marketing.description, price: t.services.marketing.price, delay: 300 },
|
||
];
|
||
|
||
const demoPortfolio = [
|
||
{
|
||
_id: "p1",
|
||
title: "Fintech Dashboard",
|
||
category: "Web App",
|
||
images: [{ url: "https://picsum.photos/seed/fin/800/450", isPrimary: true }],
|
||
technologies: ["React", "Tailwind", "Node"],
|
||
description: "Realtime analytics with role‑based access.",
|
||
shortDescription: "Realtime analytics with role‑based access.",
|
||
viewCount: 423,
|
||
},
|
||
{
|
||
_id: "p2",
|
||
title: "Wellness Tracker",
|
||
category: "Mobile",
|
||
images: [{ url: "https://picsum.photos/seed/well/800/450", isPrimary: true }],
|
||
technologies: ["Kotlin", "Compose"],
|
||
description: "Personal health metrics and reminders.",
|
||
shortDescription: "Personal health metrics and reminders.",
|
||
viewCount: 1189,
|
||
},
|
||
{
|
||
_id: "p3",
|
||
title: "Brand Revamp",
|
||
category: "Branding",
|
||
images: [{ url: "https://picsum.photos/seed/brand/800/450", isPrimary: true }],
|
||
technologies: ["Figma", "Design System"],
|
||
description: "Identity, components, and marketing site.",
|
||
shortDescription: "Identity, components, and marketing site.",
|
||
viewCount: 762,
|
||
},
|
||
];
|
||
|
||
export default function LandingDemo() {
|
||
useEffect(() => {
|
||
AOS.init({ duration: 800, easing: "ease-in-out", once: true });
|
||
}, []);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||
{/* Global styles for blob animation */}
|
||
<style jsx global>{`
|
||
@keyframes blob { 0% { transform: translate(0px,0px) scale(1); } 33% { transform: translate(20px,-30px) scale(1.1);} 66% { transform: translate(-10px,20px) scale(0.9);} 100% { transform: translate(0px,0px) scale(1);} }
|
||
.animate-blob { animation: blob 12s infinite; }
|
||
.animation-delay-2000 { animation-delay: 2s; }
|
||
.animation-delay-4000 { animation-delay: 4s; }
|
||
.glass-effect { backdrop-filter: blur(6px); }
|
||
.hero-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(1000px 500px at 110% 10%, rgba(168,85,247,.35), transparent 60%); pointer-events:none; }
|
||
.cta-section { background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,.25), transparent 60%), linear-gradient(90deg, #3730a3, #7c3aed); }
|
||
.form-input { outline: none; }
|
||
`}</style>
|
||
|
||
{/* Hero */}
|
||
<section className="relative bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 min-h-screen flex items-center overflow-hidden hero-section">
|
||
<div className="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
|
||
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>
|
||
|
||
{/* Animated blobs */}
|
||
<div className="absolute inset-0 overflow-hidden">
|
||
<div className="absolute -top-40 -right-32 w-80 h-80 bg-purple-500 dark:bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
|
||
<div className="absolute -bottom-40 -left-32 w-80 h-80 bg-blue-500 dark:bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
|
||
<div className="absolute top-40 left-40 w-80 h-80 bg-indigo-500 dark:bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
|
||
</div>
|
||
|
||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 w-full">
|
||
<div className="text-center">
|
||
<h1 className="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight" data-aos="fade-up">
|
||
{t.hero.title.smart} <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">{t.hero.title.solutions}</span>
|
||
</h1>
|
||
<p className="text-xl md:text-2xl text-gray-300 dark:text-gray-200 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
|
||
{t.hero.subtitle}
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="400">
|
||
<a href="#contact" className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
|
||
{t.hero.cta.start}
|
||
</a>
|
||
<a href="#portfolio" className="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
|
||
{t.hero.cta.portfolio}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scroll indicator */}
|
||
<div className="absolute bottom-20 left-1/2 -translate-x-1/2 animate-bounce">
|
||
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Services */}
|
||
<section className="py-20 bg-white dark:bg-gray-900" id="services">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16" data-aos="fade-up">
|
||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||
{t.services.title.our} <span className="text-blue-600 dark:text-blue-400">{t.services.title.services}</span>
|
||
</h2>
|
||
<p className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-3xl mx-auto">
|
||
{t.services.subtitle}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{services.map((s, i) => (
|
||
<div key={i} className="group p-8 bg-gray-50 dark:bg-gray-800 rounded-2xl hover:bg-white dark:hover:bg-gray-700 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay={s.delay}>
|
||
<div className="text-blue-600 dark:text-blue-400 mb-4 group-hover:scale-110 transition-transform duration-300">{s.icon}</div>
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">{s.title}</h3>
|
||
<p className="text-gray-600 dark:text-gray-300 mb-4">{s.description}</p>
|
||
<div className="text-blue-600 dark:text-blue-400 font-semibold">{s.price}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="text-center mt-12" data-aos="fade-up">
|
||
<a href="#services" className="inline-flex items-center px-6 py-3 border border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 font-semibold rounded-lg hover:bg-blue-600 hover:text-white dark:hover:bg-blue-400 dark:hover:text-gray-900 transition-colors">
|
||
{t.services.view_all}
|
||
<ArrowRight className="ml-2 w-5 h-5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Portfolio */}
|
||
<section className="py-20 bg-gray-50 dark:bg-gray-800" id="portfolio">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16" data-aos="fade-up">
|
||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||
{t.portfolio.title.recent} <span className="text-purple-600 dark:text-purple-400">{t.portfolio.title.projects}</span>
|
||
</h2>
|
||
<p className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-3xl mx-auto">
|
||
{t.portfolio.subtitle}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{demoPortfolio.map((project, index) => (
|
||
<div key={project._id} className="group bg-white dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay={index * 100}>
|
||
<div className="relative overflow-hidden">
|
||
<img src={project.images?.[0]?.url} alt={project.title} className="w-full h-48 object-cover" />
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||
<div className="absolute bottom-4 left-4 right-4 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 opacity-0 group-hover:opacity-100">
|
||
<div className="flex flex-wrap gap-2">
|
||
{project.technologies?.slice(0, 3).map((tech) => (
|
||
<span key={tech} className="px-2 py-1 bg-white/20 glass-effect text-white text-xs rounded-full">{tech}</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 text-sm rounded-full font-medium">{project.category}</span>
|
||
<span className="text-gray-500 dark:text-gray-400 text-sm flex items-center"><Eye className="w-4 h-4 mr-1" />{project.viewCount ?? 0}</span>
|
||
</div>
|
||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{project.title}</h3>
|
||
<p className="text-gray-600 dark:text-gray-300 mb-4">{project.shortDescription ?? project.description}</p>
|
||
<a href="#" className="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
|
||
{t.common.view_details}
|
||
<ArrowRight className="ml-1 w-4 h-4" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="text-center mt-12" data-aos="fade-up">
|
||
<a href="#portfolio" className="inline-flex items-center px-6 py-3 bg-purple-600 dark:bg-purple-500 text-white font-semibold rounded-lg hover:bg-purple-700 dark:hover:bg-purple-400 transition-colors">
|
||
{t.portfolio.view_all}
|
||
<ArrowRight className="ml-2 w-5 h-5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Calculator CTA */}
|
||
<section className="py-20 cta-section">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
||
<div data-aos="fade-up">
|
||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">{t.calculator.cta.title}</h2>
|
||
<p className="text-lg text-blue-100 mb-8 max-w-3xl mx-auto">{t.calculator.cta.subtitle}</p>
|
||
<a href="#calculator" className="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-bold rounded-full text-lg hover:bg-gray-100 transition-colors transform hover:scale-105">
|
||
<Calculator className="mr-3" />
|
||
{t.calculator.cta.button}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact */}
|
||
<section className="py-20 bg-white dark:bg-gray-900" id="contact">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||
<div data-aos="fade-right">
|
||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">
|
||
{t.contact.cta.ready} <span className="text-blue-600 dark:text-blue-400">{t.contact.cta.start}</span>
|
||
{t.contact.cta.question}
|
||
</h2>
|
||
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8">{t.contact.cta.subtitle}</p>
|
||
<div className="space-y-4">
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4">
|
||
<svg viewBox="0 0 24 24" className="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a2 2 0 011.94 1.515l.72 2.885a2 2 0 01-.52 1.94L9.12 11.88a16.001 16.001 0 006.999 6.999l1.54-1.28a2 2 0 011.94-.52l2.885.72A2 2 0 0121 20.72V24a2 2 0 01-2 2h-1C9.163 26 2 18.837 2 10V9a2 2 0 011-1.732V5z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div className="font-semibold text-gray-900 dark:text-white">{t.contact.phone.title}</div>
|
||
<div className="text-gray-600 dark:text-gray-300">{t.contact.phone.number}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4">
|
||
<svg viewBox="0 0 24 24" className="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 12H8m8 4H8m8-8H8M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div className="font-semibold text-gray-900 dark:text-white">{t.contact.email.title}</div>
|
||
<div className="text-gray-600 dark:text-gray-300">{t.contact.email.address}</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4">
|
||
<svg viewBox="0 0 24 24" className="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 11c1.657 0 3-1.343 3-3S13.657 5 12 5 9 6.343 9 8s1.343 3 3 3zm-7 9a7 7 0 1114 0H5z"/></svg>
|
||
</div>
|
||
<div>
|
||
<div className="font-semibold text-gray-900 dark:text-white">{t.contact.telegram.title}</div>
|
||
<div className="text-gray-600 dark:text-gray-300">{t.contact.telegram.subtitle}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-aos="fade-left">
|
||
<div className="p-8 rounded-2xl shadow-lg bg-white dark:bg-gray-800">
|
||
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">{t.contact.form.title}</h3>
|
||
<form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
|
||
<input type="text" placeholder={t.contact.form.name} required className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" />
|
||
<input type="email" placeholder={t.contact.form.email} required className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" />
|
||
<input type="tel" placeholder={t.contact.form.phone} className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" />
|
||
<select className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white">
|
||
<option value="">{t.contact.form.service.select}</option>
|
||
<option value="web">{t.contact.form.service.web}</option>
|
||
<option value="mobile">{t.contact.form.service.mobile}</option>
|
||
<option value="design">{t.contact.form.service.design}</option>
|
||
<option value="branding">{t.contact.form.service.branding}</option>
|
||
<option value="consulting">{t.contact.form.service.consulting}</option>
|
||
<option value="other">{t.contact.form.service.other}</option>
|
||
</select>
|
||
<textarea rows={4} placeholder={t.contact.form.message} required className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-gray-700 dark:text-white"></textarea>
|
||
<button type="submit" className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-3 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105">
|
||
{t.contact.form.submit}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
} |