Browse Source

🌟 Added SectionHero3 component

🚀 Implemented hero section
🎨 Styled hero section
💄 Enhanced hero design
🔧 Refactored SectionHero3 component
👨‍💻 Improved code readability
📸 Added hero image
main
John Doe 1 year ago
parent
commit
c22b48ec32
  1. 42
      src/app/(server-components)/SectionHero3.tsx

42
src/app/(server-components)/SectionHero3.tsx

@ -0,0 +1,42 @@
import React, { FC } from "react";
import imagePng from "@/images/travelhero2.png";
import Image from "next/image";
import ButtonPrimary from "@/shared/ButtonPrimary";
export interface SectionHero3Props {
className?: string;
}
const SectionHero3: FC<SectionHero3Props> = ({ className = "" }) => {
return (
<div
className={`nc-SectionHero3 relative ${className}`}
data-nc-id="SectionHero3"
>
<div className="absolute z-10 inset-x-0 top-[10%] sm:top-[15%] text-center flex flex-col items-center max-w-2xl mx-auto space-y-4 lg:space-y-5 xl:space-y-8">
<span className="sm:text-lg md:text-xl font-semibold text-neutral-900">
Booking tax-free from Chis. platform
</span>
<h2 className="font-bold text-black text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl !leading-[115%] ">
New generation <br /> of booking
</h2>
<ButtonPrimary
sizeClass="px-6 py-3 lg:px-8 lg:py-4 rounded-xl"
fontSize="text-sm sm:text-base lg:text-lg font-medium"
>
Keep calm & travel on
</ButtonPrimary>
</div>
<div className="relative aspect-w-1 aspect-h-1 sm:aspect-w-4 sm:aspect-h-3 lg:aspect-w-16 lg:aspect-h-9 xl:aspect-h-8 ">
<Image
className="absolute inset-0 object-cover rounded-xl"
src={imagePng}
alt="hero"
priority
/>
</div>
</div>
);
};
export default SectionHero3;
Loading…
Cancel
Save