| | | 1 | | @page "/about" |
| | | 2 | | @using System |
| | | 3 | | |
| | | 4 | | <div class="about-page"> |
| | | 5 | | <div class="about-header"> |
| | 22 | 6 | | <h1>@Constants.PageTitles.AboutPageTitle</h1> |
| | 22 | 7 | | <p class="subtitle">@Constants.AboutPageContent.Subtitle</p> |
| | | 8 | | </div> |
| | | 9 | | |
| | | 10 | | <div class="about-content"> |
| | | 11 | | <!-- What is it Section --> |
| | | 12 | | <section class="info-section"> |
| | 22 | 13 | | <h2>@Constants.AboutPageContent.WhatIsSectionTitle</h2> |
| | | 14 | | <p> |
| | 22 | 15 | | @string.Format(Constants.AboutPageContent.WhatIsParagraph, Constants.TimerDisplay.DefaultPomodoroMinutes |
| | | 16 | | </p> |
| | | 17 | | </section> |
| | | 18 | | |
| | | 19 | | <!-- How it works Section --> |
| | | 20 | | <section class="info-section"> |
| | 22 | 21 | | <h2>@Constants.AboutPageContent.HowItWorksSectionTitle</h2> |
| | | 22 | | <div class="steps-container"> |
| | | 23 | | <div class="step-card"> |
| | | 24 | | <div class="step-number">1</div> |
| | | 25 | | <div class="step-content"> |
| | 22 | 26 | | <h3>@Constants.AboutPageContent.Step1Title</h3> |
| | 22 | 27 | | <p>@Constants.AboutPageContent.Step1Description</p> |
| | | 28 | | </div> |
| | | 29 | | </div> |
| | | 30 | | <div class="step-card"> |
| | | 31 | | <div class="step-number">2</div> |
| | | 32 | | <div class="step-content"> |
| | 22 | 33 | | <h3>@Constants.AboutPageContent.Step2Title</h3> |
| | 22 | 34 | | <p>@string.Format(Constants.AboutPageContent.Step2Description, Constants.TimerDisplay.DefaultPom |
| | | 35 | | </div> |
| | | 36 | | </div> |
| | | 37 | | <div class="step-card"> |
| | | 38 | | <div class="step-number">3</div> |
| | | 39 | | <div class="step-content"> |
| | 22 | 40 | | <h3>@Constants.AboutPageContent.Step3Title</h3> |
| | 22 | 41 | | <p>@Constants.AboutPageContent.Step3Description</p> |
| | | 42 | | </div> |
| | | 43 | | </div> |
| | | 44 | | <div class="step-card"> |
| | | 45 | | <div class="step-number">4</div> |
| | | 46 | | <div class="step-content"> |
| | 22 | 47 | | <h3>@Constants.AboutPageContent.Step4Title</h3> |
| | 22 | 48 | | <p>@string.Format(Constants.AboutPageContent.Step4Description, Constants.TimerDisplay.DefaultSho |
| | | 49 | | </div> |
| | | 50 | | </div> |
| | | 51 | | <div class="step-card highlight"> |
| | | 52 | | <div class="step-number">5</div> |
| | | 53 | | <div class="step-content"> |
| | 22 | 54 | | <h3>@Constants.AboutPageContent.Step5Title</h3> |
| | 22 | 55 | | <p>@string.Format(Constants.AboutPageContent.Step5Description, Constants.TimerDisplay.PomodorosB |
| | | 56 | | </div> |
| | | 57 | | </div> |
| | | 58 | | </div> |
| | | 59 | | </section> |
| | | 60 | | |
| | | 61 | | <!-- Benefits Section --> |
| | | 62 | | <section class="info-section"> |
| | 22 | 63 | | <h2>@Constants.AboutPageContent.BenefitsSectionTitle</h2> |
| | | 64 | | <div class="benefits-grid"> |
| | | 65 | | <div class="benefit-card"> |
| | | 66 | | <span class="benefit-icon">🎯</span> |
| | 22 | 67 | | <h3>@Constants.AboutPageContent.Benefit1Title</h3> |
| | 22 | 68 | | <p>@Constants.AboutPageContent.Benefit1Description</p> |
| | | 69 | | </div> |
| | | 70 | | <div class="benefit-card"> |
| | | 71 | | <span class="benefit-icon">⚡</span> |
| | 22 | 72 | | <h3>@Constants.AboutPageContent.Benefit2Title</h3> |
| | 22 | 73 | | <p>@Constants.AboutPageContent.Benefit2Description</p> |
| | | 74 | | </div> |
| | | 75 | | <div class="benefit-card"> |
| | | 76 | | <span class="benefit-icon">🧠</span> |
| | 22 | 77 | | <h3>@Constants.AboutPageContent.Benefit3Title</h3> |
| | 22 | 78 | | <p>@Constants.AboutPageContent.Benefit3Description</p> |
| | | 79 | | </div> |
| | | 80 | | <div class="benefit-card"> |
| | | 81 | | <span class="benefit-icon">📊</span> |
| | 22 | 82 | | <h3>@Constants.AboutPageContent.Benefit4Title</h3> |
| | 22 | 83 | | <p>@Constants.AboutPageContent.Benefit4Description</p> |
| | | 84 | | </div> |
| | | 85 | | <div class="benefit-card"> |
| | | 86 | | <span class="benefit-icon">⏰</span> |
| | 22 | 87 | | <h3>@Constants.AboutPageContent.Benefit5Title</h3> |
| | 22 | 88 | | <p>@Constants.AboutPageContent.Benefit5Description</p> |
| | | 89 | | </div> |
| | | 90 | | <div class="benefit-card"> |
| | | 91 | | <span class="benefit-icon">🛡️</span> |
| | 22 | 92 | | <h3>@Constants.AboutPageContent.Benefit6Title</h3> |
| | 22 | 93 | | <p>@Constants.AboutPageContent.Benefit6Description</p> |
| | | 94 | | </div> |
| | | 95 | | </div> |
| | | 96 | | </section> |
| | | 97 | | |
| | | 98 | | <!-- Tips Section --> |
| | | 99 | | <section class="info-section"> |
| | 22 | 100 | | <h2>@Constants.AboutPageContent.TipsSectionTitle</h2> |
| | | 101 | | <ul class="tips-list"> |
| | | 102 | | <li> |
| | 44 | 103 | | <strong>@Constants.AboutPageContent.Tip1Title:</strong> @string.Format(Constants.AboutPageContent.Ti |
| | | 104 | | </li> |
| | | 105 | | <li> |
| | 44 | 106 | | <strong>@Constants.AboutPageContent.Tip2Title:</strong> @Constants.AboutPageContent.Tip2Description |
| | | 107 | | </li> |
| | | 108 | | <li> |
| | 44 | 109 | | <strong>@Constants.AboutPageContent.Tip3Title:</strong> @Constants.AboutPageContent.Tip3Description |
| | | 110 | | </li> |
| | | 111 | | <li> |
| | 44 | 112 | | <strong>@Constants.AboutPageContent.Tip4Title:</strong> @Constants.AboutPageContent.Tip4Description |
| | | 113 | | </li> |
| | | 114 | | <li> |
| | 44 | 115 | | <strong>@Constants.AboutPageContent.Tip5Title:</strong> @Constants.AboutPageContent.Tip5Description |
| | | 116 | | </li> |
| | | 117 | | <li> |
| | 44 | 118 | | <strong>@Constants.AboutPageContent.Tip6Title:</strong> @Constants.AboutPageContent.Tip6Description |
| | | 119 | | </li> |
| | | 120 | | </ul> |
| | | 121 | | </section> |
| | | 122 | | |
| | | 123 | | <!-- Default Times Section --> |
| | | 124 | | <section class="info-section default-times"> |
| | 22 | 125 | | <h2>@Constants.AboutPageContent.DefaultTimesSectionTitle</h2> |
| | | 126 | | <div class="times-grid"> |
| | | 127 | | <div class="time-card pomodoro"> |
| | 22 | 128 | | <div class="time-value">@Constants.Timer.DefaultPomodoroMinutes</div> |
| | 22 | 129 | | <div class="time-label">@(new MarkupString(Constants.AboutPageContent.MinutesPomodoroLabel))</div> |
| | | 130 | | </div> |
| | | 131 | | <div class="time-card short-break"> |
| | 22 | 132 | | <div class="time-value">@Constants.Timer.DefaultShortBreakMinutes</div> |
| | 22 | 133 | | <div class="time-label">@(new MarkupString(Constants.AboutPageContent.MinutesShortBreakLabel))</div> |
| | | 134 | | </div> |
| | | 135 | | <div class="time-card long-break"> |
| | 22 | 136 | | <div class="time-value">@Constants.Timer.DefaultLongBreakMinutes</div> |
| | 22 | 137 | | <div class="time-label">@(new MarkupString(Constants.AboutPageContent.MinutesLongBreakLabel))</div> |
| | | 138 | | </div> |
| | | 139 | | </div> |
| | 22 | 140 | | <p class="times-note">@Constants.AboutPageContent.TimesNote</p> |
| | | 141 | | </section> |
| | | 142 | | |
| | | 143 | | <!-- Call to Action --> |
| | | 144 | | <section class="cta-section"> |
| | 22 | 145 | | <h2>@Constants.AboutPageContent.CtaSectionTitle</h2> |
| | 22 | 146 | | <p>@Constants.AboutPageContent.CtaDescription</p> |
| | 22 | 147 | | <a href="@Constants.Routing.HomeRoute" class="cta-button">@Constants.AboutPageContent.CtaButtonText</a> |
| | | 148 | | </section> |
| | | 149 | | </div> |
| | | 150 | | </div> |
| | | 151 | | |
| | | 152 | | <link rel="stylesheet" href="@Constants.CssPaths.AboutCss" /> |