Skip to content

Update Hero.jsx #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Xperimental-lain wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Hero.jsx #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 18 additions & 24 deletions src/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,35 @@ import Carousel from './Caras0I';
import Program from './Program';
import About from './About';
import Contact from './Cntact';


import TrainingCard from './Training';

const HeroSection = () => {
return (
<>
{/* SEO Optimization */}
<Helmet>
<title > Fitness Revolution - Unleash Your Inner Strength</title>
<title>The Fitness Connection - Unleash Your Inner Strength</title>
<meta
name="description"
content="Join our community of fitness enthusiasts. World-class facilities, expert trainers, and personalized programs designed to take your fitness journey to the next level."
/>
<meta
name="keywords"
content="fitness, gym, workout, strength, health, fitness revolution, fitness programs"
content="fitness, gym, workout, strength, health, The Fitness Connection, fitness programs"
/>
<meta name="robots" content="index, follow" />
</Helmet>


<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 bg-black mt-12 h-[100vh] flex items-center">
{/* Grid */}
<div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
{/* Text Section */}
{/* Hero Section */}
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 bg-black mt-12 min-h-screen flex items-center">
<div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center h-full">
{/* Left Text Section */}
<div className="text-center lg:text-left">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-teal-500 leading-tight tracking-wider dark:text-white mt-12 pt-16">
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-teal-500 leading-tight tracking-wider dark:text-white">
Unleash Your Inner Strength
<br />
<span className="text-white text-2xl sm:text-3xl mt-3">Join the Fitness Revolution</span>
<span className="text-white text-2xl sm:text-3xl">Join The Fitness Connection</span>
</h1>
<p className="mt-4 text-lg sm:text-xl text-white dark:text-neutral-400">
Join our community of fitness enthusiasts. World-class facilities, expert trainers, and personalized programs designed to take your fitness journey to the next level.
Expand All @@ -43,7 +43,7 @@ const HeroSection = () => {
<div className="mt-8 flex justify-center sm:justify-start space-x-4">
<a
href="#"
className="py-3 px-6 inline-flex items-center justify-center gap-x-2 text-lg font-semibold rounded-lg bg-teal-600 text-white hover:bg-teal-700 focus:outline-none focus:bg-teal-700"
className="py-3 px-6 inline-flex items-center justify-center gap-x-2 text-lg font-semibold rounded-lg bg-teal-600 text-white hover:bg-teal-700"
>
Start Your Transformation
<svg
Expand All @@ -63,33 +63,27 @@ const HeroSection = () => {
</a>
<Link
to="/contact"
className="py-3 px-6 inline-flex items-center justify-center gap-x-2 text-lg font-semibold rounded-lg bg-white text-gray-800 shadow-md hover:bg-gray-50 focus:outline-none focus:bg-gray-50 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
className="py-3 px-6 inline-flex items-center justify-center gap-x-2 text-lg font-semibold rounded-lg bg-white text-gray-800 shadow-md hover:bg-gray-50"
>
Contact Us
</Link>
</div>
{/* End Buttons */}
</div>

{/* Image Section */}
<div className="relative mt-8 lg:mt-0">
{/* Right Carousel Section (Fixed Margins & Height) */}
<div className="relative mt-4 lg:mt-0 flex justify-center h-full">
<Carousel />
</div>
</div>
{/* End Grid */}
</div>

{/* Other Sections */}
<Program />
<About />

<TrainingCard/>
<TrainingCard />
<Contact />
</>
);
};

export default HeroSection;