قالب موقع ويب
Northstar - AI Agency & Agent Studio Site
Northstar is a production-ready Next.js template for AI agencies, agent studios, and development teams that need to present software delivery clearly. It includes four locales (EN, RU, KA, HY), a responsive shader hero, animated product demos, solution pages, case studies, a Markdown blog, service pages, PostHog and Vercel Analytics integration points, metadata, locale alternates, sitemap, and JSON-LD. The buyer-ready source uses fictional Northstar branding, placeholder people, clients, media, contact details, domains, and integration identifiers so the identity can be replaced safely. No CMS or database is required; copy is stored in typed TypeScript locale bundles and Markdown.
وصف هذا القالب غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.
Landing Page · Portfolio · الأصلي $39
الصفحات
لقطات من العرض المباشر، صفحة تلو الأخرى. مرّر داخل الصفحة لرؤيتها كاملة.
تحليل التصميم
قراءة بالذكاء الاصطناعي لتصميم هذا القالب: الألوان والخطوط والمسافات والأقسام والتفاصيل المميزة. يبدأ منها Ottermind عند استخدام القالب.
هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.
- Overall
landing page, professional, medium density, light
- Palette
background #fcfcfa; surfaces [#111113, #0d0d0f, #eef1ff, #0cc78a]; text #111312; muted text #6b7280; primary #0cc78a; accents [#1e3a8a, #0b9f6e, #ff5f57]
- Type
headings Onest, 400, sentence-case; body Onest, 20px; scale h1 88px / h2 11px / h3 19px
- Shape & spacing
button radius 4px, card radius 16px, no borders, subtle shadows, section spacing 80px, content width 1040px
- Sections (top to bottom)
- Header — horizontal nav with logo center, language selector, CTA button, white background
- Hero — full-width headline with "don't build it" in blue, subheadline, two CTA buttons, product demo screenshot below, light gray background
- Solutions — grid of cards with product families, each with title, description, and "View family" link, white background
- Projects — 8-card grid with project icons and titles, white background
- Blog preview — dark background with 6 feature cards showing AI agent workflows, each with icon, title, and brief description
- Footer — minimal, hidden in screenshots
- Signature details
- Animated shader effect on hero headline
- Product demo screenshots with UI overlays and status indicators
- Consistent use of rounded corners and soft shadows
- Color-coded status tags (green, yellow, red) in tables
- Clean, minimalist layout with generous whitespace
- Interactive elements with hover states and micro-interactions
- Other pages
- /blog: two-column article list with category filters, metadata, and reading time
- /arm: same as home but with Armenian locale text and localized CTA
تفاصيل القالب
- الفئة
- Landing Page, Portfolio, SaaS, AI, Agency
- المؤلف
- lyanchouss
- منشور على
- 21st.dev
- السعر
- الأصلي $39
- Portfolio
- Landing Page
- AI
- Marketing
- Startup
- Agency
- Personal Website
- SaaS
- Startup Landing
- Shader
التصميم الأصلي من lyanchouss، منشور على 21st.dev. لا ينسخ Ottermind شيفرة القالب، بل ينشئ موقعًا جديدًا انطلاقًا من الموجز.
الموجز الذي يبدأ منه Ottermind
يُفتح في Studio كمسودة؛ أضف علامتك التجارية وجمهورك وصفحاتك قبل الإرسال.
Build a landing page website inspired by the "Northstar" template. Reference brief: Northstar is a production-ready Next.js template for AI agencies, agent studios, and development teams that need to present software delivery clearly. It includes four locales (EN, RU, KA, HY), a responsive shader hero, animated product demos, solution pages, case studies, a Markdown blog, service pages, PostHog and Vercel Analytics integration points, metadata, locale alternates, sitemap, and JSON-LD. The buyer-ready source uses fictional Northstar branding, placeholder people, clients, media, contact details, domains, and integration identifiers so the identity can be replaced safely. No CMS or database is required; copy is stored in typed TypeScript locale bundles and Markdown. Style and features to reflect: Marketing, Startup, Personal Website, Startup Landing, Shader. Use original copy and imagery for my brand rather than the reference's placeholder content.
كيفية استخدام هذا القالب
- 1
انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.
- 2
أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.
- 3
ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.
