diff --git a/app/globals.css b/app/globals.css index 6c0545e..533564c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -125,5 +125,25 @@ } .loi{ - color:#d2610ab0; -} \ No newline at end of file + color:#a60404ad; +} + +.gradient-text { + background: linear-gradient( + to bottom right, + #ffffff 0%, + #ffffff 50%, + rgba(255, 255, 255, 0.5) 100% + ); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + + +/* + text gradient tailwindd classlari + + bg-linear-to-br from-white via-white to-white/50 + text-transparent bg-clip-text + */ \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 880015b..b5fc280 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,10 +1,23 @@ -import { Banner, Statistics } from "@/components/pages/home"; +import { + AboutUs, + Banner, + Line, + OurService, + Statistics, + Testimonial, + Video, +} from "@/components/pages/home"; export default function Home() { return ( -
+
+ +
); } diff --git a/components/HomeMarquee.tsx b/components/HomeMarquee.tsx new file mode 100644 index 0000000..8555f97 --- /dev/null +++ b/components/HomeMarquee.tsx @@ -0,0 +1,52 @@ +import Image from "next/image"; +import Marquee from "react-fast-marquee"; + +export default function HomeMarquee() { + return ( +
+ +
+ images +
+
+ images +
+
+ images +
+
+ images +
+
+ images +
+ +
+ ); +} \ No newline at end of file diff --git a/components/dot/dot.css b/components/dot/dot.css index 158d1ca..a98a267 100644 --- a/components/dot/dot.css +++ b/components/dot/dot.css @@ -1,15 +1,15 @@ .pulse-wrapper { position: relative; - width: 40px; - height: 40px; + width: 30px; + height: 30px; } .core { position: absolute; inset: 0; margin: auto; - width: 14px; - height: 14px; + width: 12px; + height: 12px; background: #dc2626; /* red-600 */ border-radius: 50%; z-index: 2; @@ -34,10 +34,10 @@ animation-delay: 0.5s; } .ring:nth-child(3) { - animation-delay: 1s; + animation-delay: 1.5s; } .ring:nth-child(4) { - animation-delay: 1.5s; + animation-delay: 2s; } .ring:nth-child(5) { animation-delay: 1.5s; @@ -49,7 +49,7 @@ opacity: 0.6; } 100% { - transform: scale(3); + transform: scale(2.5); opacity: 0; } } diff --git a/components/pages/home/about.tsx b/components/pages/home/about.tsx new file mode 100644 index 0000000..e7f36a0 --- /dev/null +++ b/components/pages/home/about.tsx @@ -0,0 +1,128 @@ +"use client"; + +import React from "react"; + +import { Button } from "@/components/ui/button"; +import Image from "next/image"; +import { Flame, Building2, Ambulance } from "lucide-react"; +import DotAnimatsiya from "@/components/dot/DotAnimatsiya"; + +interface ServiceItem { + icon: React.ReactNode; + title: string; + description: string; +} + +const services: ServiceItem[] = [ + { + icon: , + title: "FIRE PREVENTION", + description: + "Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum aenean imperdiet augue", + }, + { + icon: , + title: "ACTIVE ACCIDENTS", + description: + "Nullam dictum felis eu pede mollis pretium. Integer tincidunt cras dapibus vivamus consequat vitae.", + }, + { + icon: , + title: "AMBULANCE SERVICE", + description: + "Donec pede justo fringilla vel aliquet nec vulputate eget arcu enim justo rhoncus ut venenatis.", + }, +]; + +export function AboutUs() { + return ( +
+
+
+ {/* Left Content */} +
+ {/* Header */} +
+
+ + + ABOUT US + +
+

+ FIREFIGHTERS +
+ AT THE READY +

+
+ + {/* Services */} +
+ {services.map((service, index) => ( +
+
+ {service.icon} +
+
+

+ {service.title} +

+

+ {service.description} +

+
+
+ ))} +
+ + {/* Button */} +
+ +
+
+ + {/* Right Image */} +
+
+ {/* Main Image */} +
+ Firefighter at ready +
+ + {/* Badge Overlay */} +
+ Best Award Badge +
+

+ BEST AWARD +

+

+ FIREFIGHTER 2025 +

+
+
+
+
+
+
+
+ ); +} diff --git a/components/pages/home/banner.tsx b/components/pages/home/banner.tsx index 5d908d3..37fb996 100644 --- a/components/pages/home/banner.tsx +++ b/components/pages/home/banner.tsx @@ -36,7 +36,8 @@ export function Banner() { {/* Main Heading */} -

+

THE FIRE GUARDIAN

@@ -47,7 +48,7 @@ export function Banner() {

{/* CTA Button */} - @@ -73,7 +74,7 @@ export function Banner() { {/* Main Heading */} -

+

THE FIRE GUARDIAN

diff --git a/components/pages/home/index.ts b/components/pages/home/index.ts index 081cf8d..385f38e 100644 --- a/components/pages/home/index.ts +++ b/components/pages/home/index.ts @@ -1,2 +1,7 @@ export { Banner } from "./banner"; export { Statistics } from "./statistics"; +export { AboutUs } from "./about"; +export { Video } from "./video"; +export { OurService } from "./ourService"; +export { Testimonial } from "./testimonal"; +export { Line } from "./line"; diff --git a/components/pages/home/line.tsx b/components/pages/home/line.tsx new file mode 100644 index 0000000..4593aeb --- /dev/null +++ b/components/pages/home/line.tsx @@ -0,0 +1,33 @@ +import { Phone } from "lucide-react"; +import Image from "next/image"; + +export function Line() { + return ( +
+
+
+

+ Ready for Action 24/7: Contact Us at +

+

+ + + + +123-456-7890 +

+
+ image +
+
+ ); +} diff --git a/components/pages/home/ourService.tsx b/components/pages/home/ourService.tsx new file mode 100644 index 0000000..aae1160 --- /dev/null +++ b/components/pages/home/ourService.tsx @@ -0,0 +1,117 @@ +import DotAnimatsiya from "@/components/dot/DotAnimatsiya"; +import { ChevronRight } from "lucide-react"; +import Image from "next/image"; + +export function OurService() { + return ( +
+
+ {/* header */} +
+
+ + OUR SERVICES +
+
+ FIREFIGHTER RESPONSIBILITIES +
+
+ Aliquam lorem ante dapibus in viverra quis feugiat a tellus + phasellus viverra nulla ut metus varius laoreet quisque rutrum. +
+
+ + {/* cards */} +
+
+

+ Operation Force +

+

+ Aliquam lorem ante dapibus in viverra feugiat phasellus. +

+ + images +
+
+

+ Operation Force +

+

+ Aliquam lorem ante dapibus in viverra feugiat phasellus. +

+ + images +
+
+ +
+
+ images +
+

+ Operation Force +

+

+ Aliquam lorem ante dapibus in viverra feugiat phasellus. +

+ +
+
+
+
+

+ Operation Force +

+

+ Aliquam lorem ante dapibus in viverra feugiat phasellus. +

+ + images +
+
+

+ View more service +

+ +
+
+
+
+
+ ); +} diff --git a/components/pages/home/statistics.tsx b/components/pages/home/statistics.tsx index 315f61e..c84e7ca 100644 --- a/components/pages/home/statistics.tsx +++ b/components/pages/home/statistics.tsx @@ -23,17 +23,17 @@ export function Statistics() { ]; return ( -
+
{stats.map((stat, index) => ( -
+
{/* Number and Symbol */}
{stat.number} - {stat.symbol} + {stat.symbol}
{/* Label */} diff --git a/components/pages/home/testimonal.tsx b/components/pages/home/testimonal.tsx new file mode 100644 index 0000000..97c373c --- /dev/null +++ b/components/pages/home/testimonal.tsx @@ -0,0 +1,146 @@ +"use client"; + +import { Swiper, SwiperSlide } from "swiper/react"; +import { Autoplay } from "swiper/modules"; +import Image from "next/image"; +import "swiper/css"; +import DotAnimatsiya from "@/components/dot/DotAnimatsiya"; + +const testimonials = [ + { + id: 1, + quote: + "I've witnessed Fireforce in action multiple times, and they never cease to amaze me with their dedication and professionalism. They are the backbone of our safety and security. Thank you, Fireforce!", + name: "JOHN SMITH", + role: "Manager", + avatar: "/images/home/avatar.jpg", + rating: 5, + }, + { + id: 2, + quote: + "The team's response time and expertise saved our property from a devastating fire. Their bravery and commitment to protecting our community is truly remarkable. Highly recommend their services!", + name: "SARAH JOHNSON", + role: "Business Owner", + avatar: "/images/home/avatar.jpg", + rating: 5, + }, + { + id: 3, + quote: + "Working alongside Fireforce has been an honor. Their training programs and emergency protocols are second to none. They set the standard for fire safety excellence in our region.", + name: "MICHAEL DAVIS", + role: "Safety Director", + avatar: "/images/home/avatar.jpg", + rating: 5, + }, +]; + +function StarRating({ rating }: { rating: number }) { + return ( +
+ {[...Array(rating)].map((_, i) => ( + + + + ))} +
+ ); +} + +export function Testimonial() { + return ( +
+
+ {/* Left Side - Firefighter Image */} +
+ Professional firefighter in protective gear +
+ + {/* Right Side - Testimonial Content with Background */} +
+ {/* Background Image */} +
+ Firefighters in action + {/* Gradient Overlay - Direction to the right */} +
+
+ + {/* Content */} +
+ {/* Header */} +
+
+ + + TESTIMONIALS + +
+
+ + + {testimonials.map((testimonial) => ( + +
+ {/* Quote */} +

+ "{testimonial.quote}" +

+ + {/* Author Info */} +
+
+ {testimonial.name} +
+
+

+ {testimonial.name} +

+

+ {testimonial.role} +

+
+
+ + {/* Star Rating */} + +
+ + ))} + +
+
+
+
+ ); +} diff --git a/components/pages/home/video.tsx b/components/pages/home/video.tsx new file mode 100644 index 0000000..7f5c3fe --- /dev/null +++ b/components/pages/home/video.tsx @@ -0,0 +1,22 @@ +import HomeMarquee from "@/components/HomeMarquee"; +import { Play } from "lucide-react"; + +export function Video() { + return ( + <> +
+
+ +
+
+
+ +
+ + ); +} diff --git a/package.json b/package.json index 60cce49..9c38ff1 100644 --- a/package.json +++ b/package.json @@ -51,10 +51,12 @@ "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", + "react-fast-marquee": "^1.6.5", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", + "swiper": "^12.0.3", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8fda9b9..b93bce9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -134,6 +134,9 @@ importers: react-dom: specifier: 19.2.0 version: 19.2.0(react@19.2.0) + react-fast-marquee: + specifier: ^1.6.5 + version: 1.6.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react-hook-form: specifier: ^7.60.0 version: 7.71.1(react@19.2.0) @@ -146,6 +149,9 @@ importers: sonner: specifier: ^1.7.4 version: 1.7.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + swiper: + specifier: ^12.0.3 + version: 12.0.3 tailwind-merge: specifier: ^3.3.1 version: 3.4.0 @@ -1535,6 +1541,12 @@ packages: peerDependencies: react: ^19.2.0 + react-fast-marquee@1.6.5: + resolution: {integrity: sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==} + peerDependencies: + react: '>= 16.8.0 || ^18.0.0' + react-dom: '>= 16.8.0 || ^18.0.0' + react-hook-form@7.71.1: resolution: {integrity: sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==} engines: {node: '>=18.0.0'} @@ -1647,6 +1659,10 @@ packages: babel-plugin-macros: optional: true + swiper@12.0.3: + resolution: {integrity: sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==} + engines: {node: '>= 4.7.0'} + tailwind-merge@3.4.0: resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==} @@ -2979,6 +2995,11 @@ snapshots: react: 19.2.0 scheduler: 0.27.0 + react-fast-marquee@1.6.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + react-hook-form@7.71.1(react@19.2.0): dependencies: react: 19.2.0 @@ -3106,6 +3127,8 @@ snapshots: client-only: 0.0.1 react: 19.2.0 + swiper@12.0.3: {} + tailwind-merge@3.4.0: {} tailwindcss-animate@1.0.7(tailwindcss@4.1.18): diff --git a/public/images/home/avatar.jpg b/public/images/home/avatar.jpg new file mode 100644 index 0000000..32072b7 Binary files /dev/null and b/public/images/home/avatar.jpg differ diff --git a/public/images/home/emblem.png b/public/images/home/emblem.png new file mode 100644 index 0000000..98e73c6 Binary files /dev/null and b/public/images/home/emblem.png differ