قالب موقع ويب

Hugo Blox - Tailwind

Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included.

وصف هذا القالب غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

Landing Page · Portfolio · مجاني

Hugo Blox - Tailwind

الصفحات

لقطات من العرض المباشر، صفحة تلو الأخرى. مرّر داخل الصفحة لرؤيتها كاملة.

/Home | Beacon
قالب الموقع Hugo Blox - Tailwind، صفحة /، الجزء 1قالب الموقع Hugo Blox - Tailwind، صفحة /، الجزء 2قالب الموقع Hugo Blox - Tailwind، صفحة /، الجزء 3قالب الموقع Hugo Blox - Tailwind، صفحة /، الجزء 4قالب الموقع Hugo Blox - Tailwind، صفحة /، الجزء 5قالب الموقع Hugo Blox - Tailwind، صفحة /، الجزء 6
/blog/Blog | Beacon
قالب الموقع Hugo Blox - Tailwind، صفحة /blog/، الجزء 1قالب الموقع Hugo Blox - Tailwind، صفحة /blog/، الجزء 2قالب الموقع Hugo Blox - Tailwind، صفحة /blog/، الجزء 3
/changelog/Changelog | Beacon
قالب الموقع Hugo Blox - Tailwind، صفحة /changelog/، الجزء 1

تحليل التصميم

قراءة بالذكاء الاصطناعي لتصميم هذا القالب: الألوان والخطوط والمسافات والأقسام والتفاصيل المميزة. يبدأ منها Ottermind عند استخدام القالب.

هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.

Overall

landing page, modern and clean, medium density, light/dark

Palette

background #ffffff; surfaces [#f1f5f9, #0a0e27, #111827, #eef2ff]; text #111827; muted text #4b5563; primary #4f39f6; accents [#155dfc]

Type

headings Montserrat, 700, title case; body Poppins, 18px; scale h1 60px / h2 36px / h3 18px

Shape & spacing

button/card radius 9999px, no borders, subtle shadows, section spacing 80px, content width 768px

Sections (top to bottom)
  • Header — fixed navigation bar with logo, menu items, search, and user icon, white background
  • Hero — full-width gradient background from dark blue to black, centered headline, subheadline, two CTA buttons, rating badge, and logo row
  • Stats — three-column layout on white background with large numbers in purple, descriptive text below
  • Features — two-column layout with left-side large card and right-side smaller cards, white background
  • Comparison table — four-column comparison grid with highlighted column, light gray background
  • Pricing — three-column pricing cards with toggle switch above, white background
  • Product section — image on left, text and CTA on right, light gray background
  • Testimonial section — image on right, text and bullet points on left, light gray background
Signature details
  • Gradient hero background with deep blue to black transition
  • Rounded pill-shaped buttons with sharp corners (9999px radius)
  • Purple accent color used consistently for CTAs and highlights
  • Minimalist card design with soft shadows and no borders
  • Consistent use of Poppins and Montserrat typefaces
  • Clean spacing with generous padding and consistent rhythm
Other pages
  • /blog/: vertical list of blog posts with featured images, tags, author, date, read time, and "Read more" links
  • /changelog/: simple list of version updates with dates, titles, descriptions, and "Read more" links, footer with logo, social icons, and site navigation

تفاصيل القالب

الفئة
Landing Page, Portfolio, Blog, Agency
التقنيات
Hugo
الترخيص
MIT
المؤلف
George Cushen
منشور على
Hugo Themes
السعر
مجاني
  • blog
  • company
  • dark
  • landing
  • minimal
  • multilingual
  • portfolio

التصميم الأصلي من George Cushen، منشور على Hugo Themes. لا ينسخ Ottermind شيفرة القالب، بل ينشئ موقعًا جديدًا انطلاقًا من الموجز.

الموجز الذي يبدأ منه Ottermind

يُفتح في Studio كمسودة؛ أضف علامتك التجارية وجمهورك وصفحاتك قبل الإرسال.

Build a landing page website inspired by the "Hugo Blox" template. Reference brief: Create any kind of website with fully customizable widgets - 50+ light/dark color themes, language packs, and widgets included. Style and features to reflect: blog, company, dark, landing, minimal, multilingual. Use original copy and imagery for my brand rather than the reference's placeholder content.

كيفية استخدام هذا القالب

  1. 1

    انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.

  2. 2

    أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.

  3. 3

    ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.