Davron/ignum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

translation

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-01-27 20:44:21 +05:00
parent 21cb013cd8
commit ac7cd51600
24 changed files with 397 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/pages/home/banner.tsx
View File

@@ -1,6 +1,8 @@
import { useTranslations } from "next-intl";
import DotAnimatsiya from "../../dot/DotAnimatsiya";
export function Banner() {
const t = useTranslations();
return (
<section className="relative w-full lg:h-[86vh] h-screen min-h-150 overflow-hidden pt-20">
{/* Background Image */}
@@ -22,8 +24,8 @@ export function Banner() {
/>
{/* Content Container */}
<div className="relative z-20 h-full flex items-end lg:mt-0 md:mt-[15vh] sm:mt-[5vh] mt-0">
<div className="max-w-375 mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div className="relative z-20 h-full flex items-center lg:mt-0 md:mt-[20vh] sm:mt-[10vh] mt-0">
<div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
{/* Right side - Text Content */}
<div className="lg:hidden inline-block space-y-6 text-white">
@@ -31,7 +33,7 @@ export function Banner() {
<div className="flex items-center gap-2 w-fit">
<DotAnimatsiya />
<span className="text-sm font-semibold tracking-wide">
WELCOME TO FIREFORCE
{t("home.banner.title1")}
</span>
</div>
@@ -40,28 +42,27 @@ export function Banner() {
className="bg-linear-to-br from-white via-white to-black
text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
>
THE FIRE GUARDIAN
{t("home.banner.title2")}
</h1>
{/* Description */}
<p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
They are seen as a beacon of hope, a figure who brings calm
amidst chaos and light in the darkest of moments.
{t("home.banner.description")}
</p>
{/* CTA Button */}
<button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
GET STARTED
{t("home.banner.cta")}
</button>
</div>
{/* Left side - Firefighters Image */}
<div className="flex items-end justify-center">
<div className="flex items-end justify-center overflow-hidden ">
<img
src="/images/home/bannerHuman.png"
src="/images/img15.webp"
alt="Firefighters"
loading="lazy"
className="w-full max-lg:w-[80vw] h-auto object-cover drop-shadow-2xl"
className="w-150 h-100 max-[300px]:w-[80vw] object-cover object-right rounded-xl drop-shadow-2xl"
/>
</div>
@@ -71,24 +72,23 @@ export function Banner() {
<div className="flex items-center gap-2 w-fit">
<DotAnimatsiya />
<span className="text-sm font-semibold tracking-wide">
WELCOME TO FIREFORCE
{t("home.banner.title1")}
</span>
</div>
{/* Main Heading */}
<h1 className="gradient-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
THE FIRE GUARDIAN
{t("home.banner.title2")}
</h1>
{/* Description */}
<p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
They are seen as a beacon of hope, a figure who brings calm
amidst chaos and light in the darkest of moments.
{t("home.banner.description")}
</p>
{/* CTA Button */}
<button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
GET STARTED
{t("home.banner.cta")}
</button>
</div>
</div>