feat(fiverr): ajout de la page Fiverr et des composants associés
- Création de la page Fiverr pour présenter les services freelance - Ajout des composants FiverrHero, FiverrServiceCard et FiverrCta - Intégration des services Fiverr dans la configuration du site - Ajout de nouvelles images pour les services Fiverr - Mise à jour des traductions pour inclure les services Fiverr - Amélioration de la gestion des actifs avec l'importation des images - Ajout de styles CSS pour les nouveaux composants et pages
This commit is contained in:
Mr¤KayJayDee
@@ -14,6 +14,8 @@
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:locale" content="fr_FR">
|
||||
<title>Killian - Développeur Full Stack</title>
|
||||
<script defer src="https://umami.killiandalcin.fr/script.js"
|
||||
data-website-id="bffa2341-3ab2-4c2c-96c9-f83ea7225a1b"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
BIN
src/assets/images/fiverr/discord_bot.jpg
Normal file
BIN
src/assets/images/fiverr/discord_bot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 KiB |
BIN
src/assets/images/fiverr/minecraft_plugin.jpg
Normal file
BIN
src/assets/images/fiverr/minecraft_plugin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
BIN
src/assets/images/fiverr/telegram_bot.jpg
Normal file
BIN
src/assets/images/fiverr/telegram_bot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 904 KiB |
BIN
src/assets/images/fiverr/website.jpg
Normal file
BIN
src/assets/images/fiverr/website.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 958 KiB |
53
src/components/ContactMethod.vue
Normal file
53
src/components/ContactMethod.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" :class="iconClass">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="iconPath" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ title }}</div>
|
||||
<component :is="linkComponent" :href="href" :class="linkClass">
|
||||
{{ text }}
|
||||
</component>
|
||||
<div class="contact-description">{{ description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
type: 'email' | 'phone' | 'location'
|
||||
title: string
|
||||
text: string
|
||||
description: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const iconClass = computed(() => `contact-icon-${props.type}`)
|
||||
|
||||
const linkComponent = computed(() => props.href ? 'a' : 'div')
|
||||
|
||||
const linkClass = computed(() => props.href ? 'contact-link' : 'contact-text')
|
||||
|
||||
const iconPath = computed(() => {
|
||||
switch (props.type) {
|
||||
case 'email':
|
||||
return 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
|
||||
case 'phone':
|
||||
return 'M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'
|
||||
case 'location':
|
||||
return 'M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './styles/ContactMethod.css';
|
||||
</style>
|
||||
32
src/components/FiverrCta.vue
Normal file
32
src/components/FiverrCta.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content text-center">
|
||||
<h2 class="cta-title">{{ title }}</h2>
|
||||
<p class="cta-subtitle">{{ subtitle }}</p>
|
||||
<a :href="ctaUrl" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
|
||||
{{ ctaText }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
subtitle: string
|
||||
ctaUrl: string
|
||||
ctaText: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './styles/FiverrCta.css';
|
||||
</style>
|
||||
50
src/components/FiverrHero.vue
Normal file
50
src/components/FiverrHero.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<section class="fiverr-hero">
|
||||
<div class="container">
|
||||
<div class="hero-content text-center">
|
||||
<h1 class="hero-title">{{ title }}</h1>
|
||||
<p class="hero-subtitle">{{ subtitle }}</p>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats-grid">
|
||||
<div v-for="stat in stats" :key="stat.label" class="stat-item">
|
||||
<div class="stat-number">{{ stat.number }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<div class="hero-cta">
|
||||
<a :href="ctaUrl" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-lg">
|
||||
{{ ctaText }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Stat {
|
||||
number: string | number
|
||||
label: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
subtitle: string
|
||||
stats: Stat[]
|
||||
ctaUrl: string
|
||||
ctaText: string
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './styles/FiverrHero.css';
|
||||
</style>
|
||||
103
src/components/FiverrServiceCard.vue
Normal file
103
src/components/FiverrServiceCard.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<article class="card group service-card">
|
||||
<!-- Image -->
|
||||
<div class="service-image">
|
||||
<img :src="imageUrl" :alt="title" loading="lazy">
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="card-body">
|
||||
<!-- Price & Status -->
|
||||
<div class="service-header">
|
||||
<span class="badge badge-primary">{{ price }}</span>
|
||||
<span :class="statusBadgeClass">{{ statusText }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="service-title">{{ title }}</h3>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="service-description">{{ description }}</p>
|
||||
|
||||
<!-- Features -->
|
||||
<div class="features-list">
|
||||
<div class="features-title">{{ featuresTitle }}</div>
|
||||
<ul class="features-items">
|
||||
<li v-for="(feature, index) in displayedFeatures" :key="index" class="feature-item">
|
||||
<svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{{ feature }}
|
||||
</li>
|
||||
<li v-if="hasMoreFeatures" class="more-features">
|
||||
+{{ remainingFeaturesCount }} {{ moreFeaturesText }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Action -->
|
||||
<div class="service-actions">
|
||||
<a v-if="isAvailable" :href="url" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm">
|
||||
{{ orderText }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
<button v-else class="btn btn-secondary btn-sm" disabled>
|
||||
{{ learnMoreText }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
description: string
|
||||
price: string
|
||||
url: string
|
||||
imageUrl: string
|
||||
features: string[]
|
||||
featuresTitle: string
|
||||
orderText: string
|
||||
learnMoreText: string
|
||||
moreFeaturesText: string
|
||||
comingSoonText: string
|
||||
availableText: string
|
||||
maxFeatures?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
maxFeatures: 5
|
||||
})
|
||||
|
||||
const isAvailable = computed(() => props.url !== '#')
|
||||
|
||||
const displayedFeatures = computed(() =>
|
||||
props.features.slice(0, props.maxFeatures)
|
||||
)
|
||||
|
||||
const hasMoreFeatures = computed(() =>
|
||||
props.features.length > props.maxFeatures
|
||||
)
|
||||
|
||||
const remainingFeaturesCount = computed(() =>
|
||||
props.features.length - props.maxFeatures
|
||||
)
|
||||
|
||||
const statusText = computed(() =>
|
||||
isAvailable.value ? props.availableText : props.comingSoonText
|
||||
)
|
||||
|
||||
const statusBadgeClass = computed(() =>
|
||||
isAvailable.value ? 'badge badge-success text-xs' : 'badge badge-warning text-xs'
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './styles/FiverrServiceCard.css';
|
||||
</style>
|
||||
@@ -24,65 +24,5 @@ const languages = [
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.language-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.language-switcher-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--space-xs);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.language-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--border-radius-md);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.language-btn:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.language-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.flag {
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lang-code {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 640px) {
|
||||
.lang-code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.language-btn {
|
||||
padding: var(--space-xs);
|
||||
}
|
||||
}
|
||||
@import './styles/LanguageSwitcher.css';
|
||||
</style>
|
||||
|
||||
@@ -36,32 +36,14 @@ const translatedCategory = computed(() => {
|
||||
<template>
|
||||
<article class="card group">
|
||||
<!-- Image -->
|
||||
<div class="relative overflow-hidden" style="aspect-ratio: 16/9;">
|
||||
<img :src="imageUrl" :alt="project.title"
|
||||
class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" loading="lazy">
|
||||
<!-- Overlay -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div v-if="project.buttons && project.buttons.length > 0" class="flex gap-2">
|
||||
<a v-for="button in project.buttons" :key="button.title" :href="button.link" target="_blank"
|
||||
rel="noopener noreferrer" class="btn btn-primary btn-sm" @click.stop>
|
||||
{{ t(`projects.buttons.${button.title.toLowerCase().replace(/\s+/g, '')}`, button.title) }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-image">
|
||||
<img :src="imageUrl" :alt="project.title" loading="lazy">
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="card-body">
|
||||
<!-- Category & Date -->
|
||||
<div class="flex items-center justify-between mb-md">
|
||||
<div class="project-meta">
|
||||
<span v-if="project.category" class="badge badge-primary">
|
||||
{{ translatedCategory }}
|
||||
</span>
|
||||
@@ -71,17 +53,17 @@ const translatedCategory = computed(() => {
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="text-xl font-bold mb-md group-hover:text-primary transition-colors">
|
||||
<h3 class="project-title">
|
||||
{{ translatedTitle }}
|
||||
</h3>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-secondary mb-lg line-clamp-3">
|
||||
<p class="project-description">
|
||||
{{ translatedDescription }}
|
||||
</p>
|
||||
|
||||
<!-- Technologies -->
|
||||
<div v-if="project.technologies && project.technologies.length > 0" class="flex flex-wrap gap-2 mb-lg">
|
||||
<div v-if="project.technologies && project.technologies.length > 0" class="project-technologies">
|
||||
<span v-for="tech in project.technologies.slice(0, 3)" :key="tech" class="badge badge-secondary text-xs">
|
||||
{{ tech }}
|
||||
</span>
|
||||
@@ -91,7 +73,7 @@ const translatedCategory = computed(() => {
|
||||
</div>
|
||||
|
||||
<!-- Action -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="project-actions">
|
||||
<RouterLink :to="`/project/${project.id}`" class="btn btn-secondary btn-sm">
|
||||
{{ t('projects.buttons.viewProject') }}
|
||||
<svg class="btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -104,155 +86,5 @@ const translatedCategory = computed(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Line clamp utility */
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.bottom-4 {
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.left-4 {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.right-4 {
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.group-hover\:text-primary {
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
|
||||
.duration-300 {
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.group-hover\:scale-110 {
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:scale-110 {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group-hover\:opacity-100 {
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:opacity-100 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@import './styles/ProjectCard.css';
|
||||
</style>
|
||||
|
||||
@@ -99,38 +99,5 @@ const getLevelColor = (level: Technology['level']) => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tech-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-primary);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tech-badge:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tech-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tech-name {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tech-level {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
}
|
||||
@import './styles/TechBadge.css';
|
||||
</style>
|
||||
|
||||
@@ -23,46 +23,5 @@ const { isDark, toggleTheme } = useTheme()
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
:global(.dark) .theme-toggle {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:global(.dark) .theme-toggle:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
@import './styles/ThemeToggle.css';
|
||||
</style>
|
||||
|
||||
@@ -111,102 +111,5 @@ const services = computed(() => [
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Footer Base */
|
||||
.footer {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-4xl) 0 var(--space-xl);
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Footer logo */
|
||||
.footer-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
/* Footer Brand */
|
||||
.footer-brand {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Footer Titles */
|
||||
.footer-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Footer Description */
|
||||
.footer-description {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Footer Copyright */
|
||||
.footer-copyright {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Footer Bottom */
|
||||
.footer-bottom {
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
padding-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Social Links */
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--bg-secondary);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
scale: 1.05;
|
||||
}
|
||||
|
||||
/* Footer Links */
|
||||
.footer-link {
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.space-y-sm>*+* {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 768px) {
|
||||
.md\:col-span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
@import '../styles/AppFooter.css';
|
||||
</style>
|
||||
|
||||
@@ -14,6 +14,7 @@ const navigation = computed(() => [
|
||||
{ name: t('nav.projects'), path: '/projects' },
|
||||
{ name: t('nav.about'), path: '/about' },
|
||||
{ name: t('nav.contact'), path: '/contact' },
|
||||
{ name: t('nav.fiverr'), path: '/fiverr' },
|
||||
])
|
||||
|
||||
const toggleMenu = () => {
|
||||
@@ -72,42 +73,5 @@ const toggleMenu = () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Header actions */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Logo styling */
|
||||
.logo-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
/* Mobile responsive utilities */
|
||||
@media (min-width: 768px) {
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation active state */
|
||||
.nav-link.router-link-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-link.router-link-active::after {
|
||||
width: 100%;
|
||||
}
|
||||
@import '../styles/AppHeader.css';
|
||||
</style>
|
||||
|
||||
100
src/components/styles/AppFooter.css
Normal file
100
src/components/styles/AppFooter.css
Normal file
@@ -0,0 +1,100 @@
|
||||
/* AppFooter Styles */
|
||||
|
||||
/* Footer Base */
|
||||
.footer {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-4xl) 0 var(--space-xl);
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Footer logo */
|
||||
.footer-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
/* Footer Brand */
|
||||
.footer-brand {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Footer Titles */
|
||||
.footer-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Footer Description */
|
||||
.footer-description {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Footer Copyright */
|
||||
.footer-copyright {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Footer Bottom */
|
||||
.footer-bottom {
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
padding-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Social Links */
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--bg-secondary);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
scale: 1.05;
|
||||
}
|
||||
|
||||
/* Footer Links */
|
||||
.footer-link {
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.space-y-sm > * + * {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 768px) {
|
||||
.md\:col-span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
40
src/components/styles/AppHeader.css
Normal file
40
src/components/styles/AppHeader.css
Normal file
@@ -0,0 +1,40 @@
|
||||
/* AppHeader Styles */
|
||||
|
||||
/* Header actions */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
/* Logo styling */
|
||||
.logo-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
/* Mobile responsive utilities */
|
||||
@media (min-width: 768px) {
|
||||
.md\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation active state */
|
||||
.nav-link.router-link-active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-link.router-link-active::after {
|
||||
width: 100%;
|
||||
}
|
||||
80
src/components/styles/ContactMethod.css
Normal file
80
src/components/styles/ContactMethod.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* Contact Methods */
|
||||
.contact-method {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-method:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--border-radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-icon-email {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.contact-icon-phone {
|
||||
background: var(--color-info);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.contact-icon-location {
|
||||
background: var(--color-secondary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition-fast);
|
||||
display: block;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
38
src/components/styles/FiverrCta.css
Normal file
38
src/components/styles/FiverrCta.css
Normal file
@@ -0,0 +1,38 @@
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-4xl) 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cta-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5e7eb' fill-opacity='0.3'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-title {
|
||||
font-size: var(--font-size-4xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.cta-subtitle {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-2xl);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
74
src/components/styles/FiverrHero.css
Normal file
74
src/components/styles/FiverrHero.css
Normal file
@@ -0,0 +1,74 @@
|
||||
/* Hero Section */
|
||||
.fiverr-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-4xl) 0 var(--space-3xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fiverr-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: var(--font-size-5xl);
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: var(--font-size-xl);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-2xl);
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
margin-bottom: var(--space-2xl);
|
||||
max-width: 500px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
95
src/components/styles/FiverrServiceCard.css
Normal file
95
src/components/styles/FiverrServiceCard.css
Normal file
@@ -0,0 +1,95 @@
|
||||
/* Service Card */
|
||||
.service-card {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.service-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.group:hover .service-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.service-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--space-md);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.group:hover .service-title {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.service-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-lg);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.features-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-xs);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--color-success);
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.more-features {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.service-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
63
src/components/styles/LanguageSwitcher.css
Normal file
63
src/components/styles/LanguageSwitcher.css
Normal file
@@ -0,0 +1,63 @@
|
||||
/* LanguageSwitcher Styles */
|
||||
|
||||
.language-switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.language-switcher-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-xs);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--space-xs);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.language-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: var(--border-radius-md);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.language-btn:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.language-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.flag {
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lang-code {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Mobile responsive */
|
||||
@media (max-width: 640px) {
|
||||
.lang-code {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.language-btn {
|
||||
padding: var(--space-xs);
|
||||
}
|
||||
}
|
||||
81
src/components/styles/ProjectCard.css
Normal file
81
src/components/styles/ProjectCard.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/* Project Card Styles */
|
||||
.project-image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.project-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-normal);
|
||||
}
|
||||
|
||||
.group:hover .project-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Project overlay */
|
||||
.project-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%, transparent 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
|
||||
.group:hover .project-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.project-overlay-content {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
/* Project content */
|
||||
.project-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--space-md);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.group:hover .project-title {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.project-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-lg);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-technologies {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.project-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
36
src/components/styles/TechBadge.css
Normal file
36
src/components/styles/TechBadge.css
Normal file
@@ -0,0 +1,36 @@
|
||||
/* TechBadge Styles */
|
||||
|
||||
.tech-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-primary);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tech-badge:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.tech-image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tech-name {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tech-level {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
}
|
||||
44
src/components/styles/ThemeToggle.css
Normal file
44
src/components/styles/ThemeToggle.css
Normal file
@@ -0,0 +1,44 @@
|
||||
/* ThemeToggle Styles */
|
||||
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
:global(.dark) .theme-toggle {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
:global(.dark) .theme-toggle:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
*/
|
||||
export function useAssets() {
|
||||
// Pre-load all images using Vite's import.meta.glob
|
||||
const imageModules = import.meta.glob('../assets/images/*', { eager: true })
|
||||
const imageModules = import.meta.glob('../assets/images/**/*', { eager: true })
|
||||
|
||||
/**
|
||||
* Get image URL from assets folder
|
||||
|
||||
@@ -11,6 +11,9 @@ export function useSiteConfig() {
|
||||
description: t('seo.home.description'),
|
||||
contact: {
|
||||
...baseSiteConfig.contact
|
||||
},
|
||||
fiverr: {
|
||||
...baseSiteConfig.fiverr
|
||||
}
|
||||
}))
|
||||
|
||||
|
||||
@@ -11,6 +11,18 @@ export interface ContactInfo {
|
||||
location: string
|
||||
}
|
||||
|
||||
export interface FiverrService {
|
||||
id: string
|
||||
url: string
|
||||
image: string
|
||||
price: string
|
||||
}
|
||||
|
||||
export interface FiverrConfig {
|
||||
profileUrl: string
|
||||
services: FiverrService[]
|
||||
}
|
||||
|
||||
export interface SiteConfig {
|
||||
name: string
|
||||
title: string
|
||||
@@ -19,6 +31,7 @@ export interface SiteConfig {
|
||||
url: string
|
||||
contact: ContactInfo
|
||||
social: SocialLink[]
|
||||
fiverr: FiverrConfig
|
||||
}
|
||||
|
||||
export const siteConfig: SiteConfig = {
|
||||
@@ -58,5 +71,35 @@ export const siteConfig: SiteConfig = {
|
||||
url: 'mailto:contact@killiandalcin.fr',
|
||||
icon: 'email'
|
||||
}
|
||||
]
|
||||
],
|
||||
|
||||
fiverr: {
|
||||
profileUrl: 'https://www.fiverr.com/users/mr_kayjaydee',
|
||||
services: [
|
||||
{
|
||||
id: 'discord-bot',
|
||||
url: 'https://www.fiverr.com/s/rEDa84j',
|
||||
image: '@/assets/images/fiverr/discord_bot.jpg',
|
||||
price: '$25'
|
||||
},
|
||||
{
|
||||
id: 'minecraft-plugin',
|
||||
url: 'https://www.fiverr.com/s/xXVY20Q',
|
||||
image: '@/assets/images/fiverr/minecraft_plugin.jpg',
|
||||
price: '$50'
|
||||
},
|
||||
{
|
||||
id: 'telegram-bot',
|
||||
url: '#',
|
||||
image: '@/assets/images/fiverr/telegram_bot.jpg',
|
||||
price: '$20'
|
||||
},
|
||||
{
|
||||
id: 'website-development',
|
||||
url: '#',
|
||||
image: '@/assets/images/fiverr/website.jpg',
|
||||
price: '$50'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@ export default {
|
||||
home: 'Home',
|
||||
projects: 'Projects',
|
||||
about: 'About',
|
||||
contact: 'Contact'
|
||||
contact: 'Contact',
|
||||
fiverr: 'Fiverr Services'
|
||||
},
|
||||
|
||||
// Home page
|
||||
@@ -120,6 +121,80 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// Fiverr page
|
||||
fiverr: {
|
||||
title: 'Fiverr Services',
|
||||
subtitle: 'Professional freelance services on Fiverr. Get custom solutions for your Discord server, Minecraft server, or web development needs.',
|
||||
profileCta: 'Visit My Fiverr Profile',
|
||||
stats: {
|
||||
rating: 'Rating'
|
||||
},
|
||||
pricing: {
|
||||
startingAt: 'Starting at'
|
||||
},
|
||||
services: {
|
||||
title: 'Available Services',
|
||||
subtitle: 'Choose from a variety of professional services tailored to your needs.',
|
||||
features: 'Features',
|
||||
orderNow: 'Order Now',
|
||||
learnMore: 'Learn More',
|
||||
moreFeatures: 'more features',
|
||||
comingSoon: 'Coming Soon',
|
||||
available: 'Available'
|
||||
},
|
||||
serviceData: {
|
||||
'discord-bot': {
|
||||
title: 'Custom Discord Bot Creation',
|
||||
description: 'Supercharge Your Discord Server with a Powerful, Fully Custom Bot',
|
||||
features: [
|
||||
'Advanced moderation & utility (Tickets, Leveling)',
|
||||
'Engaging features (Minigames, Giveaways, Trackers)',
|
||||
'Powerful API integrations (PayPal, YouTube, Twitch, etc.)',
|
||||
'Fully custom – no templates'
|
||||
]
|
||||
},
|
||||
'minecraft-plugin': {
|
||||
title: 'Minecraft Plugin Development',
|
||||
description: 'Custom Minecraft plugins tailored for your server needs',
|
||||
features: [
|
||||
'Custom gameplay mechanics',
|
||||
'Server management tools',
|
||||
'Player engagement features',
|
||||
'Performance optimized'
|
||||
]
|
||||
},
|
||||
'telegram-bot': {
|
||||
title: 'Telegram Bot Development',
|
||||
description: 'Professional Telegram bots for automation and engagement',
|
||||
features: [
|
||||
'Automated messaging',
|
||||
'User management',
|
||||
'API integrations',
|
||||
'Custom commands'
|
||||
]
|
||||
},
|
||||
'website-development': {
|
||||
title: 'Modern Website Development',
|
||||
description: 'Beautiful, responsive websites built with latest technologies',
|
||||
features: [
|
||||
'Responsive design',
|
||||
'Modern UI/UX',
|
||||
'SEO optimized',
|
||||
'Fast performance'
|
||||
]
|
||||
}
|
||||
},
|
||||
testimonials: {
|
||||
title: 'What Clients Say',
|
||||
subtitle: 'Trusted by clients worldwide for quality and reliability.'
|
||||
},
|
||||
cta: {
|
||||
title: 'Ready to Get Started?',
|
||||
subtitle: 'Choose a service that fits your needs and let\'s bring your project to life.',
|
||||
button: 'Browse All Services'
|
||||
}
|
||||
},
|
||||
|
||||
// Contact page
|
||||
contact: {
|
||||
title: 'Contact Me',
|
||||
@@ -261,6 +336,10 @@ export default {
|
||||
contact: {
|
||||
title: 'Contact - Killian',
|
||||
description: 'Ready to discuss your next project? Let\'s create something amazing together.'
|
||||
},
|
||||
fiverr: {
|
||||
title: 'Fiverr Services - Killian',
|
||||
description: 'Professional freelance services on Fiverr. Custom Discord bots, Minecraft plugins, and web development solutions.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@ export default {
|
||||
home: 'Accueil',
|
||||
projects: 'Projets',
|
||||
about: 'À propos',
|
||||
contact: 'Contact'
|
||||
contact: 'Contact',
|
||||
fiverr: 'Services Fiverr'
|
||||
},
|
||||
|
||||
// Home page
|
||||
@@ -120,6 +121,80 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// Fiverr page
|
||||
fiverr: {
|
||||
title: 'Services Fiverr',
|
||||
subtitle: 'Services de freelance professionnels sur Fiverr. Obtenez des solutions personnalisées pour votre serveur Discord, serveur Minecraft ou besoins de développement web.',
|
||||
profileCta: 'Visiter Mon Profil Fiverr',
|
||||
stats: {
|
||||
rating: 'Évaluation'
|
||||
},
|
||||
pricing: {
|
||||
startingAt: 'À partir de'
|
||||
},
|
||||
services: {
|
||||
title: 'Services Disponibles',
|
||||
subtitle: 'Choisissez parmi une variété de services professionnels adaptés à vos besoins.',
|
||||
features: 'Fonctionnalités',
|
||||
orderNow: 'Commander Maintenant',
|
||||
learnMore: 'En Savoir Plus',
|
||||
moreFeatures: 'fonctionnalités supplémentaires',
|
||||
comingSoon: 'Bientôt Disponible',
|
||||
available: 'Disponible'
|
||||
},
|
||||
serviceData: {
|
||||
'discord-bot': {
|
||||
title: 'Création de Bot Discord Personnalisé',
|
||||
description: 'Boostez votre serveur Discord avec un bot puissant et entièrement personnalisé',
|
||||
features: [
|
||||
'Modération avancée et utilitaires (Tickets, Système de niveaux)',
|
||||
'Fonctionnalités engageantes (Mini-jeux, Concours, Trackers)',
|
||||
'Intégrations API puissantes (PayPal, YouTube, Twitch, etc.)',
|
||||
'Entièrement personnalisé – pas de templates'
|
||||
]
|
||||
},
|
||||
'minecraft-plugin': {
|
||||
title: 'Développement de Plugin Minecraft',
|
||||
description: 'Plugins Minecraft personnalisés adaptés aux besoins de votre serveur',
|
||||
features: [
|
||||
'Mécaniques de jeu personnalisées',
|
||||
'Outils de gestion de serveur',
|
||||
'Fonctionnalités d\'engagement des joueurs',
|
||||
'Optimisé pour les performances'
|
||||
]
|
||||
},
|
||||
'telegram-bot': {
|
||||
title: 'Développement de Bot Telegram',
|
||||
description: 'Bots Telegram professionnels pour l\'automatisation et l\'engagement',
|
||||
features: [
|
||||
'Messagerie automatisée',
|
||||
'Gestion des utilisateurs',
|
||||
'Intégrations API',
|
||||
'Commandes personnalisées'
|
||||
]
|
||||
},
|
||||
'website-development': {
|
||||
title: 'Développement de Site Web Moderne',
|
||||
description: 'Sites web beaux et réactifs construits avec les dernières technologies',
|
||||
features: [
|
||||
'Design responsive',
|
||||
'UI/UX moderne',
|
||||
'Optimisé pour le SEO',
|
||||
'Performances rapides'
|
||||
]
|
||||
}
|
||||
},
|
||||
testimonials: {
|
||||
title: 'Ce que disent les clients',
|
||||
subtitle: 'Fait confiance par des clients du monde entier pour la qualité et la fiabilité.'
|
||||
},
|
||||
cta: {
|
||||
title: 'Prêt à commencer ?',
|
||||
subtitle: 'Choisissez un service qui correspond à vos besoins et donnons vie à votre projet.',
|
||||
button: 'Parcourir tous les services'
|
||||
}
|
||||
},
|
||||
|
||||
// Contact page
|
||||
contact: {
|
||||
title: 'Me Contacter',
|
||||
@@ -261,6 +336,10 @@ export default {
|
||||
contact: {
|
||||
title: 'Contact - Killian',
|
||||
description: 'Prêt à discuter de votre prochain projet ? Créons ensemble quelque chose d\'incroyable.'
|
||||
},
|
||||
fiverr: {
|
||||
title: 'Services Fiverr - Killian',
|
||||
description: 'Services de freelance professionnels sur Fiverr. Bots Discord personnalisés, plugins Minecraft et solutions de développement web.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,6 +29,11 @@ const router = createRouter({
|
||||
path: '/contact',
|
||||
name: 'contact',
|
||||
component: () => import('../views/ContactPage.vue')
|
||||
},
|
||||
{
|
||||
path: '/fiverr',
|
||||
name: 'fiverr',
|
||||
component: () => import('../views/FiverrPage.vue')
|
||||
}
|
||||
],
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
|
||||
@@ -109,8 +109,7 @@ const approachCards = computed(() => [
|
||||
<div v-for="category in techCategories" :key="category.key" class="card animate-fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center mb-lg">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md"
|
||||
:style="{ background: category.color, color: 'var(--text-inverse)' }">
|
||||
<div class="category-icon" :style="{ background: category.color, color: 'var(--text-inverse)' }">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="category.icon"></path>
|
||||
</svg>
|
||||
@@ -129,8 +128,7 @@ const approachCards = computed(() => [
|
||||
<div class="card animate-fade-in-up">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center mb-lg">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md"
|
||||
style="background: var(--color-primary); color: var(--text-inverse);">
|
||||
<div class="category-icon" :style="{ background: 'var(--color-info)', color: 'var(--text-inverse)' }">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
@@ -149,7 +147,7 @@ const approachCards = computed(() => [
|
||||
</section>
|
||||
|
||||
<!-- Approach Section -->
|
||||
<section class="section" style="background: var(--bg-secondary);">
|
||||
<section class="approach-section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('about.approach.title') }}</h2>
|
||||
@@ -163,8 +161,7 @@ const approachCards = computed(() => [
|
||||
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
||||
<div class="card-body">
|
||||
<div class="flex items-start">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mr-md flex-shrink-0"
|
||||
:style="{ background: card.color, color: 'var(--text-inverse)' }">
|
||||
<div class="approach-icon" :style="{ background: card.color, color: 'var(--text-inverse)' }">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="card.icon"></path>
|
||||
</svg>
|
||||
@@ -212,46 +209,5 @@ const approachCards = computed(() => [
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom animations with delays */
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Spacing utilities */
|
||||
.space-y-lg>*+* {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@import './styles/AboutPage.css';
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { useSeo } from '@/composables/useSeo'
|
||||
import { useI18n } from '@/composables/useI18n'
|
||||
import { useSiteConfig } from '@/composables/useSiteConfig'
|
||||
import ContactMethod from '@/components/ContactMethod.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { siteConfig } = useSiteConfig()
|
||||
@@ -55,60 +56,16 @@ useSeo({
|
||||
<div class="card-body">
|
||||
<h2 class="text-2xl font-bold mb-lg">{{ t('contact.quickContact') }}</h2>
|
||||
<div class="space-y-md">
|
||||
<!-- Email -->
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" style="background: var(--color-primary); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ t('contact.methods.email') }}</div>
|
||||
<a :href="siteConfig.social.find(s => s.icon === 'email')?.url" class="contact-link">
|
||||
{{ siteConfig.contact.email }}
|
||||
</a>
|
||||
<div class="contact-description">{{ t('contact.methods.responseTime') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContactMethod type="email" :title="t('contact.methods.email')" :text="siteConfig.contact.email"
|
||||
:description="t('contact.methods.responseTime')"
|
||||
:href="siteConfig.social.find(s => s.icon === 'email')?.url" />
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" style="background: var(--color-info); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ t('contact.methods.phone') }}</div>
|
||||
<a :href="`tel:${siteConfig.contact.phone.replace(/\s/g, '')}`" class="contact-link">
|
||||
{{ siteConfig.contact.phone }}
|
||||
</a>
|
||||
<div class="contact-description">{{ t('contact.methods.availability') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContactMethod type="phone" :title="t('contact.methods.phone')" :text="siteConfig.contact.phone"
|
||||
:description="t('contact.methods.availability')"
|
||||
:href="`tel:${siteConfig.contact.phone.replace(/\s/g, '')}`" />
|
||||
|
||||
<!-- Location -->
|
||||
<div class="contact-method">
|
||||
<div class="contact-icon" style="background: var(--color-secondary); color: var(--text-inverse);">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
||||
</path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-title">{{ t('contact.methods.location') }}</div>
|
||||
<div class="contact-text">{{ siteConfig.contact.location }}</div>
|
||||
<div class="contact-description">{{ t('contact.methods.availability') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ContactMethod type="location" :title="t('contact.methods.location')"
|
||||
:text="siteConfig.contact.location" :description="t('contact.methods.availability')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -153,7 +110,7 @@ useSeo({
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="section" style="background: var(--bg-secondary);">
|
||||
<section class="faq-section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('contact.faq.title') }}</h2>
|
||||
@@ -165,8 +122,7 @@ useSeo({
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-xl">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
||||
style="background: var(--color-success); color: var(--text-inverse);">
|
||||
<div class="faq-icon faq-icon-success">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
@@ -179,8 +135,7 @@ useSeo({
|
||||
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
||||
style="background: var(--color-primary); color: var(--text-inverse);">
|
||||
<div class="faq-icon faq-icon-primary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
|
||||
@@ -194,8 +149,7 @@ useSeo({
|
||||
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-lg"
|
||||
style="background: var(--color-secondary); color: var(--text-inverse);">
|
||||
<div class="faq-icon faq-icon-secondary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
|
||||
@@ -213,290 +167,5 @@ useSeo({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Contact Page Styles */
|
||||
.contact-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.contact-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-4xl) 0 var(--space-3xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
max-width: 500px;
|
||||
margin: var(--space-2xl) auto 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Contact Methods */
|
||||
.contact-method {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-method:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--border-radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.contact-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Social Links */
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
group: true;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-icon {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.social-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-name {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.social-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-arrow {
|
||||
color: var(--text-inverse);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.space-y-sm>*+* {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
.space-y-md>*+* {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.gap-xl {
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.gap-2xl {
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mb-lg {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.mb-md {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.mb-2xl {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Removed hardcoded colors - using CSS variables instead */
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
@import './styles/ContactPage.css';
|
||||
</style>
|
||||
|
||||
93
src/views/FiverrPage.vue
Normal file
93
src/views/FiverrPage.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useI18n } from '@/composables/useI18n'
|
||||
import { useSeo } from '@/composables/useSeo'
|
||||
import { useSiteConfig } from '@/composables/useSiteConfig'
|
||||
import { useAssets } from '@/composables/useAssets'
|
||||
import FiverrHero from '@/components/FiverrHero.vue'
|
||||
import FiverrServiceCard from '@/components/FiverrServiceCard.vue'
|
||||
import FiverrCta from '@/components/FiverrCta.vue'
|
||||
import en from '@/locales/en'
|
||||
import fr from '@/locales/fr'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const { siteConfig } = useSiteConfig()
|
||||
const { getImageUrl } = useAssets()
|
||||
|
||||
// SEO
|
||||
useSeo({
|
||||
title: t('fiverr.title'),
|
||||
description: t('fiverr.subtitle')
|
||||
})
|
||||
|
||||
const services = computed(() => siteConfig.value.fiverr.services)
|
||||
const availableServices = computed(() => services.value.filter(s => s.url !== '#'))
|
||||
|
||||
// Get features from the current locale messages
|
||||
const getServiceFeatures = (serviceId: string) => {
|
||||
const messages = { en, fr }
|
||||
const currentMessages = messages[locale.value as keyof typeof messages]
|
||||
const serviceData = currentMessages?.fiverr?.serviceData?.[serviceId as keyof typeof currentMessages.fiverr.serviceData]
|
||||
return serviceData?.features || []
|
||||
}
|
||||
|
||||
// Hero data
|
||||
const heroStats = computed(() => [
|
||||
{
|
||||
number: availableServices.value.length,
|
||||
label: t('fiverr.services.orderNow')
|
||||
},
|
||||
{
|
||||
number: '5⭐',
|
||||
label: t('fiverr.stats.rating')
|
||||
}
|
||||
])
|
||||
|
||||
// Service card data
|
||||
const getServiceCardProps = (service: { id: string; price: string; url: string; image: string }) => ({
|
||||
title: t(`fiverr.serviceData.${service.id}.title`),
|
||||
description: t(`fiverr.serviceData.${service.id}.description`),
|
||||
price: `${t('fiverr.pricing.startingAt')} ${service.price}`,
|
||||
url: service.url,
|
||||
imageUrl: getImageUrl(service.image),
|
||||
features: getServiceFeatures(service.id),
|
||||
featuresTitle: t('fiverr.services.features'),
|
||||
orderText: t('fiverr.services.orderNow'),
|
||||
learnMoreText: t('fiverr.services.learnMore'),
|
||||
moreFeaturesText: t('fiverr.services.moreFeatures'),
|
||||
comingSoonText: t('fiverr.services.comingSoon'),
|
||||
availableText: t('fiverr.services.available')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="fiverr-page">
|
||||
<!-- Hero Section -->
|
||||
<FiverrHero :title="t('fiverr.title')" :subtitle="t('fiverr.subtitle')" :stats="heroStats"
|
||||
:cta-url="siteConfig.fiverr.profileUrl" :cta-text="t('fiverr.profileCta')" />
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="services-grid-section">
|
||||
<div class="container">
|
||||
<!-- Section Header -->
|
||||
<div class="section-header text-center">
|
||||
<h2 class="section-title">{{ t('fiverr.services.title') }}</h2>
|
||||
<p class="section-subtitle">{{ t('fiverr.services.subtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Services Grid -->
|
||||
<div class="services-grid">
|
||||
<FiverrServiceCard v-for="service in services" :key="service.id" v-bind="getServiceCardProps(service)" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<FiverrCta :title="t('fiverr.cta.title')" :subtitle="t('fiverr.cta.subtitle')"
|
||||
:cta-url="siteConfig.fiverr.profileUrl" :cta-text="t('fiverr.cta.button')" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import './styles/FiverrPage.css';
|
||||
</style>
|
||||
@@ -21,22 +21,26 @@ const featuredProjects = computed(() => {
|
||||
// Services data
|
||||
const services = computed(() => [
|
||||
{
|
||||
icon: '💻',
|
||||
icon: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
|
||||
color: 'var(--color-primary)',
|
||||
title: t('home.services.webDev.title'),
|
||||
description: t('home.services.webDev.description')
|
||||
},
|
||||
{
|
||||
icon: '📱',
|
||||
icon: 'M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z',
|
||||
color: 'var(--color-secondary)',
|
||||
title: t('home.services.mobileApps.title'),
|
||||
description: t('home.services.mobileApps.description')
|
||||
},
|
||||
{
|
||||
icon: '🚀',
|
||||
icon: 'M13 10V3L4 14h7v7l9-11h-7z',
|
||||
color: 'var(--color-success)',
|
||||
title: t('home.services.optimization.title'),
|
||||
description: t('home.services.optimization.description')
|
||||
},
|
||||
{
|
||||
icon: '🛠️',
|
||||
icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
|
||||
color: 'var(--color-warning)',
|
||||
title: t('home.services.maintenance.title'),
|
||||
description: t('home.services.maintenance.description')
|
||||
}
|
||||
@@ -74,13 +78,6 @@ const services = computed(() => [
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator -->
|
||||
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Projects Section -->
|
||||
@@ -110,7 +107,7 @@ const services = computed(() => [
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="section" style="background: var(--bg-secondary);">
|
||||
<section class="services-section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-2xl">
|
||||
<h2 class="mb-lg">{{ t('home.services.title') }}</h2>
|
||||
@@ -119,13 +116,21 @@ const services = computed(() => [
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-xl">
|
||||
<div v-for="(service, index) in services" :key="service.title" class="card text-center animate-fade-in-up"
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-xl">
|
||||
<div v-for="(service, index) in services" :key="index" class="card animate-fade-in-up"
|
||||
:style="{ 'animation-delay': `${index * 0.1}s` }">
|
||||
<div class="card-body">
|
||||
<div class="text-4xl mb-lg">{{ service.icon }}</div>
|
||||
<h3 class="text-xl font-bold mb-md">{{ service.title }}</h3>
|
||||
<p class="text-secondary">{{ service.description }}</p>
|
||||
<div class="flex items-start">
|
||||
<div class="service-icon" :style="{ background: service.color, color: 'var(--text-inverse)' }">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="service.icon"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-md">{{ service.title }}</h3>
|
||||
<p class="text-secondary">{{ service.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,98 +170,5 @@ const services = computed(() => [
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom animations with delays */
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.lg\:grid-cols-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bottom-8 {
|
||||
bottom: 2rem;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
|
||||
0%,
|
||||
20%,
|
||||
53%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
43% {
|
||||
transform: translate3d(-50%, -30px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(-50%, -15px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-50%, -4px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
@import './styles/HomePage.css';
|
||||
</style>
|
||||
|
||||
@@ -241,524 +241,5 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Project Detail Page Styles - Redesigned */
|
||||
.project-detail-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section - New Layout */
|
||||
.project-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-2xl) 0 var(--space-4xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all var(--transition-fast);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.breadcrumb-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Hero Grid Layout */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 400px 1fr;
|
||||
gap: var(--space-3xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Project Image Container */
|
||||
.project-image-container {
|
||||
position: relative;
|
||||
border-radius: var(--border-radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, rgba(37, 99, 235, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.project-image-container:hover .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Project Info */
|
||||
.project-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-category {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.project-date {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl));
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
margin-bottom: var(--space-lg);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: var(--font-size-lg);
|
||||
line-height: var(--line-height-relaxed);
|
||||
margin-bottom: var(--space-2xl);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.project-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Styles de boutons supprimés - utilisent maintenant les styles globaux */
|
||||
|
||||
/* Content Section */
|
||||
.project-content {
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: var(--space-4xl);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-bottom: var(--space-4xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xl);
|
||||
padding-bottom: var(--space-md);
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.project-long-description {
|
||||
font-size: var(--font-size-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Features */
|
||||
.features-list {
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
font-size: var(--font-size-base);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
transform: translateX(4px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--color-success);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Technologies */
|
||||
.tech-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
border-radius: var(--border-radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: all var(--transition-fast);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
/* Info Card */
|
||||
.info-card {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-xl);
|
||||
padding: var(--space-xl);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-md) 0;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Related Projects */
|
||||
.related-projects {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-xl);
|
||||
padding: var(--space-xl);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.related-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.related-item {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: var(--border-width) solid transparent;
|
||||
}
|
||||
|
||||
.related-item:hover {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.related-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--border-radius-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.related-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.related-project-title {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.related-project-description {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 350px 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: var(--space-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.project-image-container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.project-hero {
|
||||
padding: var(--space-xl) 0 var(--space-2xl);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.project-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.project-actions .btn,
|
||||
.project-actions .btn-outline {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.related-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.related-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-meta {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.project-category,
|
||||
.project-date {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.features {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@import './styles/ProjectDetailPage.css';
|
||||
</style>
|
||||
|
||||
@@ -170,285 +170,5 @@ const featuredProjects = computed(() => projects.filter(p => p.featured).length)
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Projects Page Styles */
|
||||
.projects-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.projects-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-4xl) 0 var(--space-3xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.projects-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(var(--font-size-4xl), 4vw, var(--font-size-5xl));
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
margin-bottom: var(--space-lg);
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-2xl);
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-xl);
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* Filters Section */
|
||||
.filters-section {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--space-xl) 0;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-lg);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: var(--space-md);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: var(--space-md) var(--space-md) var(--space-md) 48px;
|
||||
font-size: var(--font-size-base);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: var(--space-md);
|
||||
font-size: var(--font-size-base);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
|
||||
}
|
||||
|
||||
/* Projects Grid Section */
|
||||
.projects-grid-section {
|
||||
padding: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
.results-info {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.results-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.project-card-item {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* No Results */
|
||||
.no-results {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
.no-results-content {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
color: var(--text-tertiary);
|
||||
margin: 0 auto var(--space-lg);
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.no-results-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-xl);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.filters-section {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-subtitle {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
@import './styles/ProjectsPage.css';
|
||||
</style>
|
||||
|
||||
74
src/views/styles/AboutPage.css
Normal file
74
src/views/styles/AboutPage.css
Normal file
@@ -0,0 +1,74 @@
|
||||
/* AboutPage Styles */
|
||||
|
||||
/* Approach Section */
|
||||
.approach-section {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
/* Category Icons */
|
||||
.category-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: var(--border-radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-md);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
/* Approach Icons */
|
||||
.approach-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: var(--border-radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Custom animations with delays */
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Spacing utilities */
|
||||
.space-y-lg > * + * {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
283
src/views/styles/ContactPage.css
Normal file
283
src/views/styles/ContactPage.css
Normal file
@@ -0,0 +1,283 @@
|
||||
/* ContactPage Styles */
|
||||
|
||||
/* Contact Page Styles */
|
||||
.contact-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.contact-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-4xl) 0 var(--space-3xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contact-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
max-width: 500px;
|
||||
margin: var(--space-2xl) auto 0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* FAQ Section */
|
||||
.faq-section {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
/* Spacing utilities */
|
||||
.space-y-md > * + * {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.space-y-sm > * + * {
|
||||
margin-top: var(--space-sm);
|
||||
}
|
||||
|
||||
/* FAQ Icons */
|
||||
.faq-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: var(--border-radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--space-lg);
|
||||
}
|
||||
|
||||
.faq-icon-success {
|
||||
background: var(--color-success);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.faq-icon-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.faq-icon-secondary {
|
||||
background: var(--color-secondary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Social Links */
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
group: true;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--text-inverse);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-icon {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.social-name {
|
||||
flex: 1;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-name {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.social-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--text-secondary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.social-link:hover .social-arrow {
|
||||
color: var(--text-inverse);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.gap-xl {
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.gap-2xl {
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mb-lg {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.mb-md {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.mb-2xl {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
51
src/views/styles/FiverrPage.css
Normal file
51
src/views/styles/FiverrPage.css
Normal file
@@ -0,0 +1,51 @@
|
||||
/* Fiverr Page Main Styles */
|
||||
.fiverr-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Services Grid Section */
|
||||
.services-grid-section {
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: var(--space-3xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-4xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-3xl);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
}
|
||||
120
src/views/styles/HomePage.css
Normal file
120
src/views/styles/HomePage.css
Normal file
@@ -0,0 +1,120 @@
|
||||
/* HomePage Styles */
|
||||
|
||||
/* Services Section */
|
||||
.services-section {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
/* Service Icons */
|
||||
.service-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: var(--border-radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: var(--space-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Scroll Icon */
|
||||
.scroll-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Custom animations with delays */
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Responsive utilities */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.lg\:grid-cols-4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom utilities */
|
||||
.max-w-2xl {
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.transform {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.-translate-x-1\/2 {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bottom-8 {
|
||||
bottom: 2rem;
|
||||
}
|
||||
|
||||
.left-1\/2 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
20%,
|
||||
53%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
43% {
|
||||
transform: translate3d(-50%, -30px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translate3d(-50%, -15px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(-50%, -4px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
520
src/views/styles/ProjectDetailPage.css
Normal file
520
src/views/styles/ProjectDetailPage.css
Normal file
@@ -0,0 +1,520 @@
|
||||
/* ProjectDetailPage Styles */
|
||||
|
||||
/* Project Detail Page Styles - Redesigned */
|
||||
.project-detail-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section - New Layout */
|
||||
.project-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-2xl) 0 var(--space-4xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb {
|
||||
margin-bottom: var(--space-2xl);
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: all var(--transition-fast);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--border-radius-md);
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
color: var(--color-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.breadcrumb-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Hero Grid Layout */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 400px 1fr;
|
||||
gap: var(--space-3xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Project Image Container */
|
||||
.project-image-container {
|
||||
position: relative;
|
||||
border-radius: var(--border-radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, rgba(37, 99, 235, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.project-image-container:hover .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Project Info */
|
||||
.project-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-category {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.project-date {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-radius: var(--border-radius-full);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.project-title {
|
||||
font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl));
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
margin-bottom: var(--space-lg);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.project-description {
|
||||
font-size: var(--font-size-lg);
|
||||
line-height: var(--line-height-relaxed);
|
||||
margin-bottom: var(--space-2xl);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.project-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.project-content {
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
gap: var(--space-4xl);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-bottom: var(--space-4xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xl);
|
||||
padding-bottom: var(--space-md);
|
||||
border-bottom: 3px solid var(--color-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
.project-long-description {
|
||||
font-size: var(--font-size-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Features */
|
||||
.features-list {
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-lg);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
font-size: var(--font-size-base);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.feature-item:hover {
|
||||
transform: translateX(4px);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--color-success);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Technologies */
|
||||
.tech-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
border-radius: var(--border-radius-xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg);
|
||||
transition: all var(--transition-fast);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
/* Info Card */
|
||||
.info-card {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-xl);
|
||||
padding: var(--space-xl);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-md) 0;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Related Projects */
|
||||
.related-projects {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius-xl);
|
||||
padding: var(--space-xl);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.related-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.related-item {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--border-radius-lg);
|
||||
transition: all var(--transition-fast);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: var(--border-width) solid transparent;
|
||||
}
|
||||
|
||||
.related-item:hover {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.related-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--border-radius-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.related-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.related-project-title {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.related-project-description {
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--line-height-relaxed);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 350px 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: var(--space-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.project-image-container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-2xl);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.project-hero {
|
||||
padding: var(--space-xl) 0 var(--space-2xl);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.project-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.project-actions .btn,
|
||||
.project-actions .btn-outline {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.related-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.related-image {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-meta {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.project-category,
|
||||
.project-date {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.features {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
283
src/views/styles/ProjectsPage.css
Normal file
283
src/views/styles/ProjectsPage.css
Normal file
@@ -0,0 +1,283 @@
|
||||
/* ProjectsPage Styles */
|
||||
|
||||
/* Projects Page Styles */
|
||||
.projects-page {
|
||||
min-height: 100vh;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.projects-hero {
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
padding: var(--space-4xl) 0 var(--space-3xl);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.projects-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f3f4f6' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(var(--font-size-4xl), 4vw, var(--font-size-5xl));
|
||||
font-weight: var(--font-weight-extrabold);
|
||||
margin-bottom: var(--space-lg);
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-2xl);
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-xl);
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
/* Filters Section */
|
||||
.filters-section {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--space-xl) 0;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-lg);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: var(--space-md);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: var(--space-md) var(--space-md) var(--space-md) 48px;
|
||||
font-size: var(--font-size-base);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: var(--space-md);
|
||||
font-size: var(--font-size-base);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--border-radius-lg);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
|
||||
}
|
||||
|
||||
/* Projects Grid Section */
|
||||
.projects-grid-section {
|
||||
padding: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
.results-info {
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.results-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
|
||||
.project-card-item {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* No Results */
|
||||
.no-results {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-4xl) 0;
|
||||
}
|
||||
|
||||
.no-results-content {
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
color: var(--text-tertiary);
|
||||
margin: 0 auto var(--space-lg);
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.no-results-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-xl);
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
|
||||
.filters-section {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-subtitle {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
Reference in New Issue
Block a user