feat: update certificate design with watermark logo, adjusted typography, and improved header layout

This commit is contained in:
Ümit Tunç
2026-06-08 18:51:15 +03:00
parent 4eb0a96832
commit fa06ba7545
2 changed files with 13 additions and 5 deletions
+13 -5
View File
@@ -1,7 +1,7 @@
@extends('layouts.site')
@section('content')
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800;900&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,700;1,400&display=swap" rel="stylesheet">
<div class="bg-slate-100 py-12 no-print">
<div class="container max-w-6xl mx-auto px-4">
@@ -41,6 +41,11 @@
<div class="certificate-container-wrapper overflow-hidden w-full flex justify-center items-start">
<div id="certificate-node" class="certificate-page bg-white rounded-[2rem] shadow-2xl p-12 relative overflow-hidden page-break mx-auto">
<!-- Watermark Logo -->
<div class="absolute inset-0 flex items-center justify-center pointer-events-none z-0 opacity-[0.05]">
<img src="{{ asset('logos/truncgil-dikey.svg') }}" class="w-[300px] h-[300px] object-contain">
</div>
<!-- Thin Minimal Orange/Slate Inner Border -->
<div class="absolute inset-6 border border-slate-200/50 rounded-[1.5rem] pointer-events-none z-10"></div>
<div class="absolute inset-[28px] border-2 border-orange-500/15 rounded-[1.3rem] pointer-events-none z-10"></div>
@@ -48,9 +53,12 @@
<div class="relative z-10 flex flex-col justify-between h-full min-h-[580px] md:min-h-[540px]">
<!-- Logo & Header -->
<div class="flex justify-between items-center w-full">
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji" class="h-12 object-contain">
<div class="text-right">
<div class="relative flex justify-between items-center w-full min-h-[64px]">
<div class="w-1/3"></div>
<div class="w-1/3 flex justify-center">
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji" class="h-16 md:h-20 object-contain">
</div>
<div class="w-1/3 text-right">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest block">Verifikasyon No</span>
<span class="text-xs font-mono font-bold text-slate-800">{{ $application->certificate_code }}</span>
</div>
@@ -58,7 +66,7 @@
<!-- Main Content -->
<div class="text-center my-auto px-4">
<h1 class="font-serif text-3xl md:text-5xl font-extrabold tracking-[0.2em] text-slate-900 uppercase mb-2">Staj Bitirme Sertifikası</h1>
<h1 class="font-serif text-3xl md:text-5xl text-slate-900 uppercase mt-8 mb-2" style="font-weight: 900; letter-spacing: 0.04em;">Staj Bitirme Sertifikası</h1>
<div class="w-24 h-[3px] bg-orange-500 mx-auto mb-8"></div>
<p class="text-slate-400 text-xs md:text-sm uppercase tracking-wider mb-2">Sayın</p>