باز طراحی صفحه مشارکت

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": true
+}

src/components/ui/ContributionGuideCard.astro

@@ -0,0 +1,33 @@
+---
+const { title, description, img ,link } = Astro.props;
+
+---
+
+<div class="card card-large contribution-guide" style="text-align: center; padding: var(--spacing-lg);">
+  <section class="flex flex-col flex-col-start">
+    <h2>{title}</h2>
+    <p class="text-right" style="">{description}</p>
+    <!-- <ul class="flex flex-col flex-col-start">
+        <li>رفع باگ‌ها</li>
+        <li>افزودن ویژگی‌های جدید</li>
+        <li>بهبود عملکرد</li>
+        <li>نوشتن تست</li>
+    </ul> -->
+    {link && (
+      <a href={link} class="btn btn-primary" style="align-self:flex-end;">
+        شروع
+      </a>
+    )}
+  </section>
+  <img
+    src={img || 'assets/img/contribute.jpg'}
+    alt={title}
+    style={{
+      width: '400px',
+      height: '250px',
+      objectFit: 'cover',
+      borderRadius: 'var(--radius-sm)',
+      marginBottom: 'var(--spacing-md)'
+    }}
+  />
+</div>

src/pages/contribute.astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from "@layouts/BaseLayout.astro";
+import ContributionGuideCard from "@components/ui/ContributionGuideCard.astro";
 ---
 
 <BaseLayout>
@@ -14,7 +15,12 @@ import BaseLayout from "@layouts/BaseLayout.astro";
 
         <section class="section">
             <div class="container">
-                <div class="grid grid-2">
+                <div class="flex flex-col gap-lg">
+                    <ContributionGuideCard 
+                        title="توسعه و کدنویسی" 
+                        description="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد،د." 
+                        img="/assets/img/talks-thlug-revisto.png"
+                        link="/login" />
                     <div class="card card-large">
                         <div class="mb-lg text-center">
                             <svg width="64" height="64" fill="var(--brand-primary)" style="margin: 0 auto;">

src/styles/layout.css

@@ -30,11 +30,33 @@
     flex-direction: column;
 }
 
+.flex-col-start {
+    align-items: start;
+    justify-content: center;
+}
+
+.flex-col-reverse {
+    flex-direction: column-reverse;
+}
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-row-reverse {
+    flex-direction: row-reverse;
+}
+
 .flex-center {
     align-items: center;
     justify-content: center;
 }
 
+.flex-start {
+    align-items: start;
+    justify-content: space-between;
+}
+
 .flex-between {
     align-items: center;
     justify-content: space-between;
@@ -44,9 +66,15 @@
     flex-wrap: wrap;
 }
 
-.gap-sm { gap: var(--spacing-sm); }
-.gap-md { gap: var(--spacing-md); }
-.gap-lg { gap: var(--spacing-lg); }
+.gap-sm {
+    gap: var(--spacing-sm);
+}
+.gap-md {
+    gap: var(--spacing-md);
+}
+.gap-lg {
+    gap: var(--spacing-lg);
+}
 
 /* Header */
 .header {
@@ -68,7 +96,12 @@
     left: 0;
     right: 0;
     height: 1px;
-    background: linear-gradient(90deg, transparent, var(--brand-primary), transparent);
+    background: linear-gradient(
+        90deg,
+        transparent,
+        var(--brand-primary),
+        transparent
+    );
     opacity: 0;
     transition: opacity 0.3s ease;
 }
@@ -147,16 +180,30 @@
 }
 
 .logo:hover {
-    background: color-mix(in srgb, var(--gnome-palette-purple-3) 12%, var(--bg-head));
+    background: color-mix(
+        in srgb,
+        var(--gnome-palette-purple-3) 12%,
+        var(--bg-head)
+    );
     color: var(--gnome-palette-purple-3);
     transform: translateY(-1px);
-    box-shadow: 0 2px 8px color-mix(in srgb, var(--gnome-palette-purple-3) 20%, transparent);
+    box-shadow: 0 2px 8px
+        color-mix(in srgb, var(--gnome-palette-purple-3) 20%, transparent);
 }
 
 .theme-dark .logo:hover {
-    background: color-mix(in srgb, var(--gnome-palette-purple-3) 15%, var(--bg-head));
-    color: color-mix(in srgb, var(--gnome-palette-purple-3) 85%, var(--text-primary));
-    box-shadow: 0 2px 8px color-mix(in srgb, var(--gnome-palette-purple-3) 25%, transparent);
+    background: color-mix(
+        in srgb,
+        var(--gnome-palette-purple-3) 15%,
+        var(--bg-head)
+    );
+    color: color-mix(
+        in srgb,
+        var(--gnome-palette-purple-3) 85%,
+        var(--text-primary)
+    );
+    box-shadow: 0 2px 8px
+        color-mix(in srgb, var(--gnome-palette-purple-3) 25%, transparent);
 }
 
 .logo:focus {
@@ -200,11 +247,11 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-[id="mobile-menu-svg"]{
+[id='mobile-menu-svg'] {
     transition: transform 0.6s ease;
 }
 
-[id="mobile-menu-svg"].rotate{
+[id='mobile-menu-svg'].rotate {
     transform: rotate(360deg);
 }
 
@@ -224,9 +271,15 @@
     z-index: 50;
     display: none;
 }
-.mobile-menu.translate-x-full { transform: translateX(-100%); }
-.mobile-menu.translate-x-0 { transform: translateX(0); }
-.mobile-menu.transition { transition: transform 0.5s ease; }
+.mobile-menu.translate-x-full {
+    transform: translateX(-100%);
+}
+.mobile-menu.translate-x-0 {
+    transform: translateX(0);
+}
+.mobile-menu.transition {
+    transition: transform 0.5s ease;
+}
 
 .mobile-nav-links {
     display: flex;
@@ -283,13 +336,21 @@
 .hero {
     padding: var(--spacing-2xl) 0;
     text-align: center;
-    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    background: linear-gradient(
+        135deg,
+        var(--bg-primary) 0%,
+        var(--bg-secondary) 100%
+    );
 }
 
 .hero-title {
     font-size: var(--font-size-4xl);
     margin-bottom: var(--spacing-md);
-    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
+    background: linear-gradient(
+        135deg,
+        var(--brand-primary),
+        var(--brand-secondary)
+    );
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;

src/styles/responsive.css

@@ -26,6 +26,13 @@
     .nav-link {
         padding: 6px 12px;
     }
+
+    .contribution-guide {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 @media (max-width: 768px) {
@@ -100,6 +107,13 @@
         padding: var(--spacing-sm);
         gap: 16px;
     }
+
+    .contribution-guide {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 @media (max-width: 480px) {

src/styles/specific-components.css

@@ -20,7 +20,7 @@
     min-width: 80px;
     max-width: 120px;
 }
-.contributor-card.fade-in{
+.contributor-card.fade-in {
     animation: none;
 }
 
@@ -122,3 +122,11 @@
     margin-top: var(--spacing-xs);
     font-style: italic;
 }
+
+.contribution-guide {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-lg);
+}