Skip to content

Commit e80402e

Browse files
TalhaAksoyTalhaAksoy
committed
badge fix
1 parent b688344 commit e80402e

1 file changed

Lines changed: 41 additions & 27 deletions

File tree

‎components/Hero.tsx‎

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import React, { useState } from 'react';
2-
import { motion, useScroll, useTransform, AnimatePresence } from 'framer-motion';
3-
import { ArrowRight, Download, Zap, CircleCheck } from 'lucide-react';
4-
import { InteractivePhone } from './InteractivePhone';
5-
import { useLanguage } from '../LanguageContext';
6-
import ConfigData from '@/config';
1+
import React, { useState } from "react";
2+
import {
3+
motion,
4+
useScroll,
5+
useTransform,
6+
AnimatePresence,
7+
} from "framer-motion";
8+
import { ArrowRight, Download, Zap, CircleCheck } from "lucide-react";
9+
import { InteractivePhone } from "./InteractivePhone";
10+
import { useLanguage } from "../LanguageContext";
11+
import ConfigData from "@/config";
712

813
const Hero: React.FC = () => {
914
const { t } = useLanguage();
@@ -14,7 +19,6 @@ const Hero: React.FC = () => {
1419
return (
1520
<section className="relative pt-32 pb-20 lg:pt-40 lg:pb-32 overflow-hidden lg:overflow-visible">
1621
<div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
17-
1822
{/* Text Content */}
1923
<motion.div
2024
initial={{ opacity: 0, x: -50 }}
@@ -29,30 +33,33 @@ const Hero: React.FC = () => {
2933
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-100 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 text-sm font-semibold mb-8 border border-slate-200 dark:border-slate-700 backdrop-blur-sm"
3034
>
3135
<Zap size={16} className="text-blue-500" />
32-
<span>{t('hero_badge')}</span>
36+
<span>{t("hero_badge")}</span>
3337
</motion.div>
3438

3539
<h1 className="text-5xl lg:text-7xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1] mb-6">
36-
{t('hero_title_1')} <br />
40+
{t("hero_title_1")} <br />
3741
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 animate-gradient-x">
38-
{t('hero_title_2')}
42+
{t("hero_title_2")}
3943
</span>
4044
</h1>
4145

4246
<p className="text-lg lg:text-xl text-slate-600 dark:text-slate-300 mb-8 max-w-lg leading-relaxed">
43-
{t('hero_desc')}
47+
{t("hero_desc")}
4448
</p>
4549

4650
<div className="flex flex-col sm:flex-row gap-4 mb-12 relative z-50">
4751
<div className="relative">
4852
<motion.button
49-
whileHover={{ scale: 1.05, boxShadow: "0 20px 25px -5px rgba(37, 99, 235, 0.4)" }}
53+
whileHover={{
54+
scale: 1.05,
55+
boxShadow: "0 20px 25px -5px rgba(37, 99, 235, 0.4)",
56+
}}
5057
whileTap={{ scale: 0.95 }}
5158
onClick={() => setIsDownloadOpen(!isDownloadOpen)}
5259
className="flex items-center justify-center gap-2 px-8 py-4 bg-blue-600 text-white rounded-full font-bold shadow-lg shadow-blue-600/30 hover:bg-blue-700 transition-all w-full sm:w-auto"
5360
>
5461
<Download size={20} />
55-
{t('hero_btn_download')}
62+
{t("hero_btn_download")}
5663
</motion.button>
5764

5865
<AnimatePresence>
@@ -65,25 +72,28 @@ const Hero: React.FC = () => {
6572
transition={{ duration: 0.2 }}
6673
className="absolute top-full left-0 right-0 mt-3 p-2 bg-white dark:bg-slate-800 rounded-2xl shadow-xl border border-slate-100 dark:border-slate-700 overflow-hidden flex flex-col gap-1 min-w-[200px]"
6774
>
68-
6975
<a
7076
href={ConfigData.fdroid_url}
7177
target="_blank"
7278
rel="noopener noreferrer"
7379
className="flex items-center gap-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
7480
>
75-
<img src="/get-it-on-fdroid.png"
76-
alt="Get it on F-Droid" />
81+
<img
82+
src="/get-it-on-fdroid.png"
83+
alt="Get it on F-Droid"
84+
/>
7785
</a>
7886

7987
<a
8088
href={ConfigData.playstore_url}
8189
target="_blank"
8290
rel="noopener noreferrer"
83-
className="flex items-center gap-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group p-3"
91+
className="flex items-center gap-3 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors group"
8492
>
85-
<img src="/get-it-on-google-play.png"
86-
alt="Get it on Google Play" />
93+
<img
94+
src="/get-it-on-google-play.png"
95+
alt="Get it on Google Play"
96+
/>
8797
</a>
8898
</motion.div>
8999
)}
@@ -96,27 +106,27 @@ const Hero: React.FC = () => {
96106
href="#showcase"
97107
className="flex items-center justify-center gap-2 px-8 py-4 bg-white dark:bg-slate-800 text-slate-900 dark:text-white border border-slate-200 dark:border-slate-700 rounded-full font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-all"
98108
>
99-
{t('hero_btn_features')}
109+
{t("hero_btn_features")}
100110
<ArrowRight size={20} />
101111
</motion.a>
102112
</div>
103113

104114
<div className="grid grid-cols-2 gap-4 text-sm text-slate-500 dark:text-slate-400">
105115
<div className="flex items-center gap-2">
106116
<CircleCheck size={16} className="text-green-500" />
107-
<span>{t('hero_usp_offline')}</span>
117+
<span>{t("hero_usp_offline")}</span>
108118
</div>
109119
<div className="flex items-center gap-2">
110120
<CircleCheck size={16} className="text-green-500" />
111-
<span>{t('hero_usp_privacy')}</span>
121+
<span>{t("hero_usp_privacy")}</span>
112122
</div>
113123
<div className="flex items-center gap-2">
114124
<CircleCheck size={16} className="text-green-500" />
115-
<span>{t('hero_usp_no_account')}</span>
125+
<span>{t("hero_usp_no_account")}</span>
116126
</div>
117127
<div className="flex items-center gap-2">
118128
<CircleCheck size={16} className="text-green-500" />
119-
<span>{t('hero_usp_dark_mode')}</span>
129+
<span>{t("hero_usp_dark_mode")}</span>
120130
</div>
121131
</div>
122132
</motion.div>
@@ -152,8 +162,12 @@ const Hero: React.FC = () => {
152162
<CircleCheck size={20} />
153163
</div>
154164
<div>
155-
<div className="text-xs font-bold text-slate-500 uppercase">{t('phone_status')}</div>
156-
<div className="font-bold text-slate-800 dark:text-white">{t('phone_status_val')}</div>
165+
<div className="text-xs font-bold text-slate-500 uppercase">
166+
{t("phone_status")}
167+
</div>
168+
<div className="font-bold text-slate-800 dark:text-white">
169+
{t("phone_status_val")}
170+
</div>
157171
</div>
158172
</div>
159173
</motion.div>
@@ -163,4 +177,4 @@ const Hero: React.FC = () => {
163177
);
164178
};
165179

166-
export default Hero;
180+
export default Hero;

0 commit comments

Comments
 (0)