Demo-Project/Laravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
David Melendez
2026-01-14 22:38:44 +01:00
parent 4e0c415f0b
commit e25d53d054
124 changed files with 21653 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
resources/views/templates/index.blade.php Normal file
View File

@@ -0,0 +1,277 @@
{{--
Resume Templates - Professional Bootstrap Design
Professional Template Selection Page
@author David Valera Melendez <david@valera-melendez.de>
@created 2025-08-09
@location Made in Germany 🇩🇪
--}}
@extends('layouts.app')
@section('title', 'Resume Templates - Professional Resume Builder')
@section('page_class', 'templates-page')
@section('content')
<div class="templates-container">
<!-- Page Header -->
<section class="page-header">
<div class="header-content">
<div class="header-text">
<h1 class="page-title">Choose Your Template</h1>
<p class="page-subtitle">
Select from our collection of professional resume templates designed to make you stand out
</p>
</div>
<div class="header-actions">
<a href="{{ route('dashboard') }}" class="btn secondary-cta">
<i class="bi bi-arrow-left"></i>
Back to Dashboard
</a>
</div>
</div>
</section>
<!-- Template Filters -->
<section class="template-filters">
<div class="card filter-card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-6">
<div class="filter-group">
<label class="filter-label">Category</label>
<select class="form-select" id="categoryFilter">
<option value="">All Templates</option>
<option value="professional">Professional</option>
<option value="modern">Modern</option>
<option value="classic">Classic</option>
<option value="creative">Creative</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="filter-group">
<label class="filter-label">Type</label>
<select class="form-select" id="typeFilter">
<option value="">All Types</option>
<option value="free">Free Templates</option>
<option value="premium">Premium Templates</option>
</select>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Templates Grid -->
<section class="templates-grid">
<div class="row g-4" id="templatesGrid">
@forelse($templates as $template)
<div class="col-lg-4 col-md-6 template-item"
data-category="{{ strtolower($template['name']) }}"
data-type="{{ $template['is_premium'] ? 'premium' : 'free' }}">
<div class="card template-card h-100">
<!-- Template Preview -->
<div class="template-preview">
@if($template['preview_image'])
<img src="{{ asset($template['preview_image']) }}"
alt="{{ $template['name'] }} Template"
class="template-image"
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDMwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjRjVGNUY1Ii8+CjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFMEUwRTAiLz4KPHN2ZyB4PSI1MCIgeT0iNTAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyMDAgMzAiIGZpbGw9Im5vbmUiPgo8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjMTk3NkQyIi8+CjwvY3ZnPgo8dGV4dCB4PSIxNTAiIHk9IjIxMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmaWxsPSIjNjY2NjY2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5SZXN1bWUgVGVtcGxhdGU8L3RleHQ+Cjwvc3ZnPg=='">
@else
<div class="template-placeholder">
<i class="bi bi-file-earmark-text"></i>
<span>{{ $template['name'] }} Template</span>
</div>
@endif
@if($template['is_premium'])
<div class="premium-badge">
<i class="bi bi-crown"></i>
Premium
</div>
@else
<div class="free-badge">
<i class="bi bi-check-circle"></i>
Free
</div>
@endif
</div>
<!-- Template Info -->
<div class="card-body">
<h5 class="template-title">{{ $template['name'] }}</h5>
<p class="template-description">{{ $template['description'] }}</p>
</div>
<!-- Template Actions -->
<div class="card-footer">
<div class="template-actions">
<a href="{{ route('templates.show', $template['id']) }}" class="btn btn-outline-primary">
<i class="bi bi-eye"></i>
Preview
</a>
<a href="{{ route('resume-builder.create', ['template' => $template['id']]) }}" class="btn primary-cta">
<i class="bi bi-plus-circle"></i>
Use Template
</a>
</div>
</div>
</div>
</div>
@empty
<div class="col-12">
<div class="empty-state">
<div class="empty-icon">
<i class="bi bi-file-earmark-text"></i>
</div>
<h5 class="empty-title">No Templates Available</h5>
<p class="empty-description">
We're working on adding more professional templates for you to choose from.
</p>
<a href="{{ route('dashboard') }}" class="btn primary-cta">
<i class="bi bi-arrow-left"></i>
Back to Dashboard
</a>
</div>
</div>
@endforelse
</div>
</section>
<!-- Template Categories Info -->
<section class="template-categories">
<div class="section-header">
<h2>Template Categories</h2>
<p>Choose the style that best represents your professional image</p>
</div>
<div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="card category-card">
<div class="card-body text-center">
<div class="category-icon">
<i class="bi bi-briefcase"></i>
</div>
<h6 class="category-title">Professional</h6>
<p class="category-description">Clean, formal templates perfect for traditional industries</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card category-card">
<div class="card-body text-center">
<div class="category-icon">
<i class="bi bi-lightning"></i>
</div>
<h6 class="category-title">Modern</h6>
<p class="category-description">Contemporary designs for tech and startup environments</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card category-card">
<div class="card-body text-center">
<div class="category-icon">
<i class="bi bi-bookmark"></i>
</div>
<h6 class="category-title">Classic</h6>
<p class="category-description">Timeless layouts that work across all industries</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="card category-card">
<div class="card-body text-center">
<div class="category-icon">
<i class="bi bi-palette"></i>
</div>
<h6 class="category-title">Creative</h6>
<p class="category-description">Unique designs for creative and artistic professionals</p>
</div>
</div>
</div>
</div>
</section>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
// Template filtering functionality
const categoryFilter = document.getElementById('categoryFilter');
const typeFilter = document.getElementById('typeFilter');
const templateItems = document.querySelectorAll('.template-item');
function filterTemplates() {
const categoryValue = categoryFilter.value.toLowerCase();
const typeValue = typeFilter.value;
templateItems.forEach(item => {
const itemCategory = item.dataset.category;
const itemType = item.dataset.type;
let showItem = true;
// Filter by category
if (categoryValue && itemCategory !== categoryValue) {
showItem = false;
}
// Filter by type
if (typeValue && itemType !== typeValue) {
showItem = false;
}
// Show/hide item with animation
if (showItem) {
item.style.display = 'block';
item.classList.add('animate-fade-in');
} else {
item.style.display = 'none';
item.classList.remove('animate-fade-in');
}
});
}
// Add event listeners
if (categoryFilter) {
categoryFilter.addEventListener('change', filterTemplates);
}
if (typeFilter) {
typeFilter.addEventListener('change', filterTemplates);
}
// Template card hover effects
const templateCards = document.querySelectorAll('.template-card');
templateCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
});
});
// Smooth scroll animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
});
templateCards.forEach(card => {
observer.observe(card);
});
});
</script>
@endpush
@endsection

443
resources/views/templates/preview.blade.php Normal file
View File

@@ -0,0 +1,443 @@
{{--
Template Preview - Professional Bootstrap Design
Full Screen Template Preview with Sample Data
@author David Valera Melendez <david@valera-melendez.de>
@created 2025-08-09
@location Made in Germany 🇩🇪
--}}
@extends('layouts.app')
@section('title', 'Preview: ' . $templateData['name'] . ' Template - Professional Resume Builder')
@section('page_class', 'template-preview-page')
@section('content')
<div class="template-preview-container">
<!-- Preview Header -->
<section class="preview-header">
<div class="d-flex justify-content-between align-items-center">
<div class="preview-info">
<h1 class="preview-title">{{ $templateData['name'] }} Template Preview</h1>
<p class="preview-subtitle">Sample resume with placeholder content</p>
</div>
<div class="preview-actions">
<a href="{{ route('templates.show', $templateData['id']) }}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i>
Back to Template
</a>
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
<i class="bi bi-plus-circle"></i>
Use This Template
</a>
</div>
</div>
</section>
<!-- Template Preview Content -->
<section class="preview-content">
<div class="resume-preview-wrapper">
<div class="resume-page">
<!-- Sample Resume Content -->
<div class="resume-container">
<!-- Header Section -->
<header class="resume-header">
<div class="header-content">
<h1 class="resume-name">{{ $sampleData['name'] }}</h1>
<h2 class="resume-title">{{ $sampleData['title'] }}</h2>
<div class="contact-info">
<div class="contact-item">
<i class="bi bi-envelope"></i>
<span>{{ $sampleData['email'] }}</span>
</div>
<div class="contact-item">
<i class="bi bi-telephone"></i>
<span>{{ $sampleData['phone'] }}</span>
</div>
<div class="contact-item">
<i class="bi bi-geo-alt"></i>
<span>Berlin, Germany</span>
</div>
<div class="contact-item">
<i class="bi bi-linkedin"></i>
<span>linkedin.com/in/johndoe</span>
</div>
</div>
</div>
</header>
<!-- Professional Summary -->
<section class="resume-section">
<h3 class="section-title">Professional Summary</h3>
<div class="section-content">
<p>{{ $sampleData['summary'] }} Proven track record of delivering high-quality solutions and leading cross-functional teams to achieve business objectives.</p>
</div>
</section>
<!-- Experience -->
<section class="resume-section">
<h3 class="section-title">Professional Experience</h3>
<div class="section-content">
<div class="experience-item">
<div class="experience-header">
<h4 class="position-title">Senior Software Developer</h4>
<span class="company-name">Tech Solutions GmbH</span>
<span class="employment-period">Jan 2020 - Present</span>
</div>
<ul class="experience-duties">
<li>Led development of web applications using modern frameworks</li>
<li>Collaborated with cross-functional teams to deliver projects on time</li>
<li>Mentored junior developers and conducted code reviews</li>
<li>Improved system performance by 40% through optimization</li>
</ul>
</div>
<div class="experience-item">
<div class="experience-header">
<h4 class="position-title">Software Developer</h4>
<span class="company-name">Digital Innovations Ltd</span>
<span class="employment-period">Mar 2018 - Dec 2019</span>
</div>
<ul class="experience-duties">
<li>Developed and maintained web applications using PHP and Laravel</li>
<li>Implemented responsive designs and improved user experience</li>
<li>Participated in agile development processes and sprint planning</li>
</ul>
</div>
</div>
</section>
<!-- Education -->
<section class="resume-section">
<h3 class="section-title">Education</h3>
<div class="section-content">
<div class="education-item">
<h4 class="degree-title">Bachelor of Science in Computer Science</h4>
<span class="institution">Technical University of Berlin</span>
<span class="graduation-year">2018</span>
</div>
</div>
</section>
<!-- Skills -->
<section class="resume-section">
<h3 class="section-title">Technical Skills</h3>
<div class="section-content">
<div class="skills-grid">
<div class="skill-category">
<h5 class="skill-category-title">Programming Languages</h5>
<div class="skill-tags">
<span class="skill-tag">PHP</span>
<span class="skill-tag">JavaScript</span>
<span class="skill-tag">Python</span>
<span class="skill-tag">TypeScript</span>
</div>
</div>
<div class="skill-category">
<h5 class="skill-category-title">Frameworks & Libraries</h5>
<div class="skill-tags">
<span class="skill-tag">Laravel</span>
<span class="skill-tag">Vue.js</span>
<span class="skill-tag">React</span>
<span class="skill-tag">Bootstrap</span>
</div>
</div>
<div class="skill-category">
<h5 class="skill-category-title">Tools & Technologies</h5>
<div class="skill-tags">
<span class="skill-tag">Git</span>
<span class="skill-tag">Docker</span>
<span class="skill-tag">MySQL</span>
<span class="skill-tag">Redis</span>
</div>
</div>
</div>
</div>
</section>
<!-- Languages -->
<section class="resume-section">
<h3 class="section-title">Languages</h3>
<div class="section-content">
<div class="language-list">
<div class="language-item">
<span class="language-name">English</span>
<span class="language-level">Native</span>
</div>
<div class="language-item">
<span class="language-name">German</span>
<span class="language-level">Fluent</span>
</div>
<div class="language-item">
<span class="language-name">Spanish</span>
<span class="language-level">Intermediate</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
<!-- Preview Controls -->
<section class="preview-controls">
<div class="card controls-card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-6">
<div class="control-info">
<h6 class="mb-1">Template: {{ $templateData['name'] }}</h6>
<p class="text-muted mb-0">This is a sample preview with placeholder content</p>
</div>
</div>
<div class="col-md-6">
<div class="control-actions text-md-end">
<button class="btn btn-outline-secondary" onclick="window.print()">
<i class="bi bi-printer"></i>
Print Preview
</button>
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
<i class="bi bi-pencil-square"></i>
Edit This Template
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
@push('styles')
<style>
/* Resume Preview Specific Styles */
.resume-preview-wrapper {
max-width: 800px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.resume-page {
background: white;
min-height: 1056px; /* A4 height */
width: 100%;
padding: 40px;
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
.resume-header {
border-bottom: 3px solid var(--color-primary);
padding-bottom: 20px;
margin-bottom: 30px;
}
.resume-name {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
.resume-title {
font-size: 1.5rem;
font-weight: 400;
color: #666;
margin: 5px 0 15px 0;
}
.contact-info {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.95rem;
}
.contact-item i {
color: var(--color-primary);
}
.resume-section {
margin-bottom: 25px;
}
.section-title {
font-size: 1.3rem;
font-weight: 600;
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary-light);
padding-bottom: 5px;
margin-bottom: 15px;
}
.experience-item {
margin-bottom: 20px;
}
.experience-header {
margin-bottom: 8px;
}
.position-title {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin: 0;
}
.company-name {
font-weight: 500;
color: var(--color-primary);
margin-right: 15px;
}
.employment-period {
color: #666;
font-style: italic;
}
.experience-duties {
margin: 8px 0;
padding-left: 20px;
}
.experience-duties li {
margin-bottom: 4px;
}
.education-item {
margin-bottom: 15px;
}
.degree-title {
font-weight: 600;
color: #333;
margin: 0 15px 0 0;
}
.institution {
color: var(--color-primary);
margin-right: 15px;
}
.graduation-year {
color: #666;
}
.skills-grid {
display: grid;
gap: 15px;
}
.skill-category-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 8px;
color: #333;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.skill-tag {
background: var(--color-primary-light);
color: var(--color-primary);
padding: 4px 12px;
border-radius: 15px;
font-size: 0.9rem;
font-weight: 500;
}
.language-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.language-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.language-name {
font-weight: 500;
}
.language-level {
color: var(--color-primary);
font-weight: 500;
}
/* Print Styles */
@media print {
.preview-header,
.preview-controls {
display: none !important;
}
.resume-page {
box-shadow: none;
margin: 0;
padding: 20px;
}
body {
background: white;
}
}
/* Responsive */
@media (max-width: 768px) {
.resume-page {
padding: 20px;
}
.resume-name {
font-size: 2rem;
}
.contact-info {
flex-direction: column;
gap: 10px;
}
}
</style>
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
// Smooth animations
const sections = document.querySelectorAll('.resume-section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
});
sections.forEach(section => {
section.style.opacity = '0';
section.style.transform = 'translateY(20px)';
section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(section);
});
});
</script>
@endpush
@endsection

267
resources/views/templates/show.blade.php Normal file
View File

@@ -0,0 +1,267 @@
{{--
Template Details - Professional Bootstrap Design
Professional Template Detail Page
@author David Valera Melendez <david@valera-melendez.de>
@created 2025-08-09
@location Made in Germany 🇩🇪
--}}
@extends('layouts.app')
@section('title', $templateData['name'] . ' Template - Professional Resume Builder')
@section('page_class', 'template-detail-page')
@section('content')
<div class="template-detail-container">
<!-- Template Header -->
<section class="template-header">
<div class="row align-items-center">
<div class="col-md-8">
<div class="template-info">
<div class="breadcrumb-nav">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{{ route('templates.index') }}">Templates</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ $templateData['name'] }}</li>
</ol>
</nav>
</div>
<h1 class="template-name">{{ $templateData['name'] }} Template</h1>
<p class="template-description">{{ $templateData['description'] }}</p>
<div class="template-badges">
@if($templateData['is_premium'])
<span class="badge premium-badge">
<i class="bi bi-crown"></i>
Premium Template
</span>
@else
<span class="badge free-badge">
<i class="bi bi-check-circle"></i>
Free Template
</span>
@endif
<span class="badge category-badge">Professional</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="template-actions">
<a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary btn-lg">
<i class="bi bi-eye"></i>
Live Preview
</a>
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta btn-lg">
<i class="bi bi-plus-circle"></i>
Use This Template
</a>
</div>
</div>
</div>
</section>
<!-- Template Preview & Features -->
<section class="template-content">
<div class="row g-4">
<!-- Template Preview -->
<div class="col-lg-8">
<div class="card preview-card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-eye"></i>
Template Preview
</h5>
</div>
<div class="card-body">
<div class="template-preview-container">
@if($templateData['preview_image'])
<img src="{{ asset($templateData['preview_image']) }}"
alt="{{ $templateData['name'] }} Template Preview"
class="template-preview-image"
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDYwMCA4MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iODAwIiBmaWxsPSIjRjVGNUY1Ii8+CjxyZWN0IHg9IjQwIiB5PSI0MCIgd2lkdGg9IjUyMCIgaGVpZ2h0PSI3MjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFMEUwRTAiLz4KPHN2ZyB4PSI4MCIgeT0iODAiIHdpZHRoPSI0NDAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0NDAgNjAiIGZpbGw9Im5vbmUiPgo8cmVjdCB3aWR0aD0iNDQwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMTk3NkQyIi8+CjwvY3ZnPgo8dGV4dCB4PSIzMDAiIHk9IjQyMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBmaWxsPSIjNjY2NjY2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj57eyAkdGVtcGxhdGVEYXRhWyduYW1lJ10gfX0gVGVtcGxhdGU8L3RleHQ+Cjx0ZXh0IHg9IjMwMCIgeT0iNDYwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkNsaWNrICJMaXZlIFByZXZpZXciIGZvciBmdWxsIHZpZXc8L3RleHQ+Cjwvc3ZnPg=='">
@else
<div class="template-preview-placeholder">
<i class="bi bi-file-earmark-text"></i>
<h5>{{ $templateData['name'] }} Template</h5>
<p>Click "Live Preview" to see the full template</p>
</div>
@endif
</div>
<div class="preview-actions mt-3">
<a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary">
<i class="bi bi-fullscreen"></i>
Full Screen Preview
</a>
</div>
</div>
</div>
</div>
<!-- Template Features -->
<div class="col-lg-4">
<div class="card features-card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-star"></i>
Template Features
</h5>
</div>
<div class="card-body">
<div class="feature-list">
<div class="feature-item">
<i class="bi bi-check-circle feature-icon"></i>
<span>Professional Layout</span>
</div>
<div class="feature-item">
<i class="bi bi-check-circle feature-icon"></i>
<span>ATS Friendly</span>
</div>
<div class="feature-item">
<i class="bi bi-check-circle feature-icon"></i>
<span>Print Optimized</span>
</div>
<div class="feature-item">
<i class="bi bi-check-circle feature-icon"></i>
<span>Easy Customization</span>
</div>
<div class="feature-item">
<i class="bi bi-check-circle feature-icon"></i>
<span>Multiple Formats</span>
</div>
<div class="feature-item">
<i class="bi bi-check-circle feature-icon"></i>
<span>Modern Typography</span>
</div>
</div>
</div>
</div>
<!-- Template Stats -->
<div class="card stats-card mt-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-bar-chart"></i>
Template Stats
</h5>
</div>
<div class="card-body">
<div class="stat-item">
<div class="stat-value">4.8/5</div>
<div class="stat-label">Rating</div>
</div>
<div class="stat-item">
<div class="stat-value">2,345</div>
<div class="stat-label">Downloads</div>
</div>
<div class="stat-item">
<div class="stat-value">98%</div>
<div class="stat-label">Success Rate</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="card actions-card mt-4">
<div class="card-body">
<div class="d-grid gap-2">
<a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
<i class="bi bi-plus-circle"></i>
Start With This Template
</a>
<a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary">
<i class="bi bi-eye"></i>
Preview Template
</a>
<a href="{{ route('templates.index') }}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i>
Back to Templates
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Template Guidelines -->
<section class="template-guidelines">
<div class="card guidelines-card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="bi bi-lightbulb"></i>
Tips for Using This Template
</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="guideline-item">
<div class="guideline-icon">
<i class="bi bi-target"></i>
</div>
<div class="guideline-content">
<h6>Perfect For</h6>
<p>Corporate professionals, managers, and executives in traditional industries.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="guideline-item">
<div class="guideline-icon">
<i class="bi bi-palette"></i>
</div>
<div class="guideline-content">
<h6>Customization</h6>
<p>Easily customize colors, fonts, and sections to match your personal brand.</p>
</div>
</div>
</div>
</div>
<div class="guidelines-footer mt-3">
<p class="text-muted mb-0">
<i class="bi bi-info-circle"></i>
Need help customizing your resume? Check out our
<a href="{{ route('help') }}" class="text-primary">help center</a>
for detailed guides and tips.
</p>
</div>
</div>
</div>
</section>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
// Smooth scroll animations
const cards = document.querySelectorAll('.card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
}
});
});
cards.forEach(card => {
observer.observe(card);
});
// Template preview image zoom
const previewImage = document.querySelector('.template-preview-image');
if (previewImage) {
previewImage.addEventListener('click', function() {
// Open preview in new tab
window.open(this.src, '_blank');
});
previewImage.style.cursor = 'zoom-in';
}
});
</script>
@endpush
@endsection