웹사이트 템플릿

Sonic - Single product landing page template Next.js & Astro

A modern single product landing page template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for selling or promoting a physical product, or a digital product.

이 템플릿의 설명은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

Landing Page · E-commerce · 무료

라이브 데모 열기

Sonic - Single product landing page template Next.js & Astro

디자인 분석

이 템플릿 디자인을 AI가 분석한 내용입니다: 색상, 글꼴, 여백, 섹션, 특징적인 디테일. 템플릿을 사용하면 Ottermind가 여기에서 시작합니다.

이 분석은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

Overall: landing page, minimalist, low density, light
Palette: background #FFFFFF; surfaces #FFFFFF, #F9FAFB; text #111827; muted text #6B7280; primary #111827; accents #00FFA3, #1F2937
Type: headings Inter, 700, title case; body Inter, 16px; scale h1 52px, h2 40px, h3 28px
Shape & spacing: button radius 9999px, card radius 0px, borders none, shadows soft drop (0 10px 15px rgba(0,0,0,0.1)), section spacing 120px, content width 1200px
Sections (top to bottom): Header — horizontal layout, logo left, nav center, CTA right, white background
Hero — full-width, centered text and product image, headline above subheadline, two "Buy now" buttons (one dark pill, one outlined), product image below with green accent band
Product image — large vertical crop of cylindrical device, black mesh base, green glowing band, top speaker grille visible
Signature details: Clean, high-contrast typography with generous spacing
Single product focus with minimal distractions
Vibrant green accent color on otherwise monochrome palette
Soft drop shadow under product for depth
Rounded pill-shaped CTAs with directional arrow
Centered, symmetrical composition throughout
Other pages: /product: product details with specs and images
/specifications: technical data in grid format
/about: brand story with team photo
/pricing: tiered plans with comparison table
/contact: form with map and social links

템플릿 정보

카테고리: Landing Page, E-commerce
기술: Next.js, Astro, Tailwind CSS, shadcn/ui
라이선스: Commercial
제작자: Shadcnblocks
게시처: Shadcnblocks
가격: 무료

원본 디자인: Shadcnblocks (Shadcnblocks에 게시). Ottermind는 템플릿 코드를 복사하지 않고, 브리프를 바탕으로 새 사이트를 만듭니다.

Ottermind가 시작하는 브리프

Studio에서 초안으로 열립니다. 보내기 전에 브랜드, 대상, 페이지를 추가하세요.

Build a landing page website inspired by the "Sonic" template. Reference brief: A modern single product landing page template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for selling or promoting a physical product, or a digital product. Use original copy and imagery for my brand rather than the reference's placeholder content.