قالب موقع ويب
T3Code - Cinematic Dark SaaS Landing Page Template
A clean, high-performance dark-mode SaaS landing page template built with Next.js 16, React 19, Tailwind CSS v4, Motion, and Three.js. Includes cinematic hero choreography, WebGL effects, responsive layouts, interactive micro-interactions, and reusable components.
وصف هذا القالب غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.
Landing Page · SaaS · الأصلي $45
الصفحات
لقطات من العرض المباشر، صفحة تلو الأخرى. مرّر داخل الصفحة لرؤيتها كاملة.
تحليل التصميم
قراءة بالذكاء الاصطناعي لتصميم هذا القالب: الألوان والخطوط والمسافات والأقسام والتفاصيل المميزة. يبدأ منها Ottermind عند استخدام القالب.
هذا التحليل غير متوفر بالعربية بعد، لذلك يظهر بالإنجليزية.
- Overall
SaaS landing page, cinematic, low density, dark
- Palette
background #0a0a0a; surfaces [#000000, #ffffff, #4922e5, #a558fb]; text #ffffff; muted text #9f9fa9; primary #4922e5; accents [#4922e5, #a558fb]
- Type
headings Syne, 600, sentence-case; body Geist, 14px; scale h1 48px, h2 32px, p 14px
- Shape & spacing
button radius 12px, card radius 18px, borders none, shadows rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 1px 2px -1px, section spacing 120px, content width 1004px
- Sections (top to bottom)
- Hero — full-width, centered layout, two-line headline with pixel art icon, subheading, two CTA buttons (Download for macOS, Source), curved purple glow gradient background from top edge
- Testimonials — horizontal scrollable row of five user cards with avatar, name, handle, quote, and X icon; each card has rounded corners and subtle shadow; labeled "TRUSTED BY BUILDERS AND CREATORS WORLDWIDE" above
- Features — left-aligned heading and paragraph, three pill-shaped tags below, right-side abstract circular graphic with layered rings and logo at center
- Call-to-action — centered card with rounded corners, dark overlay, dotted pattern background, headline, subtext, and two CTA buttons (same as hero)
- Footer — thin line divider, left-aligned logo and copyright, right-aligned navigation links
- Signature details
- Curved purple ambient glow across top of hero
- Subtle dot matrix pattern in CTA card background
- Floating circular graphic with concentric rings and central logo
- Interactive testimonial cards with hover effects
- Smooth motion choreography on scroll
- WebGL-style depth effects in abstract visuals
- Other pages
- /docs: Documentation page with sidebar navigation and code examples
- /changelog: Version history with release notes and timestamps
تفاصيل القالب
- الفئة
- Landing Page, SaaS
- التقنيات
- Tailwind CSS, Next.js, React, Three.js
- المؤلف
- jahed
- منشور على
- 21st.dev
- السعر
- الأصلي $45
- Animation
- Landing Page
- SaaS
- Tailwind
- Next.js
- React
- Three.js
- Dark
التصميم الأصلي من jahed، منشور على 21st.dev. لا ينسخ Ottermind شيفرة القالب، بل ينشئ موقعًا جديدًا انطلاقًا من الموجز.
الموجز الذي يبدأ منه Ottermind
يُفتح في Studio كمسودة؛ أضف علامتك التجارية وجمهورك وصفحاتك قبل الإرسال.
Build a landing page website inspired by the "T3Code" template. Reference brief: A clean, high-performance dark-mode SaaS landing page template built with Next.js 16, React 19, Tailwind CSS v4, Motion, and Three.js. Includes cinematic hero choreography, WebGL effects, responsive layouts, interactive micro-interactions, and reusable components. Style and features to reflect: Animation, Tailwind, Next.js, React, Three.js, Dark. Use original copy and imagery for my brand rather than the reference's placeholder content.
كيفية استخدام هذا القالب
- 1
انقر على «استخدم هذا القالب» لفتحه في Ottermind Studio مع ملء الموجز.
- 2
أضف إلى الموجز علامتك التجارية وجمهورك وصفحاتك ومحتواك.
- 3
ينشئ Ottermind موقعًا جديدًا مستوحى من هذا التصميم، وتابع تعديله في المحادثة.
