-
+
-
{{ service.icon }}
-
{{ service.title }}
-
{{ service.description }}
+
+
+
+
{{ service.title }}
+
{{ service.description }}
+
+
@@ -165,98 +170,5 @@ const services = computed(() => [
diff --git a/src/views/ProjectDetailPage.vue b/src/views/ProjectDetailPage.vue
index 2ff9657..493a8df 100644
--- a/src/views/ProjectDetailPage.vue
+++ b/src/views/ProjectDetailPage.vue
@@ -241,524 +241,5 @@ onMounted(() => {
diff --git a/src/views/ProjectsPage.vue b/src/views/ProjectsPage.vue
index 4d3f3be..770406a 100644
--- a/src/views/ProjectsPage.vue
+++ b/src/views/ProjectsPage.vue
@@ -170,285 +170,5 @@ const featuredProjects = computed(() => projects.filter(p => p.featured).length)
diff --git a/src/views/styles/AboutPage.css b/src/views/styles/AboutPage.css
new file mode 100644
index 0000000..1d62e46
--- /dev/null
+++ b/src/views/styles/AboutPage.css
@@ -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;
+}
diff --git a/src/views/styles/ContactPage.css b/src/views/styles/ContactPage.css
new file mode 100644
index 0000000..2dc0071
--- /dev/null
+++ b/src/views/styles/ContactPage.css
@@ -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);
+}
diff --git a/src/views/styles/FiverrPage.css b/src/views/styles/FiverrPage.css
new file mode 100644
index 0000000..6d38872
--- /dev/null
+++ b/src/views/styles/FiverrPage.css
@@ -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);
+ }
+}
diff --git a/src/views/styles/HomePage.css b/src/views/styles/HomePage.css
new file mode 100644
index 0000000..7e18855
--- /dev/null
+++ b/src/views/styles/HomePage.css
@@ -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);
+}
diff --git a/src/views/styles/ProjectDetailPage.css b/src/views/styles/ProjectDetailPage.css
new file mode 100644
index 0000000..07137ed
--- /dev/null
+++ b/src/views/styles/ProjectDetailPage.css
@@ -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);
+ }
+}
diff --git a/src/views/styles/ProjectsPage.css b/src/views/styles/ProjectsPage.css
new file mode 100644
index 0000000..085cbc6
--- /dev/null
+++ b/src/views/styles/ProjectsPage.css
@@ -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;
+}