feat: implement Dekupai product landing page with supporting assets and database seeder
This commit is contained in:
Ümit Tunç
@@ -23,6 +23,7 @@ class DatabaseSeeder extends Seeder
|
||||
YapayZekaPageSeeder::class,
|
||||
SiteTranslationsSeeder::class,
|
||||
CompanyHistoryItemSeeder::class,
|
||||
DekupaiProductSeeder::class,
|
||||
]);
|
||||
|
||||
// User::factory(10)->create();
|
||||
|
||||
@@ -0,0 +1,731 @@
|
||||
<?php
|
||||
|
||||
namespace Database\Seeders;
|
||||
|
||||
use App\Models\Product;
|
||||
use Illuminate\Database\Seeder;
|
||||
|
||||
class DekupaiProductSeeder extends Seeder
|
||||
{
|
||||
public function run(): void
|
||||
{
|
||||
$title = [
|
||||
'tr' => 'Dekupai (Yapay Zeka Arka Plan Temizleme & Dekupe Stüdyosu)',
|
||||
'en' => 'Dekupai (AI Background Remover & Decoupage Studio)',
|
||||
'de' => 'Dekupai (KI-Hintergrundentferner & Dekoupage-Studio)',
|
||||
'ar' => 'Dekupai (استوديو عزل الخلفية والديكوباج بالذكاء الاصطناعي)',
|
||||
'se' => 'Dekupai (AI-bakgrundsborttagare & dekoupage-studio)',
|
||||
'ru' => 'Dekupai (ИИ для удаления фона и студия декупажа)',
|
||||
];
|
||||
|
||||
$content = [
|
||||
'tr' => '
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container py-14">
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss1.png" alt="BiRefNet Yapay Zeka Motoru" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Yerel Güç: BiRefNet Derin Öğrenme Motoru</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupai, yerel CPU/GPU birimleriniz üzerinde doğrudan çalışan **BiRefNet (Bilateral Reference Network)** modelini entegre eder. Verilerinizi hiçbir harici sunucuya veya bulut servisine göndermeden, %100 gizlilik ve sıfır veri sızıntısı riskiyle çalışırsınız. En ince detayları, saç tellerini ve yarı şeffaf nesneleri bile pürüzsüzce ayıklar.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-shield-check before:content-[\'ec47\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">%100 Yerel Çıkarım</h4>
|
||||
<p class="text-sm mb-0">İnternet bağlantısına ihtiyaç duymadan, yerel donanımınızın gücüyle arka planları kaldırın.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss2.png" alt="Gelişmiş Kırpma Editörü" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Profesyonel Kırpma ve Hizalama</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dahili **Cropper.js** entegrasyonu sayesinde isolasyon öncesi veya sonrası görsellerinizi dilediğiniz gibi boyutlandırın. Kare (Square), Hikaye (Story), Sinema (Cinema) ve Portre (Portrait) gibi hazır en boy oranlarını kullanabilir, 90 derece döndürme ve simetrik yansıtma işlemlerini anında gerçekleştirebilirsiniz.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-crop-alt-rotate before:content-[\'ea75\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Hazır En-Boy Şablonları</h4>
|
||||
<p class="text-sm mb-0">Sosyal medya platformları ve e-ticaret siteleri için hazır şablonlarla hızlıca boyutlandırın.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss3.png" alt="Auto-Trim Teknolojisi" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Tek Tıklamayla Kenar Kırpma (Auto-Trim)</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupai\'nin akıllı **Auto-Trim** algoritması, görseldeki boş şeffaf alanları otomatik olarak tarar. Subject izolasyonu bittiği an, görsel sınırlarını öznenizin dolu piksellerine tam sıfıra sıfır oturacak şekilde kırparak e-ticaret siteleriniz için optimize edilmiş ideal görseller üretir.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-expand-arrows before:content-[\'eae0\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Kusursuz Pixel Sınırları</h4>
|
||||
<p class="text-sm mb-0">Fazlalık şeffaf alanları tek tıkla silerek dosya boyutunu ve çerçeve yapısını en iyi hale getirin.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss4.png" alt="Backdrop ve Kompozitör Stüdyosu" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Arka Plan Kompozitörü & Sınırsız Renk</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">İzole ettiğiniz özneleri sadece şeffaf bırakmakla kalmayın! Dahili renk tekeri ve swatch paneli ile düz renkler seçin ya da önceden hazırlanmış göz alıcı **Premium Degradeler (Gradients)** atayarak saniyeler içinde etkileyici pazarlama görselleri ve afiş tasarımları oluşturun.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-palette before:content-[\'ec40\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Yaratıcı Degrade Tasarımlar</h4>
|
||||
<p class="text-sm mb-0">Öznelerinize anında şık arka planlar yerleştirerek profesyonel tasarımları tek elden çıkarın.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
',
|
||||
'en' => '
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container py-14">
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss1.png" alt="BiRefNet AI Engine" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Local Power: BiRefNet Deep Learning Engine</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupai integrates the state-of-the-art **BiRefNet (Bilateral Reference Network)** model, running entirely locally on your own CPU/GPU hardware. Work with 100% privacy and zero data leakage risk as no images are uploaded to external cloud services. Isolates thin hair strands and complex objects seamlessly.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-shield-check before:content-[\'ec47\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">100% Local Inference</h4>
|
||||
<p class="text-sm mb-0">Erase backgrounds locally using your device\'s hardware, offline with no internet needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss2.png" alt="Advanced Crop Editor" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Professional Cropping & Aspect Presets</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Shape and crop your isolated subjects before or after background removal using the integrated **Cropper.js** engine. Use quick preset ratios like Square, Story, Cinema, or Portrait, or rotate and flip your canvas symmetrically in one go.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-crop-alt-rotate before:content-[\'ea75\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Ready Aspect Ratios</h4>
|
||||
<p class="text-sm mb-0">Easily resize your assets for major social media platforms and digital storefronts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss3.png" alt="Auto-Trim Technology" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">One-Click Border Crop (Auto-Trim)</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupai\'s smart **Auto-Trim** algorithm automatically scans the empty transparent border alpha values. The moment the extraction process concludes, it perfectly shrinks and fits the crop box right around the solid subject pixels, optimizing margins for e-commerce.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-expand-arrows before:content-[\'eae0\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Pixel-Perfect Margins</h4>
|
||||
<p class="text-sm mb-0">Maximize file compression and strip away unneeded blank areas instantly with a single button click.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss4.png" alt="Backdrop Compositor Studio" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Studio Backdrop & Gradient Compositor</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Don\'t settle for simple transparency! Paint beautiful flat solid backdrops using a quick color wheel, or assign eye-catching pre-configured **Premium Gradients** to transform isolated elements into high-impact marketing visuals in real-time.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-palette before:content-[\'ec40\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Premium Gradients Backdrop</h4>
|
||||
<p class="text-sm mb-0">Create outstanding graphics for promotions, cards, or catalogs on the fly without extra tools.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
',
|
||||
'de' => '
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container py-14">
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss1.png" alt="BiRefNet KI-Engine" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Lokale Leistung: BiRefNet Deep Learning Engine</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupai integriert das hochmoderne **BiRefNet (Bilateral Reference Network)**-Modell, das direkt auf Ihren lokalen CPU/GPU-Ressourcen läuft. Arbeiten Sie mit 100%iger Privatsphäre und ohne Risiko von Datenlecks, da keine Bilder auf externe Server hochgeladen werden. Selbst feinste Details wie Haare werden perfekt isoliert.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-shield-check before:content-[\'ec47\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">100% Lokale Berechnung</h4>
|
||||
<p class="text-sm mb-0">Entfernen Sie Hintergründe offline, vollständig lokal über die Hardware Ihres Computers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss2.png" alt="Zuschneide-Editor" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Professionelles Zuschneiden & Seitenverhältnisse</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Passen Sie Ihre freigestellten Motive vor oder nach der Freistellung mit dem integrierten **Cropper.js**-Editor an. Nutzen Sie Vorlagen wie Quadrat (Square), Story, Kino (Cinema) und Porträt (Portrait) oder drehen Sie Ihr Bild im Handumdrehen.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-crop-alt-rotate before:content-[\'ea75\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Vordefinierte Vorlagen</h4>
|
||||
<p class="text-sm mb-0">Formatieren Sie Bilder mühelos für Social-Media-Kanäle und Online-Shops.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss3.png" alt="Auto-Trim Technologie" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Automatisches Trimmen der Kanten (Auto-Trim)</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Der intelligente **Auto-Trim**-Algorithmus von Dekupai scannt automatisch ungenutzte transparente Bereiche. Nach der Segmentierung wird der Zuschnittrahmen direkt an den gefüllten Pixeln des Objekts ausgerichtet – ideal für perfekt optimierte E-Commerce-Bilder.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-expand-arrows before:content-[\'eae0\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Präzise Pixelgrenzen</h4>
|
||||
<p class="text-sm mb-0">Überflüssige transparente Ränder mit einem Klick entfernen und die Dateigröße reduzieren.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss4.png" alt="Komposition und Studio" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Hintergrund-Compositor & Degradé-Studio</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Nutzen Sie mehr als nur Transparenz! Wählen Sie Volltonfarben über ein integriertes Farbrad oder weisen Sie atemberaubende **Premium-Farbverläufe** zu, um freigestellte Elemente in Sekundenschnelle in professionelle Werbematerialien zu verwandeln.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-palette before:content-[\'ec40\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Kreative Farbverläufe</h4>
|
||||
<p class="text-sm mb-0">Setzen Sie Ihr Produkt sofort in Szene, ganz ohne zusätzliche Grafikprogramme.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
',
|
||||
'se' => '
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container py-14">
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss1.png" alt="BiRefNet AI Motor" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Lokal kraft: BiRefNet AI-motor</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupai integrerar den banbrytande **BiRefNet (Bilateral Reference Network)**-modellen som körs direkt på dina egna lokala CPU/GPU-enheter. Du arbetar med 100% integritet och utan risk för dataläckor eftersom inga bilder skickas till externa molntjänster. Den tar bort bakgrunder med precision, även för fina hårstrån.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-shield-check before:content-[\'ec47\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">100% Lokal exekvering</h4>
|
||||
<p class="text-sm mb-0">Ta bort bakgrunder offline helt med hjälp av kraften i din lokala hårdvara.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss2.png" alt="Beskärningsverktyg" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Professionell beskärning och storleksmallar</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Forma och beskär dina isolerade objekt före eller efter bakgrundsborttagning med det integrerat **Cropper.js**-verktyget. Använd färdiga mallar som Kvadrat (Square), Story, Bio (Cinema) och Porträtt (Portrait), eller rotera bilderna enkelt.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-crop-alt-rotate before:content-[\'ea75\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Färdiga bildformat</h4>
|
||||
<p class="text-sm mb-0">Redigera snabbt dina bilder för sociala medier och e-handelsplattformar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss3.png" alt="Auto-Trim teknik" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Automatisk kantbeskärning (Auto-Trim)</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupais intelligenta **Auto-Trim**-algoritm skannar automatiskt tomma transparenta områden. Så snart segmenteringen är klar beskärs bildgränserna perfekt runt objektets fyllda pixlar – perfekt för produktbilder inom e-handel.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-expand-arrows before:content-[\'eae0\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Perfekta pixelgränser</h4>
|
||||
<p class="text-sm mb-0">Ta bort onödigt tomrum med ett klick för att optimera filstorleken.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss4.png" alt="Bakgrundsverktyg" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Bakgrundskompositör & gradienter</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Nöj dig inte med bara transparens! Skapa vackra enfärgade bakgrunder med ett färgshjul eller lägg till iögonfallande **Premium-gradienter** för att förvandla dina urklippta bilder till färdigt marknadsföringsmaterial direkt.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-palette before:content-[\'ec40\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Kreativa bakgrunder</h4>
|
||||
<p class="text-sm mb-0">Skapa stilfulla bilder för dina produkter utan behov av externa grafikprogram.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
',
|
||||
'ar' => '
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container py-14">
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss1.png" alt="BiRefNet AI Engine" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">القوة المحلية: محرك التعلم العميق BiRefNet</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">يدمج Dekupai نموذج **BiRefNet (Bilateral Reference Network)** الأكثر تطوراً، والذي يعمل مباشرة على وحدات المعالجة المحلية (CPU/GPU) الخاصة بك. اعمل بخصوصية 100% ودون أي مخاطرة بتسريب البيانات لعدم رفع الصور إلى أي خادم خارجي. يعزل خصلات الشعر والتفاصيل الدقيقة بكل انسيابية.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-shield-check before:content-[\'ec47\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">معالجة محلية 100%</h4>
|
||||
<p class="text-sm mb-0">اعزل خلفيات صورك دون الحاجة للاتصال بالإنترنت وبالاعتماد الكامل على عتاد جهازك.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss2.png" alt="Cropper Editor" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">قص الصورة والتحكم في الأبعاد باحترافية</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">تتيح لك أداة **Cropper.js** المدمجة قص وتعديل مقاسات صورك بكل سهولة قبل أو بعد عزل الخلفية. يمكنك الاختيار من بين الأبعاد الجاهزة مثل المربع (Square)، والقصة (Story)، والسينما (Cinema)، والبورتريه (Portrait)، أو تدوير الصورة وعكسها بنقرة واحدة.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-crop-alt-rotate before:content-[\'ea75\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">قوالب أبعاد جاهزة</h4>
|
||||
<p class="text-sm mb-0">تعديل حجم صورك بسرعة وملاءمتها لمنصات التواصل الاجتماعي والمتاجر الإلكترونية.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss3.png" alt="Auto-Trim Technology" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">ملاءمة الحواف التلقائية بنقرة واحدة (Auto-Trim)</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">يقوم خوارزم ذكي مدمج **Auto-Trim** بمسح المناطق الشفافة الفارغة في الصورة تلقائياً. فور انتهاء عملية العزل، يتم ملاءمة حدود القص بدقة متناهية حول بكسلات العنصر المعزول، مما يمنحك صوراً مثالية ومهيأة للتجارة الإلكترونية.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-expand-arrows before:content-[\'eae0\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">حدود بكسل دقيقة</h4>
|
||||
<p class="text-sm mb-0">تخلص من المساحات الفارغة غير الضرورية لتقليص حجم الملف وتحسين أبعاد الإطار.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss4.png" alt="Backdrop Compositor Studio" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">استوديو تركيب الخلفيات والتدرجات اللونية</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">لا تكتفِ بالخلفية الشفافة! يمكنك اختيار ألوان موحدة لصورك عبر لوحة ألوان سريعة، أو تعيين تدرجات لونية مذهلة **Premium Gradients** لتصميم ملصقات دعائية وصور تسويقية فريدة في ثوانٍ معدودة.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-palette before:content-[\'ec40\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">خلفيات تدرج لوني مبتكرة</h4>
|
||||
<p class="text-sm mb-0">ضع منتجك في إطار احترافي ومبتكر دون الحاجة لاستخدام برامج تصميم خارجية.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
',
|
||||
'ru' => '
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container py-14">
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss1.png" alt="Нейросеть BiRefNet" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Локальная мощность: Нейросеть BiRefNet</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Dekupai интегрирует передовую нейросетевую модель **BiRefNet (Bilateral Reference Network)**, работающую локально на вашем процессоре или видеокарте. Ваши данные на 100% защищены, так как изображения не отправляются в облако. Нейросеть идеально вырезает мельчайшие детали, включая отдельные волоски.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-shield-check before:content-[\'ec47\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">100% локальная работа</h4>
|
||||
<p class="text-sm mb-0">Удаляйте фон без подключения к интернету, используя всю мощность вашего компьютера.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss2.png" alt="Умная обрезка" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Профессиональное кадрирование и пропорции</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Обрезайте и масштабируйте объекты до или после удаления фона благодаря встроенному редактору **Cropper.js**. Используйте готовые пресеты: квадрат (Square), сторис (Story), кино (Cinema) и портрет (Portrait), или отражайте холст по горизонтали/вертикали.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-crop-alt-rotate before:content-[\'ea75\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Готовые форматы</h4>
|
||||
<p class="text-sm mb-0">Быстро готовьте изображения для социальных сетей и маркетплейсов.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center mb-16">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-2">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss3.png" alt="Технология Auto-Trim" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full order-lg-1 pr-lg-10">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Умная обрезка пустых полей (Auto-Trim)</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Интеллектуальный алгоритм **Auto-Trim** сканирует прозрачные пиксели на границах. Сразу после удаления фона программа автоматически обрезает изображение точно по контуру вашего объекта, создавая идеальные карточки товаров.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-expand-arrows before:content-[\'eae0\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Идеальные границы объекта</h4>
|
||||
<p class="text-sm mb-0">Удаляйте лишние прозрачные поля в один клик для оптимизации размера файлов.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] items-center">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full">
|
||||
<figure class="rounded-[0.8rem] shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.12)] overflow-hidden">
|
||||
<img src="/storage/products/dekupai-ss4.png" alt="Редактор фона" class="w-full h-auto">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[15px] max-w-full pl-lg-10 mt-8 lg:mt-0">
|
||||
<h2 class="display-6 font-bold mb-4 !text-[1.8rem]">Редактор фона и премиум градиенты</h2>
|
||||
<p class="mb-6 text-gray-700 leading-[1.6]">Не ограничивайтесь прозрачным фоном! Заливайте подложку сплошным цветом или накладывайте стильные **Премиум-градиенты** для мгновенного создания ярких рекламных баннеров и постеров прямо в приложении.</p>
|
||||
<div class="flex items-start mb-3">
|
||||
<span class="btn btn-circle btn-soft-danger pointer-events-none mr-3 w-8 h-8 inline-flex items-center justify-center rounded-full"><i class="uil uil-palette before:content-[\'ec40\']"></i></span>
|
||||
<div>
|
||||
<h4 class="font-bold mb-1 text-[1rem]">Креативные градиенты</h4>
|
||||
<p class="text-sm mb-0">Создавайте потрясающий графический контент без использования сторонних программ.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
',
|
||||
];
|
||||
|
||||
$landingPageData = [
|
||||
'hero' => [
|
||||
'slogan' => 'Yapay Zeka ile Kusursuz Arka Plan Temizleme',
|
||||
'slogan_tr' => 'Yapay Zeka ile Kusursuz Arka Plan Temizleme',
|
||||
'slogan_en' => 'Flawless Background Removal with Local AI',
|
||||
'slogan_de' => 'Makellose Hintergrundentfernung mit lokaler KI',
|
||||
'slogan_ar' => 'إزالة مثالية للخلفية باستخدام الذكاء الاصطناعي المحلي',
|
||||
'slogan_se' => 'Felfri bakgrundsborttagning med lokal AI',
|
||||
'slogan_ru' => 'Безупречное удаление фона локальным ИИ',
|
||||
|
||||
'sub_slogan' => 'En karmaşık kenarları, saç tellerini ve şeffaf nesneleri yerel bilgisayarınızda saniyeler içinde ayıklayın.',
|
||||
'sub_slogan_tr' => 'En karmaşık kenarları, saç tellerini ve şeffaf nesneleri yerel bilgisayarınızda saniyeler içinde ayıklayın.',
|
||||
'sub_slogan_en' => 'Extract the most complex edges, hair strands, and translucent objects on your local machine in seconds.',
|
||||
'sub_slogan_de' => 'Trennen Sie komplexeste Kanten, Haare und transparente Objekte in Sekundenschnelle auf Ihrem PC.',
|
||||
'sub_slogan_ar' => 'اعزل خصلات الشعر والتفاصيل المعقدة والأجسام الشفافة محلياً على جهازك في ثوانٍ.',
|
||||
'sub_slogan_se' => 'Isolera komplexa kanter, hårstrån och transparenta föremål på din lokala dator på några sekunder.',
|
||||
'sub_slogan_ru' => 'Выделяйте самые сложные контуры, волосы и полупрозрачные объекты на локальном ПК за секунды.',
|
||||
|
||||
'background_image' => 'html/assets/img/photos/bg23.webp',
|
||||
'featured_image' => 'products/dekupai-ss1.png',
|
||||
'app_store_link' => '',
|
||||
'google_play_link' => '',
|
||||
],
|
||||
'features' => [
|
||||
[
|
||||
'title_tr' => 'BiRefNet Yapay Zeka Motoru',
|
||||
'title_en' => 'BiRefNet Neural Engine',
|
||||
'title_de' => 'BiRefNet-KI-Motor',
|
||||
'title_ar' => 'محرك BiRefNet الذكي',
|
||||
'title_se' => 'BiRefNet AI-motor',
|
||||
'title_ru' => 'Нейросеть BiRefNet',
|
||||
'icon' => 'processor',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
[
|
||||
'title_tr' => 'Akıllı Kırpma Editörü',
|
||||
'title_en' => 'Smart Cropping Studio',
|
||||
'title_de' => 'Intelligentes Zuschneiden',
|
||||
'title_ar' => 'استوديو القص الذكي',
|
||||
'title_se' => 'Smart beskärning',
|
||||
'title_ru' => 'Умная обрезка',
|
||||
'icon' => 'crop',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
[
|
||||
'title_tr' => 'Arka Plan Kompozitörü',
|
||||
'title_en' => 'Background Compositor',
|
||||
'title_de' => 'Hintergrund-Compositor',
|
||||
'title_ar' => 'تركيب الخلفيات',
|
||||
'title_se' => 'Bakgrundskompositör',
|
||||
'title_ru' => 'Редактор фона',
|
||||
'icon' => 'paint',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
[
|
||||
'title_tr' => 'Kayıpsız Dışa Aktarma',
|
||||
'title_en' => 'Lossless Format Export',
|
||||
'title_de' => 'Verlustfreier Export',
|
||||
'title_ar' => 'تصدير بدون فقدان الجودة',
|
||||
'title_se' => 'Förlustfri export',
|
||||
'title_ru' => 'Сохранение без потерь',
|
||||
'icon' => 'image',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
],
|
||||
'how_it_works' => [
|
||||
'download_image' => '',
|
||||
'download_form_label' => 'Dekupai Nasıl Çalışır?',
|
||||
'download_form_label_tr' => 'Dekupai Nasıl Çalışır?',
|
||||
'download_form_label_en' => 'How Dekupai Works',
|
||||
'download_form_label_de' => 'Wie funktioniert Dekupai?',
|
||||
'download_form_label_ar' => 'كيف يعمل Dekupai؟',
|
||||
'download_form_label_se' => 'Hur fungerar Dekupai?',
|
||||
'download_form_label_ru' => 'Как работает Dekupai?',
|
||||
'steps' => [
|
||||
[
|
||||
'number' => 1,
|
||||
'title_tr' => 'Görseli İçe Aktar',
|
||||
'title_en' => 'Import Image',
|
||||
'title_de' => 'Bild importieren',
|
||||
'title_ar' => 'رفع الصورة',
|
||||
'title_se' => 'Ladda upp bild',
|
||||
'title_ru' => 'Загрузите фото',
|
||||
'description_tr' => 'Dilediğiniz görseli sürükleyip bırakın veya göz atarak seçin.',
|
||||
'description_en' => 'Drag and drop any image or browse to select a local file.',
|
||||
'description_de' => 'Ziehen Sie ein Bild per Drag & Drop oder wählen Sie eine Datei aus.',
|
||||
'description_ar' => 'اسحب صورتك وأفلتها في منطقة السحب أو تصفح ملفاتك.',
|
||||
'description_se' => 'Dra och släpp en bild eller välj den från dina filer.',
|
||||
'description_ru' => 'Перетащите изображение в область загрузки или выберите файл.',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
[
|
||||
'number' => 2,
|
||||
'title_tr' => 'Tek Tıkla Arka Planı Kaldır',
|
||||
'title_en' => 'Extract with One Click',
|
||||
'title_de' => 'Mit einem Klick freistellen',
|
||||
'title_ar' => 'عزل بنقرة واحدة',
|
||||
'title_se' => 'Ta bort bakgrund',
|
||||
'title_ru' => 'Удалите фон в один клик',
|
||||
'description_tr' => 'BiRefNet yapay zeka modelini çalıştırarak subjecti anında ayıklayın.',
|
||||
'description_en' => 'Run the local BiRefNet deep learning model to instantly segment the subject.',
|
||||
'description_de' => 'Führen Sie das lokale BiRefNet-Modell aus, um das Motiv sofort freizustellen.',
|
||||
'description_ar' => 'شغل نموذج التعلم العميق لعزل العنصر بدقة متناهية في ثوانٍ.',
|
||||
'description_se' => 'Kör den lokala AI-modellen för att separera objektet direkt.',
|
||||
'description_ru' => 'Запустите локальную нейросеть для мгновенного удаления фона.',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
[
|
||||
'number' => 3,
|
||||
'title_tr' => 'Hizala & Kırp',
|
||||
'title_en' => 'Crop & Fine-Tune',
|
||||
'title_de' => 'Zuschneiden & Anpassen',
|
||||
'title_ar' => 'التعديل والقص',
|
||||
'title_se' => 'Justera & Redigera',
|
||||
'title_ru' => 'Кадрируйте и дорабатывайте',
|
||||
'description_tr' => 'En boy oranını sınırlayın veya Auto-Trim ile kenarlara tam oturtun.',
|
||||
'description_en' => 'Crop to aspect presets or snap margins securely around subject borders with Auto-Trim.',
|
||||
'description_de' => 'Wählen Sie Seitenverhältnisse oder passen Sie Kanten mit Auto-Trim an.',
|
||||
'description_ar' => 'تحكم في أبعاد الصورة وملاءمة حواف القص تلقائياً.',
|
||||
'description_se' => 'Välj bildformat eller anpassa kanterna med Auto-Trim.',
|
||||
'description_ru' => 'Выберите формат или автоматически обрежьте края с Auto-Trim.',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
[
|
||||
'number' => 4,
|
||||
'title_tr' => 'Stil Ver & Dışa Aktar',
|
||||
'title_en' => 'Style & Export',
|
||||
'title_de' => 'Stylen & Exportieren',
|
||||
'title_ar' => 'التصميم والتصدير',
|
||||
'title_se' => 'Stil & Exportera',
|
||||
'title_ru' => 'Оформляйте и сохраняйте',
|
||||
'description_tr' => 'Düz renk veya degradeler ekleyin, kayıpsız formatta kalitesini seçip kaydedin.',
|
||||
'description_en' => 'Add custom flat fills or premium gradients and export as PNG, JPEG, or WebP.',
|
||||
'description_de' => 'Fügen Sie Farben oder Verläufe hinzu und speichern Sie als PNG, JPEG oder WebP.',
|
||||
'description_ar' => 'أضف تدرجات لونية مميزة واحفظ الصورة بصيغة PNG أو JPEG أو WebP.',
|
||||
'description_se' => 'Välj bakgrundsfärg eller gradient och spara som PNG, JPEG eller WebP.',
|
||||
'description_ru' => 'Добавляйте градиенты и сохраняйте в PNG, JPEG или WebP.',
|
||||
'title' => '',
|
||||
'description' => '',
|
||||
],
|
||||
],
|
||||
],
|
||||
'video' => [
|
||||
'youtube_video_id' => '',
|
||||
'local_video_path' => 'assets/img/dekupai/usage.mp4',
|
||||
],
|
||||
'faqs' => [
|
||||
[
|
||||
'question_tr' => 'Dekupai görsellerimi buluta yüklüyor mu?',
|
||||
'question_en' => 'Does Dekupai upload my images to the cloud?',
|
||||
'question_de' => 'Lädt Dekupai meine Bilder in die Cloud hoch?',
|
||||
'question_ar' => 'هل يقوم Dekupai برفع صوري إلى السحابة؟',
|
||||
'question_se' => 'Laddar Dekupai upp mina bilder till molnet?',
|
||||
'question_ru' => 'Загружает ли Dekupai мои фотографии в облако?',
|
||||
'answer_tr' => 'Hayır. Dekupai, %100 yerel (local) çalışan bir masaüstü uygulamasıdır. Görsel işleme süreçlerinin tamamı kendi bilgisayarınızın donanım gücüyle yapılır. Verileriniz asla dışarı sızmaz ve internet bağlantısı olmadan da güvenle çalışır.',
|
||||
'answer_en' => 'No. Dekupai is a 100% local desktop application. All image segmentation tasks are processed entirely using your own device\'s hardware resources. Your assets never leave your computer and can be processed securely offline.',
|
||||
'answer_de' => 'Nein. Dekupai ist eine vollständig lokale Desktop-Anwendung. Alle Segmentierungsprozesse laufen direkt auf der Hardware Ihres PCs. Ihre Bilder verlassen niemals Ihren Computer und können offline verarbeitet werden.',
|
||||
'answer_ar' => 'لا. Dekupai هو تطبيق سطح مكتب يعمل محلياً بنسبة 100%. تتم جميع عمليات عزل وتعديل الصور باستخدام موارد جهازك دون رفعها إلى أي خادم، مما يضمن أمانها التام وإمكانية العمل بدون اتصال بالإنترنت.',
|
||||
'answer_se' => 'Nej. Dekupai är en 100% lokal skrivbordsapplikation. Alla bildbehandlingsprocesser körs direkt på din egen dators hårdvara. Dina bilder lämnar aldrig din enhet och kan redigeras helt offline.',
|
||||
'answer_ru' => 'Нет. Dekupai работает на 100% локально на вашем ПК. Все процессы обработки изображений выполняются ресурсами вашего компьютера. Ваши файлы никуда не отправляются и защищены от утечек.',
|
||||
'question' => '',
|
||||
'answer' => '',
|
||||
],
|
||||
[
|
||||
'question_tr' => 'BiRefNet AI modeli hangi nesneleri ayıklayabilir?',
|
||||
'question_en' => 'What objects can the BiRefNet AI model segment?',
|
||||
'question_de' => 'Welche Objekte kann das BiRefNet-KI-Modell freistellen?',
|
||||
'question_ar' => 'ما هي الأشياء التي يمكن لنموذج BiRefNet عزلها؟',
|
||||
'question_se' => 'Vilka objekt kan BiRefNet AI-modellen isolera?',
|
||||
'question_ru' => 'Какие объекты может выделять модель BiRefNet?',
|
||||
'answer_tr' => 'BiRefNet; insanlar, hayvanlar, ürünler, e-ticaret nesneleri, araçlar ve bitkiler gibi geniş bir yelpazedeki özneleri yüksek hassasiyetle tanır. Özellikle karmaşık saç telleri, tüyler ve şeffaf/cam nesnelerin kenarlarını kusursuzca ayırt eder.',
|
||||
'answer_en' => 'BiRefNet is trained to segment a wide variety of subjects including humans, pets, e-commerce products, vehicles, and plants. It excels at separating complex edges like fine hair strands, fur, and translucent or glass materials.',
|
||||
'answer_de' => 'BiRefNet wurde entwickelt, um eine Vielzahl von Motiven freizustellen: Menschen, Haustiere, Produkte, Fahrzeuge und Pflanzen. Es glänzt besonders beim Isolieren komplexer Kanten wie feiner Haare, Fell oder transparenter Materialien.',
|
||||
'answer_ar' => 'يتميز نموذج BiRefNet بدقة متناهية في عزل مختلف العناصر مثل الأشخاص، والحيوانات الأليفة، ومنتجات المتاجر الإلكترونية، والسيارات، والنباتات. ويتفوق بشكل خاص في تمييز التفاصيل المعقدة كخصلات الشعر الناعمة والزجاج والأجسام الشفافة.',
|
||||
'answer_se' => 'BiRefNet känner igen en mängd olika objekt som människor, djur, produkter, fordon och växter med hög precision. Den är särskilt bra på att isolera komplexa konturer som hårstrån, päls och transparenta material.',
|
||||
'answer_ru' => 'BiRefNet отлично распознает широкий спектр объектов: людей, животных, товары для маркетплейсов, автомобили и растения. Модель превосходно справляется со сложными контурами, такими как волосы, шерсть или прозрачные материалы.',
|
||||
'question' => '',
|
||||
'answer' => '',
|
||||
],
|
||||
[
|
||||
'question_tr' => 'Auto-Trim özelliği bana ne kazandırır?',
|
||||
'question_en' => 'What does the Auto-Trim feature offer?',
|
||||
'question_de' => 'Was bietet die Auto-Trim-Funktion?',
|
||||
'question_ar' => 'ما الفائدة التي تقدمها لي ميزة Auto-Trim؟',
|
||||
'question_se' => 'Vad ger Auto-Trim-funktionen för fördelar?',
|
||||
'question_ru' => 'Что дает функция Auto-Trim?',
|
||||
'answer_tr' => 'Auto-Trim, izolasyon sonrası görselin çevresindeki boş şeffaf (alfa) pikselleri milimetrik olarak kırpar. Böylece görseliniz öznenin sınırlarına tam oturur. Özellikle e-ticaret siteleri, kataloğu ve mobil uygulamalar için mükemmel uyumlu ürün görselleri oluşturur.',
|
||||
'answer_en' => 'Auto-Trim dynamically scans empty transparent alpha boundaries and snaps the crop frame tight against the outermost solid pixels of your subject. This is highly useful for generating neatly aligned and standardized product listings for online storefronts.',
|
||||
'answer_de' => 'Auto-Trim scannt transparente Ränder und richtet das Zuschneidefenster exakt an den äußersten gefüllten Pixeln Ihres Motivs aus. Dies ist äußerst nützlich, um einheitlich ausgerichtete und standardisierte Produktbilder für Webshops zu erstellen.',
|
||||
'answer_ar' => 'تقom ميزة Auto-Trim بمسح الحدود الشفافة الفارغة في الصورة وملاءمة إطار القص تماماً حول البكسلات الفعلية للعنصر المعزول. هذا مفيد للغاية لإنشاء صور منتجات موحدة ومرتبة للمتاجر الرقمية.',
|
||||
'answer_se' => 'Auto-Trim skannar tomma transparenta områden och anpassar beskärningsrutan exakt efter objektets yttersta pixlar. Detta är mycket användbart för att skapa enhetliga och snygga produktbilder för webbshoppar.',
|
||||
'answer_ru' => 'Auto-Trim автоматически сканирует прозрачные поля и сжимает рамку кадрирования точно по крайним видимым пикселям объекта. Это незаменимо для создания аккуратных и стандартизированных карточек товаров для интернет-магазинов.',
|
||||
'question' => '',
|
||||
'answer' => '',
|
||||
],
|
||||
],
|
||||
];
|
||||
|
||||
Product::updateOrCreate(
|
||||
['slug' => 'dekupai'],
|
||||
[
|
||||
'product_category_id' => 1, // Software
|
||||
'title' => $title,
|
||||
'type' => 'product',
|
||||
'hero_image' => 'products/dekupai-logo.png',
|
||||
'content' => $content,
|
||||
'landing_page_data' => $landingPageData,
|
||||
'view_template' => null,
|
||||
'external_url' => null,
|
||||
'sort_order' => 1,
|
||||
'is_active' => true,
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 460 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 631 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 806 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 411 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 806 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 631 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 592 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
@@ -1,5 +1,4 @@
|
||||
|
||||
@extends('layouts.site', ['headerTemplate' => 'Demo27 Header'])
|
||||
@extends('layouts.site')
|
||||
|
||||
@php
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
@@ -7,6 +6,7 @@ use Illuminate\Support\Facades\Storage;
|
||||
|
||||
@section('title', $product->translate('title') ?? 'Ürün Detayı')
|
||||
@section('meta_description', Str::limit(strip_tags($product->translate('content')), 160))
|
||||
|
||||
@php
|
||||
$landingData = $product->landing_page_data ?? [];
|
||||
$hero = $landingData['hero'] ?? [];
|
||||
@@ -24,295 +24,628 @@ use Illuminate\Support\Facades\Storage;
|
||||
}
|
||||
return $item[$key] ?? $default;
|
||||
};
|
||||
|
||||
$featureBgColors = [
|
||||
'#fef3e4', '#e1f6f0', '#e9eaf8', '#f8e7ec',
|
||||
'#f0eaf6', '#feece9', '#e0e9fa', '#eaf3ef',
|
||||
];
|
||||
|
||||
$platforms = [
|
||||
['name' => 'Android', 'logo' => 'android-copy.png'],
|
||||
['name' => 'iOS', 'logo' => 'ios.png'],
|
||||
['name' => 'Windows', 'logo' => 'windows-logo.png'],
|
||||
['name' => 'macOS', 'logo' => 'apple-logo.png'],
|
||||
['name' => 'Huawei AppGallery', 'logo' => 'huawei.png'],
|
||||
['name' => 'Meta Quest', 'logo' => 'meta.png'],
|
||||
['name' => 'Ubuntu', 'logo' => 'ubuntu.png'],
|
||||
];
|
||||
|
||||
$iconMap = [
|
||||
'processor' => 'uil-cube',
|
||||
'crop' => 'uil-crop-alt-rotate',
|
||||
'paint' => 'uil-palette',
|
||||
'image' => 'uil-image',
|
||||
'cloud' => 'uil-cloud',
|
||||
'safe' => 'uil-shield-check',
|
||||
'touchscreen' => 'uil-mobile-android',
|
||||
];
|
||||
|
||||
$whyChoose = [
|
||||
[
|
||||
'icon' => 'uil-mobile-android',
|
||||
'bg' => '#e6e5f4',
|
||||
'title' => 'Çoklu Platform Uzmanlığı',
|
||||
'description' => 'Trunçgil Teknoloji; mobil, masaüstü, VR ve web için Kotlin, Swift, Flutter, .NET ve Unity tabanlı çözümlerle tek ekipten uçtan uca geliştirme sunar.',
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-windows',
|
||||
'bg' => '#e1f6f0',
|
||||
'title' => 'Windows ve macOS Uygulamaları',
|
||||
'description' => 'WinUI, WPF, Electron ve native macOS uygulamalarıyla kurumsal masaüstü yazılımlarınızı güvenli ve ölçeklenebilir şekilde hayata geçiririz.',
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-store',
|
||||
'bg' => '#f8e7ec',
|
||||
'title' => 'Mağaza ve Dağıtım Deneyimi',
|
||||
'description' => 'Google Play, App Store, Microsoft Store, Huawei AppGallery ve Meta Quest Store yayın süreçlerinde politika uyumu ve inceleme hazırlığı sağlarız.',
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-cube',
|
||||
'bg' => '#fef3e4',
|
||||
'title' => 'Meta Quest ve VR Geliştirme',
|
||||
'description' => 'Eğitim, simülasyon ve etkileşimli deneyimler için Meta Quest platformunda performanslı VR uygulamaları geliştiriyoruz.',
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-shield-check',
|
||||
'bg' => '#e0e9fa',
|
||||
'title' => 'Kapsamlı Test Süreci',
|
||||
'description' => 'Birim testleri, entegrasyon testleri ve hedef platformlarda manuel QA ile uygulamanızı yayına hazır hale getiriyoruz.',
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-headphones-alt',
|
||||
'bg' => '#eaf3ef',
|
||||
'title' => 'Sürekli Bakım ve Destek',
|
||||
'description' => 'Yayın sonrası hata düzeltmeleri, işletim sistemi güncellemelerine uyum ve yeni platform sürümleri için yanınızdayız.',
|
||||
],
|
||||
];
|
||||
|
||||
$testimonials = [
|
||||
[
|
||||
'quote' => 'Mobil uygulamamızı Google Play ve App Gallery\'ye sorunsuz taşıdılar. Çoklu mağaza sürecinde hiç red almadık; her adımda bizi bilgilendirdiler.',
|
||||
'name' => 'Ahmet Yılmaz',
|
||||
'role' => 'Kurucu, Perakende Startup',
|
||||
'bg' => '#f0f0f8',
|
||||
],
|
||||
[
|
||||
'quote' => 'Windows ve macOS sürümlerini mobil uygulamayla aynı tasarım dilinde teslim ettiler. Kurumsal dağıtım paketleri sorunsuz çalışıyor.',
|
||||
'name' => 'Elif Kaya',
|
||||
'role' => 'Ürün Müdürü, SaaS Şirketi',
|
||||
'bg' => '#edf9f6',
|
||||
],
|
||||
[
|
||||
'quote' => 'Android, iOS and Meta Quest versions were launched in coordination. The Trunçgil Teknoloji team kept transparent communication throughout.',
|
||||
'name' => 'Murat Demir',
|
||||
'role' => 'CTO, Fintech Venture',
|
||||
'bg' => '#fef4f2',
|
||||
],
|
||||
[
|
||||
'quote' => 'Yayın sonrası destek sayesinde uygulamamız her yeni işletim sistemi sürümüne sorunsuz uyum sağlıyor. Trunçgil Teknoloji\'ye güveniyoruz.',
|
||||
'name' => 'Selin Arslan',
|
||||
'role' => 'Operasyon Direktörü',
|
||||
'bg' => '#edf2fc',
|
||||
],
|
||||
[
|
||||
'quote' => 'Kurumsal uygulamamızın güvenlik gereksinimlerini tüm platformlarda mükemmel karşıladılar. MDM ve mağaza dağıtımı eksiksiz tamamlandı.',
|
||||
'name' => 'Can Öztürk',
|
||||
'role' => 'IT Müdürü, Holding',
|
||||
'bg' => '#fbf1f4',
|
||||
],
|
||||
[
|
||||
'quote' => 'Prototipten çoklu platform yayınına kadar tüm süreçte yanımızdaydılar. Kullanıcılarımız her cihazda tutarlı bir deneyim yaşıyor.',
|
||||
'name' => 'Zeynep Aydın',
|
||||
'role' => 'Pazarlama Müdürü',
|
||||
'bg' => '#fff8ee',
|
||||
],
|
||||
];
|
||||
|
||||
$contactUrl = route('page.show', ['slug' => 'iletisim']);
|
||||
@endphp
|
||||
|
||||
@push('head')
|
||||
@if(!empty($hero['featured_image']))
|
||||
<link rel="preload" as="image" href="{{ Storage::url($hero['featured_image']) }}" fetchpriority="high">
|
||||
@endif
|
||||
@endpush
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.app-dev-section .accordion-wrapper .card-header button.collapsed {
|
||||
color: #343f52 !important;
|
||||
}
|
||||
.app-dev-section .accordion-wrapper .card-header button:hover,
|
||||
.app-dev-section .accordion-wrapper .card-header button {
|
||||
color: #e31e24 !important;
|
||||
}
|
||||
|
||||
.uil-search-alt:before { content: "\eca3"; }
|
||||
.uil-palette:before { content: "\ec3a"; }
|
||||
.uil-mobile-android:before { content: "\ec0a"; }
|
||||
.uil-apple:before { content: "\e938"; }
|
||||
.uil-shield-check:before { content: "\ecb2"; }
|
||||
.uil-store:before { content: "\ed04"; }
|
||||
.uil-check-circle:before { content: "\e9db"; }
|
||||
.uil-rocket:before { content: "\ec8c"; }
|
||||
.uil-chart-line:before { content: "\e9d3"; }
|
||||
.uil-headphones-alt:before { content: "\eb5f"; }
|
||||
.uil-arrow-up-right:before { content: "\e950"; }
|
||||
.uil-windows:before { content: "\eda9"; }
|
||||
.uil-cube:before { content: "\e9b8"; }
|
||||
.uil-crop-alt-rotate:before { content: "\ea75"; }
|
||||
.uil-image:before { content: "\eb4e"; }
|
||||
.uil-cloud:before { content: "\e9be"; }
|
||||
|
||||
.svg-bg i[class*="uil-"],
|
||||
.svg-bg i[class*="uil-"]:before {
|
||||
font-size: 2rem !important;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Platform logoları — yetkinlikler üst şerit */
|
||||
.app-dev-platform-strip img {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 2.5rem;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.app-dev-platform-strip img {
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.app-dev-platform-strip img {
|
||||
height: 3.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header — masaüstünde şeffaf, hero arka planı üstten başlasın */
|
||||
body:has(.app-dev-hero) > header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1030;
|
||||
background: transparent !important;
|
||||
}
|
||||
body:has(.app-dev-hero) > header .navbar.transparent:not(.fixed):not(.navbar-clone) {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Hero — metin üstte, görsel altta */
|
||||
.app-dev-hero .app-dev-hero-text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-dev-hero .app-dev-hero-image {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.app-dev-hero .app-dev-hero-image {
|
||||
max-width: 36rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.app-dev-hero .app-dev-hero-image {
|
||||
max-width: 42rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.app-dev-hero .app-dev-hero-image {
|
||||
max-width: 46rem;
|
||||
}
|
||||
}
|
||||
.app-dev-hero .app-dev-hero-image img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.app-dev-hero > .container {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.app-dev-hero .divider {
|
||||
margin-bottom: -2.5rem;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.app-dev-hero .divider {
|
||||
margin-bottom: -3.5rem;
|
||||
}
|
||||
}
|
||||
.app-dev-features-start {
|
||||
padding-top: 3rem !important;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.app-dev-features-start {
|
||||
padding-top: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Isometric 3D illüstrasyonlar */
|
||||
.app-dev-illustration {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.app-dev-illustration--process {
|
||||
max-width: 28rem;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.app-dev-illustration--process {
|
||||
max-width: 22rem;
|
||||
}
|
||||
}
|
||||
.app-dev-illustration--platforms {
|
||||
max-width: 36rem;
|
||||
}
|
||||
.app-dev-illustration--cta {
|
||||
max-width: 32rem;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
{{-- Hero Section --}}
|
||||
@if(!empty($hero))
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}');">
|
||||
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-9">
|
||||
<div class="flex flex-wrap mx-0 !mt-[-50px] items-center text-center lg:text-left xl:text-left">
|
||||
<div class="xl:w-5/12 lg:w-5/12 xxl:w-4/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="700">
|
||||
@if($slogan = $getTranslated($hero, 'slogan'))
|
||||
<h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] font-semibold !leading-[1.15] !mb-4">
|
||||
{!! nl2br(e($slogan)) !!}
|
||||
</h1>
|
||||
@endif
|
||||
@if($subSlogan = $getTranslated($hero, 'sub_slogan'))
|
||||
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">{{ $subSlogan }}</p>
|
||||
@endif
|
||||
<div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
|
||||
@if(!empty($hero['app_store_link']))
|
||||
<span class="inline-flex"><a href="{{ $hero['app_store_link'] }}" target="_blank" class="!mr-2 inline-block">
|
||||
<img src="{{ asset('assets/img/photos/button-appstore.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="App Store" loading="lazy">
|
||||
</a></span>
|
||||
@endif
|
||||
@if(!empty($hero['google_play_link']))
|
||||
<span class="inline-flex"><a href="{{ $hero['google_play_link'] }}" target="_blank" class="inline-block">
|
||||
<img src="{{ asset('assets/img/photos/button-google-play.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="Google Play" loading="lazy">
|
||||
</a></span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
@if(!empty($hero['featured_image']))
|
||||
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem] !mt-[50px] flex justify-center items-center" data-cues="slideInDown" data-delay="600" style="z-index:2;">
|
||||
<figure class="m-0 p-0 w-full flex justify-center items-center">
|
||||
<img class="w-[95%] max-w-[850px] !h-auto xl:!max-h-[540px] lg:!max-h-[440px] object-contain drop-shadow-2xl rounded-xl"
|
||||
src="{{ Storage::url($hero['featured_image']) }}"
|
||||
alt="{{ $product->translate('title') }}" loading="lazy"
|
||||
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
|
||||
{{-- Hero --}}
|
||||
@if(!empty($hero))
|
||||
@php
|
||||
$slogan = $getTranslated($hero, 'slogan');
|
||||
$subSlogan = $getTranslated($hero, 'sub_slogan');
|
||||
|
||||
// Dynamically split slogan to apply premium gradient class to second half
|
||||
$sloganParts = explode(' ', $slogan);
|
||||
if (count($sloganParts) > 3) {
|
||||
$splitIndex = ceil(count($sloganParts) / 2);
|
||||
$part1 = implode(' ', array_slice($sloganParts, 0, $splitIndex));
|
||||
$part2 = implode(' ', array_slice($sloganParts, $splitIndex));
|
||||
$formattedSlogan = $part1 . ' <span class="text-gradient gradient-7">' . $part2 . '</span>';
|
||||
} else {
|
||||
$formattedSlogan = $slogan;
|
||||
}
|
||||
@endphp
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)] app-dev-hero" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}">
|
||||
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-0">
|
||||
<div class="flex flex-col mx-0 !mt-[-50px] items-center text-center">
|
||||
<div class="w-full xl:w-10/12 lg:w-10/12 xxl:w-8/12 flex-[0_0_auto] max-w-full !relative !mt-[50px] app-dev-hero-text" data-cues="slideInDown" data-group="page-title" data-delay="700">
|
||||
<img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="top: -12%; left: 4%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="bottom: 0; right: -8%" alt="" loading="lazy">
|
||||
<h1 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] font-semibold !leading-[1.15] !mb-4">
|
||||
{!! $formattedSlogan !!}
|
||||
</h1>
|
||||
@if($subSlogan)
|
||||
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-0 xl:!px-8">
|
||||
{{ $subSlogan }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
<div class="overflow-hidden" style="z-index:1;">
|
||||
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
||||
<g fill="currentColor">
|
||||
<polygon points="1440 100 0 100 0 85 1440 0 1440 100" />
|
||||
</g>
|
||||
</svg>
|
||||
@if(!empty($hero['featured_image']))
|
||||
<div class="app-dev-hero-image !mt-6 xl:!mt-8 lg:!mt-8 md:!mt-8 !mb-[-4rem] xl:!mb-[-5rem] lg:!mb-[-4.5rem]" data-cues="slideInDown" data-delay="600">
|
||||
<figure class="m-0 p-0">
|
||||
<img class="w-[95%] max-w-[850px] !h-auto xl:!max-h-[540px] lg:!max-h-[440px] object-contain drop-shadow-2xl rounded-xl"
|
||||
src="{{ Storage::url($hero['featured_image']) }}"
|
||||
alt="{{ $product->translate('title') }}" loading="lazy"
|
||||
>
|
||||
</figure>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<!-- /.overflow-hidden -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
@endif
|
||||
</div>
|
||||
<div class="overflow-hidden" style="z-index:1;">
|
||||
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
||||
<g fill="currentColor">
|
||||
<polygon points="1440 100 0 100 0 85 1440 0 1440 100" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- App Features Section --}}
|
||||
@if(!empty($features))
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container pt-32 xl:pt-40 lg:pt-40 md:pt-40 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
||||
<div class="flex flex-wrap mx-[-15px] !text-center">
|
||||
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
||||
<h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{{ t('Özellikler') }}</h2>
|
||||
<h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">
|
||||
{{ $product->translate('title') }} {{ t('deneyiminizi mükemmelleştirmek için buradayız.') }}
|
||||
</h3>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
{{-- Features Section --}}
|
||||
<section class="wrapper !bg-[#ffffff] app-dev-section">
|
||||
<div class="container app-dev-features-start pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
||||
|
||||
|
||||
@if(!empty($features))
|
||||
<div class="flex flex-wrap mx-[-15px] !text-center">
|
||||
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
||||
<img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -45%; left: 23%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle4.svg') }}" class="h-8 absolute hidden xl:block lg:block" style="top: 6%; right: 2%" alt="" loading="lazy">
|
||||
<h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{{ t('Özellikler') }}</h2>
|
||||
<h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">
|
||||
{{ $product->translate('title') }} {!! t('deneyiminizi') !!} <span class="text-gradient gradient-7">{!! t('kusursuzlaştırmak için') !!}</span> {!! t('tasarlandı.') !!}
|
||||
</h3>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="flex flex-wrap mx-[-15px] !mb-40">
|
||||
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !text-center">
|
||||
@foreach($features as $index => $feature)
|
||||
@php
|
||||
$featureTitle = $getTranslated($feature, 'title');
|
||||
@endphp
|
||||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] max-w-full">
|
||||
@if(!empty($feature['icon']))
|
||||
<div class="svg-bg svg-bg-lg !bg-[#fef3e4] !rounded-[0.8rem] !mb-4">
|
||||
@php
|
||||
$iconPath = public_path('assets/img/icons/solid/' . $feature['icon'] . '.svg');
|
||||
$iconUrl = file_exists($iconPath)
|
||||
? asset('assets/img/icons/solid/' . $feature['icon'] . '.svg')
|
||||
: null;
|
||||
@endphp
|
||||
@if($iconUrl)
|
||||
<img src="{{ $iconUrl }}" class="icon-svg solid text-[#343f52] text-navy" alt="{{ $featureTitle }}" style="width: 48px; height: 48px;" loading="lazy">
|
||||
@else
|
||||
<div class="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
|
||||
<span class="text-gray-400 text-xs">{{ substr($feature['icon'], 0, 2) }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
@if($featureTitle)
|
||||
<h4 class="!text-[1rem]">{{ $featureTitle }}</h4>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] !mb-40">
|
||||
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !text-center">
|
||||
@foreach($features as $index => $feature)
|
||||
@php
|
||||
$featureTitle = $getTranslated($feature, 'title');
|
||||
$rawIcon = $feature['icon'] ?? 'processor';
|
||||
$iconClass = $iconMap[$rawIcon] ?? 'uil-cube';
|
||||
@endphp
|
||||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px] max-w-full">
|
||||
<div class="svg-bg svg-bg-lg !rounded-[0.8rem] !mb-4 flex items-center justify-center" style="background-color: {{ $featureBgColors[$index % count($featureBgColors)] }};">
|
||||
<i class="uil {{ $iconClass }} !text-[2rem] text-[#343f52]" aria-hidden="true"></i>
|
||||
</div>
|
||||
<h4 class="!text-[1rem]">{{ $featureTitle }}</h4>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- How It Works --}}
|
||||
@if(!empty($howItWorks) && !empty($steps))
|
||||
@php
|
||||
$howItWorksLabel = $getTranslated($howItWorks, 'download_form_label');
|
||||
|
||||
// Determine side illustration: screenshot 2 (cropper) is excellent, else featured image, else generic
|
||||
$processImage = !empty($howItWorks['download_image'])
|
||||
? Storage::url($howItWorks['download_image'])
|
||||
: (Storage::exists('public/products/dekupai-ss2.png') ? Storage::url('products/dekupai-ss2.png') : (!empty($hero['featured_image']) ? Storage::url($hero['featured_image']) : asset('assets/img/illustrations/app-dev/app-dev-process.png')));
|
||||
@endphp
|
||||
<div class="flex flex-wrap mx-[-15px] !text-center">
|
||||
<div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
||||
<img src="{{ asset('assets/img/svg/doodle5.svg') }}" class="!w-[5rem] absolute hidden xl:block lg:block" style="bottom: -60%; right: 10%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block" style="top: -40%; left: -5%" alt="" loading="lazy">
|
||||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{{ t('Çalışma Prensibi') }}</h2>
|
||||
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-8 xl:!px-6">
|
||||
{!! t('Sadece') !!} <span class="text-gradient gradient-7">{!! t('dört kolay adımda') !!}</span> {!! t('sonuca ulaşın.') !!}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mx-[-15px] lg:!mb-40 xl:!mb-[17.5rem]">
|
||||
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !text-center items-center">
|
||||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0">
|
||||
<figure class="mx-auto rounded-lg shadow-lg overflow-hidden border border-gray-100">
|
||||
<img class="app-dev-illustration w-full max-w-full !h-auto" src="{{ $processImage }}" alt="{{ $howItWorksLabel }}" loading="lazy" decoding="async">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px]"></div>
|
||||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0">
|
||||
@foreach(array_slice($steps, 0, 2) as $index => $step)
|
||||
<div class="{{ $index === 0 ? '!mb-8' : '' }}">
|
||||
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
|
||||
<h4 class="!text-[1rem]">{{ $getTranslated($step, 'title') }}</h4>
|
||||
<p class="!mb-0 xl:!px-7">{{ $getTranslated($step, 'description') }}</p>
|
||||
</div>
|
||||
<!--/column -->
|
||||
@endforeach
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
@endif
|
||||
|
||||
{{-- Description Section --}}
|
||||
@php
|
||||
$productContent = $product->translate('content');
|
||||
@endphp
|
||||
@if(!empty($productContent))
|
||||
{!! $productContent !!}
|
||||
@endif
|
||||
|
||||
{{-- How It Works Section --}}
|
||||
@if(!empty($howItWorks) && !empty($steps))
|
||||
<section class="wrapper !bg-[#ffffff]">
|
||||
<div class="container pt-32 xl:pt-40 lg:pt-40 md:pt-40 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
||||
<div class="flex flex-wrap mx-[-15px] !text-center">
|
||||
<div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
||||
@if($howItWorksLabel = $getTranslated($howItWorks, 'download_form_label'))
|
||||
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-8 xl:!px-6">
|
||||
{{ $howItWorksLabel }}
|
||||
</h3>
|
||||
@endif
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<div class="flex flex-wrap mx-[-15px] lg:!mb-40 xl:!mb-[17.5rem]">
|
||||
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !text-center items-center">
|
||||
@if(!empty($howItWorks['download_image']))
|
||||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0">
|
||||
<figure class="mx-auto">
|
||||
<img src="{{ Storage::url($howItWorks['download_image']) }}" alt="How It Works" loading="lazy">
|
||||
</figure>
|
||||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px] xl:!mt-0 lg:!mt-0">
|
||||
@foreach(array_slice($steps, 2, 2) as $index => $step)
|
||||
<div class="{{ $index === 0 ? '!mb-8' : '' }}">
|
||||
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}</span>
|
||||
<h4 class="!text-[1rem]">{{ $getTranslated($step, 'title') }}</h4>
|
||||
<p class="!mb-0 xl:!px-7">{{ $getTranslated($step, 'description') }}</p>
|
||||
</div>
|
||||
<!-- /column -->
|
||||
@endif
|
||||
<div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px] xl:!mt-0 lg:!mt-0"></div>
|
||||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0">
|
||||
@foreach($steps as $index => $step)
|
||||
@if($index < 2)
|
||||
<div class="{{ $index === 0 ? '!mb-8' : '' }}">
|
||||
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-3">{{ str_pad($step['number'] ?? ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
|
||||
@if($stepTitle = $getTranslated($step, 'title'))
|
||||
<h4 class="!text-[1rem]">{{ $stepTitle }}</h4>
|
||||
@endif
|
||||
@if($stepDescription = $getTranslated($step, 'description'))
|
||||
<p class="!mb-0 xl:!px-7">{{ $stepDescription }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<!-- /div -->
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /column -->
|
||||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px] xl:!mt-0 lg:!mt-0">
|
||||
@foreach($steps as $index => $step)
|
||||
@if($index >= 2)
|
||||
<div class="{{ $index === 2 ? '!mb-8' : '' }}">
|
||||
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-3">{{ str_pad($step['number'] ?? ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
|
||||
@if($stepTitle = $getTranslated($step, 'title'))
|
||||
<h4 class="!text-[1rem]">{{ $stepTitle }}</h4>
|
||||
@endif
|
||||
@if($stepDescription = $getTranslated($step, 'description'))
|
||||
<p class="!mb-0 xl:!px-7">{{ $stepDescription }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<!-- /div -->
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /column -->
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /column -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Video Section --}}
|
||||
@if(!empty($video['youtube_video_id']))
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}');">
|
||||
<div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="lg:!mt-[-10rem] xl:!mt-[-15rem] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] !rounded-[0.8rem]">
|
||||
<div class="player relative z-[2] rounded-[0.4rem]">
|
||||
{{-- Description Section --}}
|
||||
@php
|
||||
$productContent = $product->translate('content');
|
||||
@endphp
|
||||
@if(!empty($productContent))
|
||||
{!! $productContent !!}
|
||||
@endif
|
||||
|
||||
{{-- Video Section --}}
|
||||
@if(!empty($video['youtube_video_id']) || !empty($video['local_video_path']))
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[\'\'] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}" style="background-image: url(\'{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}\');">
|
||||
<div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="lg:!mt-[-10rem] xl:!mt-[-15rem] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] !rounded-[0.8rem]">
|
||||
<div class="player relative z-[2] rounded-[0.4rem] overflow-hidden shadow-2xl bg-black border-4 border-white">
|
||||
@if(!empty($video['youtube_video_id']))
|
||||
<iframe src="https://www.youtube.com/embed/{{ $video['youtube_video_id'] }}"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
style="width: 100%; height: 600px; border-radius: 0.4rem;">
|
||||
</iframe>
|
||||
</div>
|
||||
@else
|
||||
<video style="width: 100%; height: 600px; border-radius: 0.4rem; object-fit: contain; display: block;" class="w-full" controls autoplay loop muted playsinline>
|
||||
<source src="{{ asset($video['local_video_path']) }}" type="video/mp4">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
@endif
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- FAQ Section --}}
|
||||
@if(!empty($faqs))
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg21.webp') }}" style="background-image: url('{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg21.webp') }}');">
|
||||
<div class="overflow-hidden" style="z-index:1;">
|
||||
<div class="divider divider-alt !text-[#fefefe] mx-[-0.5rem]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
||||
<g fill="currentColor">
|
||||
<polygon points="1440 100 0 15 0 0 1440 0 1440 100"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="!relative">
|
||||
|
||||
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-12 lg:!px-8 xl:!px-12 !text-center">
|
||||
{{ t('Sık Sorulan Sorular')}}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div id="accordion-faq" class="accordion-wrapper">
|
||||
@foreach($faqs as $index => $faq)
|
||||
<div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||||
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="accordion-heading-faq-{{ $index }}">
|
||||
<button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#e31e24] before:!text-[#e31e24] collapsed"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#accordion-collapse-faq-{{ $index }}"
|
||||
aria-expanded="false"
|
||||
aria-controls="accordion-collapse-faq-{{ $index }}">
|
||||
{{ $getTranslated($faq, 'question') }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div id="accordion-collapse-faq-{{ $index }}"
|
||||
class="collapse"
|
||||
aria-labelledby="accordion-heading-faq-{{ $index }}"
|
||||
data-bs-target="#accordion-faq">
|
||||
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
|
||||
<p>{!! nl2br(e($getTranslated($faq, 'answer'))) !!}</p>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.collapse -->
|
||||
{{-- FAQ Section --}}
|
||||
@if(!empty($faqs))
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[\'\'] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)] app-dev-section" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url(\'{{ asset('assets/img/photos/bg23.webp') }}\');">
|
||||
<div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||||
<div class="!relative !mb-12">
|
||||
<img src="{{ asset('assets/img/svg/doodle7.svg') }}" class="h-7 absolute hidden xl:block lg:block" style="top: -90%; right: -3%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle8.svg') }}" class="!h-[4.5rem] absolute hidden xl:block lg:block" style="top: -20%; left: -12%" alt="" loading="lazy">
|
||||
<h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{{ t('Sık Sorulan Sorular') }}</h2>
|
||||
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-0 lg:!px-8 xl:!px-12 !text-center">
|
||||
{!! t('Merak') !!} <span class="text-gradient gradient-7">{!! t('ettikleriniz') !!}</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0">
|
||||
<div id="accordion-ad-1" class="accordion-wrapper">
|
||||
@foreach(array_slice($faqs, 0, ceil(count($faqs) / 2)) as $index => $faq)
|
||||
<div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||||
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="accordion-heading-ad-1-{{ $index }}">
|
||||
<button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-ad-1-{{ $index }}" aria-expanded="false" aria-controls="accordion-collapse-ad-1-{{ $index }}">
|
||||
{{ $getTranslated($faq, 'question') }}
|
||||
</button>
|
||||
</div>
|
||||
<div id="accordion-collapse-ad-1-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-ad-1-{{ $index }}" data-bs-target="#accordion-ad-1">
|
||||
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
|
||||
<p>{!! nl2br(e($getTranslated($faq, 'answer'))) !!}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
@endforeach
|
||||
</div>
|
||||
<!-- /.accordion-wrapper -->
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||||
<div id="accordion-ad-2" class="accordion-wrapper">
|
||||
@foreach(array_slice($faqs, ceil(count($faqs) / 2)) as $index => $faq)
|
||||
<div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||||
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !rounded-[0.4rem] !bg-inherit" id="accordion-heading-ad-2-{{ $index }}">
|
||||
<button class="!text-[#343f52] !text-[0.9rem] hover:!text-[#e31e24] before:!text-[#e31e24] collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-collapse-ad-2-{{ $index }}" aria-expanded="false" aria-controls="accordion-collapse-ad-2-{{ $index }}">
|
||||
{{ $getTranslated($faq, 'question') }}
|
||||
</button>
|
||||
</div>
|
||||
<div id="accordion-collapse-ad-2-{{ $index }}" class="collapse" aria-labelledby="accordion-heading-ad-2-{{ $index }}" data-bs-target="#accordion-ad-2">
|
||||
<div class="card-body flex-[1_1_auto] p-[0_1.25rem_.25rem_2.35rem]">
|
||||
<p>{!! nl2br(e($getTranslated($faq, 'answer'))) !!}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!--/column -->
|
||||
</div>
|
||||
<!--/.row -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</section>
|
||||
<!-- /section -->
|
||||
@endif
|
||||
|
||||
@endsection
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- Why Choose Trunçgil Teknoloji --}}
|
||||
<section class="wrapper !bg-[#ffffff] app-dev-section">
|
||||
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||||
<div class="flex flex-wrap mx-[-15px] !text-center">
|
||||
<div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
||||
<img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -20%; right: -12%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle9.svg') }}" class="!h-[7rem] absolute hidden xl:block lg:block" style="bottom: 5%; left: -17%" alt="" loading="lazy">
|
||||
<h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{{ t('Neden Trunçgil Teknoloji?') }}</h2>
|
||||
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-14 !text-center">
|
||||
{!! t('Projelerinizde başarılı olmanız için') !!} <span class="text-gradient gradient-7">{!! t('6 güçlü neden') !!}</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-wrap mx-[-15px] flex items-start !mb-36">
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;">
|
||||
<figure class="m-0 p-0">
|
||||
<picture>
|
||||
<source srcset="{{ asset('assets/img/illustrations/app-dev/app-dev-platforms.png') }}" type="image/webp">
|
||||
<img class="app-dev-illustration app-dev-illustration--platforms w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/app-dev/app-dev-platforms.png') }}" alt="{{ t('Trunçgil Teknoloji çoklu platform uygulamalar') }}" width="1024" height="1024" loading="lazy" decoding="async">
|
||||
</picture>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto">
|
||||
@foreach($whyChoose as $item)
|
||||
<div class="flex flex-row !mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg !rounded-[0.8rem] !mr-5 flex items-center justify-center" style="background-color: {{ $item['bg'] }};">
|
||||
<i class="uil {{ $item['icon'] }} !text-[2rem] text-[#343f52]" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="!text-[1rem]">{!! t($item['title']) !!}</h4>
|
||||
<p>{!! t($item['description']) !!}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Testimonials --}}
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative">
|
||||
<img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block" style="top: 2%; left: 9%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle10.svg') }}" class="h-7 absolute hidden xl:block lg:block" style="top: -45%; left: -17%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle11.svg') }}" class="!h-[4rem] absolute hidden xl:block lg:block" style="top: -40%; right: -15%" alt="" loading="lazy">
|
||||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{{ t('Mutlu Müşteriler') }}</h2>
|
||||
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.2] xl:!text-[2rem] !mb-12 xl:!px-10 xxl:!px-16">
|
||||
{!! t('Trunçgil Teknoloji ile çalışan müşterilerimizin') !!} <span class="text-gradient gradient-7">{!! t('deneyimleri') !!}</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="itemgrid !mb-14">
|
||||
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
|
||||
@foreach($testimonials as $testimonial)
|
||||
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||||
<div class="card !shadow-none !rounded-[0.8rem]" style="background-color: {{ $testimonial['bg'] }};">
|
||||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||||
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 relative p-0 border-0 before:content-[\'\\201d\'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
|
||||
<p>{!! t($testimonial['quote']) !!}</p>
|
||||
<div class="flex items-center text-left">
|
||||
<div class="info !pl-0">
|
||||
<p class="!mb-1 text-[.9rem] !leading-[1.5] !font-semibold">{!! e($testimonial['name']) !!}</p>
|
||||
<p class="!mb-0 text-[.8rem]">{!! t($testimonial['role']) !!}</p>
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Bottom CTA --}}
|
||||
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[\'\'] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url(\'{{ asset('assets/img/photos/bg23.webp') }}\');">
|
||||
<div class="overflow-hidden" style="z-index:1;">
|
||||
<div class="divider divider-alt !text-[#fefefe] mx-[-0.5rem]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
||||
<g fill="currentColor">
|
||||
<polygon points="1440 100 0 15 0 0 1440 0 1440 100" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-10 lg:pb-10 md:pb-10 text-center xl:text-left lg:text-left">
|
||||
<div class="flex flex-wrap mx-0 !mt-[-50px]">
|
||||
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]">
|
||||
<img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block" style="bottom: 36%; right: -25%" alt="" loading="lazy">
|
||||
<img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[4.5rem] !absolute hidden xl:block lg:block" style="top: -20%; left: -25%" alt="" loading="lazy">
|
||||
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] xl:!text-[2rem] !mb-4">
|
||||
{{ $product->translate('title') }} {!! t('ile hemen') !!} <span class="text-gradient gradient-7">{!! t('başlayın.') !!}</span>
|
||||
</h2>
|
||||
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">
|
||||
{!! t('Trunçgil Teknoloji ekibi, fikrinizi veya ürününüzü tüm dijital ekosistemlerde en verimli şekilde hayata geçirmek için yanınızda.') !!}
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center xl:!justify-start lg:!justify-start gap-3 items-center">
|
||||
<a href="{{ $contactUrl }}" class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6">{!! t('Projenizi Konuşalım') !!}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]">
|
||||
<figure class="m-0 p-0">
|
||||
<picture>
|
||||
<source srcset="{{ asset('assets/img/illustrations/app-dev/app-dev-cta.png') }}" type="image/webp">
|
||||
<img class="app-dev-illustration app-dev-illustration--cta w-full max-w-full !h-auto" src="{{ asset('assets/img/illustrations/app-dev/app-dev-cta.png') }}" alt="{{ $product->translate('title') }}" width="1024" height="1024" loading="lazy" decoding="async">
|
||||
</picture>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user