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

about page done

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-01-26 15:45:53 +05:00
parent 5777437af8
commit d3aa467055
8 changed files with 306 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/pages/about/aboutBanner.tsx Normal file
View File

@@ -0,0 +1,43 @@
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
export function AboutBanner() {
return (
<section className="relative w-full lg:h-[60vh] h-screen min-h-100 overflow-hidden pt-10">
{/* Background Image */}
<div
className="absolute inset-0 z-0"
style={{
backgroundImage: "url(/images/about/aboutBanner.jpg)",
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
{/* Gradient Overlay - Bottom-left to top-right */}
<div
className="absolute inset-0 z-10"
style={{
background: `linear-gradient(to top right, #d2610a 0%, #1e1d1ce3 30%, #1e1d1ce3 100%)`,
}}
/>
<div className="max-w-250 w-full mx-auto px-4">
<div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
<div className="spacw-y-4 ">
<DotAnimatsiya />
<p
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"
>
Fire Fighter <br /> At The Ready
</p>
</div>
<div className="lg:w-[40%] text-gray-300 mt-20">
It emphasizes that these firefighters are there not just as public
servants but as a vital part of the community.
</div>
</div>
</div>
</section>
);
}

33
components/pages/about/aboutLine.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Phone } from "lucide-react";
import Image from "next/image";
export function AboutLine() {
return (
<div className="bg-black py-10 px-4">
<div className="max-w-280 w-full mx-auto relative py-10 flex items-center justify-between ">
<div className="text-white flex flex-col items-start justify-start gap-5 ">
<h2 className="lg:text-5xl sm:text-3xl text-2xl max-w-[80%] w-full font-semibold">
Ready for Action 24/7: Contact Us at
</h2>
<p className="flex items-center justify-center gap-4 font-semibold sm:text-xl text-lg">
<span
className="shrink-0 w-10 h-10 bg-red-600 rounded-full flex items-center justify-center
shadow-[0_0_0px_4px_rgba(239,68,68,0.1)]"
>
<Phone className="text-white w-5 h-5" />
</span>
+123-456-7890
</p>
</div>
<Image
src="/images/about/fire-box.png"
alt="image"
width={60}
height={60}
priority
className=" sm:flex hidden object-contain w-80 h-80 absolute -bottom-25 right-0"
/>
</div>
</div>
);
}

4
components/pages/about/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { AboutBanner } from "./aboutBanner";
export { Story } from "./story";
export { AboutLine } from "./aboutLine";
export { WhyChooseUs } from "./whyChooseUs";

107
components/pages/about/story.tsx Normal file
View File

@@ -0,0 +1,107 @@
import Image from "next/image";
export function Story() {
return (
<div className="bg-[#1e1d1c] pb-0 relative z-10 max-[350px]:pb-30 ">
<div className="max-w-260 mx-auto px-4">
<section className="relative -top-30 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
{/* Background Image */}
<div
className="absolute inset-0 z-0 rounded-xl"
style={{
backgroundImage: "url(/images/about/mainImage.jpg)",
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
{/* Gradient Overlay */}
<div
className="absolute inset-0 z-10 rounded-xl"
style={{
background: `linear-gradient(to bottom right, black 5%, transparent 70%, transparent 90%)`,
}}
/>
{/* Content */}
<div className="relative z-20 p-8 lg:p-12 max-w-130">
<h2 className="text-white text-4xl lg:text-5xl font-bold mb-6">
OUR STORY
</h2>
<p className="text-gray-300 mb-4">
Our story is one of unwavering dedication, selflessness, and a{" "}
<span className="text-white font-semibold">
deep commitment to the safety
</span>
and well-being of our communities.
</p>
<p className="text-gray-400 mb-6">
Aliquam lorem ante dapibus in viverra quis a tellus phasellus
viverra nulla ut metus varius laoreet quisque rutrum.
</p>
<button className="text-white flex items-center gap-2 hover:text-red-500 transition">
READ MORE
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</svg>
</button>
</div>
{/* bottom cards */}
<div className="flex max-md:flex-col items-end justify-center md:gap-10 gap-5 z-20 relative bottom-0 mx-auto max-md:pb-5 max-sm:px-2">
<div
className="flex sm:flex-row flex-col sm:items-center items-start
md:rounded-t-xl rounded-xl max-w-md w-full sm:p-7 p-2 bg-linear-to-br
from-[#f21b1b] to-[#830909] sm:gap-5 gap-2"
>
<span className="sm:rounded-xl rounded-lg bg-black sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
<Image
src="/images/about/fireforce-vision.png"
alt="image icon"
width={100}
height={100}
className="object-cover"
/>
</span>
<div className="space-y-1 text-white">
<h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
<p>
Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
Quisque rutrum aenean augue vulputate eleifend.
</p>
</div>
</div>
<div className="flex sm:flex-row flex-col sm:items-center items-start md:rounded-t-xl rounded-xl max-w-md w-full sm:p-7 p-2 bg-black sm:gap-5 gap-2">
<span className="sm:rounded-xl rounded-lg bg-[#1e1d1c] sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
<Image
src="/images/about/fireforce-mission.png"
alt="image icon"
width={100}
height={100}
className=""
/>
</span>
<div className="space-y-1 text-white">
<h2 className="text-xl font-semibold">FIREFORCE VISION</h2>
<p>
Phasellus viverra nulla ut metus varius leo imperdiet laoreet.
Quisque rutrum aenean augue vulputate eleifend.
</p>
</div>
</div>
</div>
</section>
</div>
</div>
);
}

103
components/pages/about/whyChooseUs.tsx Normal file
View File

@@ -0,0 +1,103 @@
"use client";
import Image from "next/image";
import { Check } from "lucide-react";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
export function WhyChooseUs() {
const features = [
{ title: "Fast Response Team" },
{ title: "Experienced Firefighter" },
{ title: "Ready 24 Hours" },
{ title: "Fast Response Team" },
];
return (
<section className=" bg-[#1e1d1c] px-4 py-30 pb-40 md:px-8 lg:px-12">
<div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-2 lg:gap-16">
{/* Left Content */}
<div className="flex flex-col justify-center space-y-8">
{/* Header */}
<div>
<div className="mb-4 flex items-center gap-2">
<DotAnimatsiya />
<span className="text-sm font-semibold tracking-wider text-white">
WHY CHOOSE US
</span>
</div>
<h2
className="bg-linear-to-br from-white via-white to-black
text-transparent bg-clip-text text-4xl font-bold sm:text-5xl lg:text-6xl"
>
WE ARE BEST
<br />
FIREFIGHTER
</h2>
</div>
{/* Description */}
<p className="text-base leading-relaxed text-gray-400 sm:text-lg">
Aliquam lorem ante dapibus in viverra quis a tellus phasellus
viverra nulla ut metus varius laoreet quisque rutrum.
</p>
{/* Features Grid */}
<div className="grid grid-cols-2 gap-4 sm:gap-6">
{features.map((feature, index) => (
<div key={index} className="flex items-center gap-3">
<div className="shrink-0">
<Check className="h-5 w-5 text-red-600 sm:h-6 sm:w-6" />
</div>
<span className="text-sm font-medium text-white sm:text-base">
{feature.title}
</span>
</div>
))}
</div>
{/* CTA Button */}
<div>
<button className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4">
CONTACT US
</button>
</div>
</div>
{/* Right Image Section */}
<div className="relative flex items-center justify-center">
<div className="relative h-96 md:w-[80%] w-full sm:h-125 lg:h-150">
{/* Main Image */}
<Image
src="/images/about/fighter.jpg"
alt="Best Award Firefighter"
fill
className="rounded-3xl object-cover object-right"
/>
{/* Overlay Gradient */}
<div className="absolute inset-0 rounded-3xl bg-linear-to-t from-black via-transparent to-black/0" />
{/* Award Badge */}
<div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-3 ">
<Image
src="/images/home/emblem.png"
alt="Award"
width={70}
height={70}
className="h-24 w-24 sm:h-20 sm:w-20"
/>
<div>
<p className="text-sm font-bold text-white sm:text-base">
BEST AWARD
</p>
<p className="text-xs text-gray-400 sm:text-sm">
FIREFIGHTER 2025
</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

4
components/pages/contact/form.tsx
View File

@@ -209,7 +209,7 @@ export default function Form() {
<button
type="button"
onClick={handleCheckboxChange}
className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
className={` flex h-5 w-5 items-center justify-center rounded border-2 transition ${
formData.agreeToPolicy
? "border-red-600 bg-red-600"
: "border-gray-400 bg-transparent"
@@ -227,7 +227,7 @@ export default function Form() {
<button
type="submit"
disabled={isSubmitting}
className="rounded-full bg-red-600 px-8 py-3 text-sm font-semibold uppercase tracking-wider text-white transition hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
className="shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-8 py-3 text-sm font-semibold uppercase tracking-wider text-white transition hover:cursor-pointer hover:scale-90 disabled:cursor-not-allowed disabled:opacity-50"
>
{isSubmitting ? "Sending..." : "Send Message"}
</button>