Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9bc07acb34 | |||
|
|
ba4faf3057 | ||
| 239cf785f7 |
@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import "@/lib/gsap-setup";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||
import { Nunito_Sans } from "next/font/google";
|
||||
|
||||
@@ -54,7 +53,7 @@ export default function RootLayout({
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body className={`${nunitoSans.variable} antialiased`}>
|
||||
<Tag />
|
||||
|
||||
{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
|
||||
@@ -6,7 +6,7 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import HeroSplitImage from '@/components/sections/hero/HeroSplitImage';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
@@ -61,66 +61,21 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Unleash Precision. Own Reliability."
|
||||
description="Discover the unparalleled performance and legendary dependability of Glock firearms. Your ultimate destination for excellence in shooting."
|
||||
testimonials={[
|
||||
{
|
||||
name: "John Doe",
|
||||
handle: "@johndoe",
|
||||
testimonial: "The Glock 19 I purchased here is incredible. Flawless performance and excellent service. Highly recommend!",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/ga246336a6e5ec58d4e8c3c027a7f25971e45be4018ff981a1c3f61a2339f713f93452d7ae21ae16c616773e7119a947ac30091e42dcce851652347d4a962c0a3_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Jane Smith",
|
||||
handle: "@janesmith",
|
||||
testimonial: "Fantastic selection and knowledgeable staff. My new Glock 17 is exactly what I needed for competition.",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g89b4d25c100bd1771f9b2df000dbf745306dfe1b9fd2f4beba2cacbcde3e165314c60628236b18ceb4869992eb85c8d88a8d1a30a807acddb79e0331c0f8672d_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Mike Johnson",
|
||||
handle: "@mikej",
|
||||
testimonial: "Glock Pro Shop made my first firearm purchase smooth and informative. Love my Glock 26!",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g77478b1b75e0c9fc72406a30cf67d4c0fac63ace24de1e54f2a94a7f0e0c82b6fcccb2e89a1cf59573848b6aec85b079b54a99dfdbedbe827e914cb225183070_1280.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
name: "Sarah Lee",
|
||||
handle: "@sarah_l",
|
||||
testimonial: "Exceptional quality and genuine products. The Glock accessories are top-notch. I'm a loyal customer now.",
|
||||
rating: 5,
|
||||
imageSrc: "https://pixabay.com/get/g4871cf89965a7545dced31542d665cf16cd497aefbb0d2e4523ada5b1634e0c80e9a83116bc499a5fe84aa9ada545662876b8ccfc7d5417762869fc97841a80c_1280.jpg?_wi=1",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "https://pixabay.com/get/g8c1f547fdca58996583f178e8673afe2fea40b9a10c99d0231ca50bdf172491a4978726a875aff2f9cd3999989a3770d5f1b02bed3e7263bd976d282da464d53_1280.jpg",
|
||||
alt: "Customer John Doe",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/g91f4327ed385ec27991168a314d0b4973d537aaf4f396f6b9bab45c57c3bd9f6c859d9823cb6bc25bda2c704dd8c626de39416e8b245437ca0bf18827d1b1381_1280.jpg",
|
||||
alt: "Customer Jane Smith",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/g010c5e6c852d3d425d524dcaef4858d6475b50554deff421311f9b41315b63e730857758f427f2c3c46369189d22d03fd8c5cdb11a65185cd0199a2b2fa162e2_1280.jpg",
|
||||
alt: "Customer Mike Johnson",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/gded5d43305effa9df5e7b77dee969d2cfcd604017cf8f2be99efaef7f6a816fe1d550bfbaf58b1bf7af6608b06f187f4a97b35387789eb8bc72ea181650c7778_1280.jpg",
|
||||
alt: "Customer Sarah Lee",
|
||||
},
|
||||
]}
|
||||
avatarText="Join thousands of satisfied owners"
|
||||
imageSrc="https://pixabay.com/get/g3386982b1cbf2d5b26133baeb04cd8c7a6bd2dbbcf1cf358f3380dcaf29ccb92573d0aac6e0ce7cdbf9120f09f0b80f2fe655ae3360e11b5a0747d7b52b0cc96_1280.jpg"
|
||||
imageAlt="Glock pistol on a tactical background"
|
||||
mediaAnimation="opacity"
|
||||
/>
|
||||
<HeroSplitImage
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Unleash Precision. Own Reliability."
|
||||
description="Discover the unparalleled performance and legendary dependability of Glock firearms. Your ultimate destination for excellence in shooting."
|
||||
buttons={[
|
||||
{ text: "Explore Models", href: "#products" },
|
||||
{ text: "Contact Us", href: "#contact" },
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g3386982b1cbf2d5b26133baeb04cd8c7a6bd2dbbcf1cf358f3380dcaf29ccb92573d0aac6e0ce7cdbf9120f09f0b80f2fe655ae3360e11b5a0747d7b52b0cc96_1280.jpg"
|
||||
imageAlt="Glock pistol on a tactical background"
|
||||
imageOnLeft={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
|
||||
115
src/components/sections/hero/HeroSplitImage.tsx
Normal file
115
src/components/sections/hero/HeroSplitImage.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import TextBox from "@/components/Textbox";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
|
||||
import { cls } from "@/lib/utils";
|
||||
import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
|
||||
// A simplified background prop type for this hero variant
|
||||
type HeroSplitImageBackgroundProps = Extract<
|
||||
HeroBackgroundVariantProps,
|
||||
| { variant: "plain" }
|
||||
| { variant: "animated-grid" }
|
||||
| { variant: "radial-gradient" }
|
||||
| { variant: "sparkles-gradient" }
|
||||
>;
|
||||
|
||||
interface HeroSplitImageProps {
|
||||
title: string;
|
||||
description: string;
|
||||
background: HeroSplitImageBackgroundProps;
|
||||
useInvertedBackground?: boolean;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
buttons?: ButtonConfig[];
|
||||
buttonAnimation?: ButtonAnimationType;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
imageOnLeft?: boolean;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
imageClassName?: string;
|
||||
}
|
||||
|
||||
const HeroSplitImage = ({
|
||||
title,
|
||||
description,
|
||||
background = { variant: "plain" },
|
||||
useInvertedBackground = false,
|
||||
tag,
|
||||
tagIcon,
|
||||
buttons = [],
|
||||
buttonAnimation = "slide-up",
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
imageAlt = "",
|
||||
videoAriaLabel = "Hero video",
|
||||
imageOnLeft = false,
|
||||
ariaLabel = "Hero section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
imageClassName = "",
|
||||
}: HeroSplitImageProps) => {
|
||||
return (
|
||||
<section
|
||||
aria-label={ariaLabel}
|
||||
className={cls("relative w-full py-hero-page-padding overflow-hidden", className)}
|
||||
>
|
||||
<HeroBackgrounds {...background} />
|
||||
<div className={cls("w-content-width mx-auto grid md:grid-cols-2 gap-6 md:gap-8 items-center relative z-10", containerClassName)}>
|
||||
<div className={cls("flex flex-col gap-4", imageOnLeft ? "md:order-2" : "")}>
|
||||
<TextBox
|
||||
title={title}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
buttons={buttons}
|
||||
buttonAnimation={buttonAnimation}
|
||||
className={cls("flex flex-col gap-3 md:gap-3", textBoxClassName)}
|
||||
titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
|
||||
descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
|
||||
tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 w-fit", tagClassName)}
|
||||
buttonContainerClassName={cls("flex flex-wrap gap-4 mt-2", buttonContainerClassName)}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
center={false}
|
||||
/>
|
||||
</div>
|
||||
<div className={cls("relative w-full overflow-hidden rounded-theme-capped card p-2", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
imageAlt={imageAlt}
|
||||
videoAriaLabel={videoAriaLabel}
|
||||
imageClassName={cls("z-1 aspect-square md:aspect-[4/3] object-cover w-full h-full rounded-theme", imageClassName)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
HeroSplitImage.displayName = "HeroSplitImage";
|
||||
|
||||
export default HeroSplitImage;
|
||||
Reference in New Issue
Block a user