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
@@ -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