Skip to content

Commit 3773841

Browse files
hakancelikdevhakancelikdev
committed
Enhance screenshots section with improved design and content
✨ Improvements: - Enhanced section subtitle with better styling and decorative line - Added comprehensive descriptions for all 8 screenshot slides - Improved screenshot info cards with hover effects and better typography - Added feature highlights section with modern design - Enhanced responsive design for mobile devices - Updated translations for both Turkish and English - Added smooth animations and interactive elements 🎨 Design enhancements: - Better visual hierarchy with improved typography - Hover effects on screenshot info cards - Gradient accents and modern card designs - Responsive grid layout for feature highlights - Enhanced spacing and visual balance
1 parent 5191316 commit 3773841

File tree

4 files changed

+328
-47
lines changed

4 files changed

+328
-47
lines changed

‎docs/en.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@
137137
<a href="#vision">About</a>
138138
<a href="#download">Download</a>
139139
<a href="privacy-en.html">Privacy</a>
140+
<a href="terms-en.html">Terms of Use</a>
140141
</div>
141142
<div class="language-switcher">
142143
<button class="lang-btn" data-lang="tr">TR</button>
@@ -371,6 +372,33 @@ <h3>Dark Mode</h3>
371372
</button>
372373
</div>
373374
</div>
375+
376+
<!-- Feature Highlights -->
377+
<div class="feature-highlights">
378+
<div class="highlight-grid">
379+
<div class="highlight-item">
380+
<div class="highlight-icon">
381+
<i class="fas fa-mobile-alt"></i>
382+
</div>
383+
<h4>Modern Design</h4>
384+
<p>iOS 15+ compatible, clean and user-friendly interface</p>
385+
</div>
386+
<div class="highlight-item">
387+
<div class="highlight-icon">
388+
<i class="fas fa-sync-alt"></i>
389+
</div>
390+
<h4>Auto Update</h4>
391+
<p>Prayer times are automatically updated</p>
392+
</div>
393+
<div class="highlight-item">
394+
<div class="highlight-icon">
395+
<i class="fas fa-shield-alt"></i>
396+
</div>
397+
<h4>Secure & Private</h4>
398+
<p>Your personal data is safe, no ads</p>
399+
</div>
400+
</div>
401+
</div>
374402
</div>
375403
</section>
376404

‎docs/index.html‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,15 +128,18 @@
128128
<nav class="navbar">
129129
<div class="nav-container">
130130
<div class="nav-logo">
131-
<img src="assets/app-icon-32.png" alt="Vakit" class="nav-logo-icon">
132-
<span>Vakit</span>
131+
<a href="#" onclick="window.location.reload(); return false;" class="nav-logo-link">
132+
<img src="assets/app-icon-32.png" alt="Vakit" class="nav-logo-icon">
133+
<span>Vakit</span>
134+
</a>
133135
</div>
134136
<div class="nav-links">
135137
<a href="#features">Özellikler</a>
136138
<a href="#screenshots">Hızlı Göz Atma</a>
137139
<a href="#vision">Hakkımızda</a>
138140
<a href="#download">İndir</a>
139141
<a href="privacy.html">Gizlilik</a>
142+
<a href="terms.html">Kullanım Şartları</a>
140143
</div>
141144
<div class="language-switcher">
142145
<button class="lang-btn active" data-lang="tr">TR</button>
@@ -371,6 +374,33 @@ <h3>Karanlık Mod</h3>
371374
</button>
372375
</div>
373376
</div>
377+
378+
<!-- Feature Highlights -->
379+
<div class="feature-highlights">
380+
<div class="highlight-grid">
381+
<div class="highlight-item">
382+
<div class="highlight-icon">
383+
<i class="fas fa-mobile-alt"></i>
384+
</div>
385+
<h4>Modern Tasarım</h4>
386+
<p>iOS 15+ uyumlu, temiz ve kullanıcı dostu arayüz</p>
387+
</div>
388+
<div class="highlight-item">
389+
<div class="highlight-icon">
390+
<i class="fas fa-sync-alt"></i>
391+
</div>
392+
<h4>Otomatik Güncelleme</h4>
393+
<p>Namaz vakitleri otomatik olarak güncellenir</p>
394+
</div>
395+
<div class="highlight-item">
396+
<div class="highlight-icon">
397+
<i class="fas fa-shield-alt"></i>
398+
</div>
399+
<h4>Güvenli & Gizli</h4>
400+
<p>Kişisel verileriniz güvende, reklam yok</p>
401+
</div>
402+
</div>
403+
</div>
374404
</div>
375405
</section>
376406

‎docs/styles.css‎

Lines changed: 137 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,20 @@ body {
9696
object-fit: cover;
9797
}
9898

99+
.nav-logo-link {
100+
display: flex;
101+
align-items: center;
102+
gap: var(--spacing-xs);
103+
text-decoration: none;
104+
color: inherit;
105+
transition: opacity 0.2s ease;
106+
}
107+
108+
.nav-logo-link:hover {
109+
opacity: 0.8;
110+
cursor: pointer;
111+
}
112+
99113
.nav-links {
100114
display: flex;
101115
gap: var(--spacing-lg);
@@ -730,6 +744,15 @@ body {
730744
grid-template-columns: 1fr;
731745
}
732746

747+
.highlight-grid {
748+
grid-template-columns: 1fr;
749+
gap: 20px;
750+
}
751+
752+
.highlight-item {
753+
padding: 25px 15px;
754+
}
755+
733756
.vision-content {
734757
grid-template-columns: 1fr;
735758
}
@@ -859,12 +882,27 @@ html {
859882
/* Section Subtitle */
860883
.section-subtitle {
861884
text-align: center;
862-
font-size: 1.1rem;
885+
font-size: 1.2rem;
863886
color: var(--text-secondary);
864-
margin-bottom: 50px;
865-
max-width: 600px;
887+
margin-bottom: 60px;
888+
max-width: 700px;
866889
margin-left: auto;
867890
margin-right: auto;
891+
line-height: 1.7;
892+
font-weight: 400;
893+
position: relative;
894+
}
895+
896+
.section-subtitle::after {
897+
content: '';
898+
position: absolute;
899+
bottom: -20px;
900+
left: 50%;
901+
transform: translateX(-50%);
902+
width: 60px;
903+
height: 3px;
904+
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
905+
border-radius: 2px;
868906
}
869907

870908
/* Screenshot Carousel Styles */
@@ -898,19 +936,48 @@ html {
898936
margin: 0 auto 30px;
899937
}
900938

939+
.screenshot-info {
940+
text-align: center;
941+
padding: 30px 20px;
942+
background: var(--card-background);
943+
border-radius: var(--radius-lg);
944+
box-shadow: var(--shadow-md);
945+
margin-top: 20px;
946+
transition: all 0.3s ease;
947+
}
948+
949+
.screenshot-info:hover {
950+
transform: translateY(-5px);
951+
box-shadow: var(--shadow-lg);
952+
}
953+
901954
.screenshot-info h3 {
902-
font-size: 1.5rem;
955+
font-size: 1.6rem;
903956
font-weight: 600;
904957
color: var(--text-primary);
905958
margin-bottom: 15px;
959+
position: relative;
960+
}
961+
962+
.screenshot-info h3::after {
963+
content: '';
964+
position: absolute;
965+
bottom: -8px;
966+
left: 50%;
967+
transform: translateX(-50%);
968+
width: 40px;
969+
height: 2px;
970+
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
971+
border-radius: 1px;
906972
}
907973

908974
.screenshot-info p {
909-
font-size: 1rem;
975+
font-size: 1.1rem;
910976
color: var(--text-secondary);
911-
line-height: 1.6;
912-
max-width: 400px;
977+
line-height: 1.7;
978+
max-width: 450px;
913979
margin: 0 auto;
980+
font-weight: 400;
914981
}
915982

916983
/* Carousel Controls */
@@ -922,6 +989,69 @@ html {
922989
margin-top: 30px;
923990
}
924991

992+
/* Feature Highlights */
993+
.feature-highlights {
994+
margin-top: 60px;
995+
padding-top: 40px;
996+
border-top: 1px solid var(--border-color);
997+
}
998+
999+
.highlight-grid {
1000+
display: grid;
1001+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1002+
gap: 30px;
1003+
margin-top: 30px;
1004+
}
1005+
1006+
.highlight-item {
1007+
text-align: center;
1008+
padding: 30px 20px;
1009+
background: var(--card-background);
1010+
border-radius: var(--radius-lg);
1011+
box-shadow: var(--shadow-sm);
1012+
transition: all 0.3s ease;
1013+
border: 1px solid var(--border-color);
1014+
}
1015+
1016+
.highlight-item:hover {
1017+
transform: translateY(-8px);
1018+
box-shadow: var(--shadow-lg);
1019+
border-color: var(--primary-color);
1020+
}
1021+
1022+
.highlight-icon {
1023+
width: 60px;
1024+
height: 60px;
1025+
margin: 0 auto 20px;
1026+
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
1027+
border-radius: 50%;
1028+
display: flex;
1029+
align-items: center;
1030+
justify-content: center;
1031+
font-size: 1.5rem;
1032+
color: white;
1033+
transition: all 0.3s ease;
1034+
}
1035+
1036+
.highlight-item:hover .highlight-icon {
1037+
transform: scale(1.1);
1038+
box-shadow: 0 8px 25px rgba(64, 117, 121, 0.3);
1039+
}
1040+
1041+
.highlight-item h4 {
1042+
font-size: 1.3rem;
1043+
font-weight: 600;
1044+
color: var(--text-primary);
1045+
margin-bottom: 12px;
1046+
}
1047+
1048+
.highlight-item p {
1049+
font-size: 1rem;
1050+
color: var(--text-secondary);
1051+
line-height: 1.6;
1052+
margin: 0;
1053+
}
1054+
9251055
.carousel-btn {
9261056
background: var(--primary);
9271057
color: white;

0 commit comments

Comments
 (0)