Asked 10 months ago
0 Answers
1 Views
I made a bit of a mess here while trying to implement the wanted design.. I want my bridge img to be placed in the right side of the H1 text content. I want it to be responsive also. (I want it to look similar to Epidemic Sound Hero section)
import React from "react";
import Navbar from "../Navbar";
import FeatureSection from "./FeatureSection";
import { HeroSectionFirst } from "@/constants";
const HeroSection = () => {
return (
<div className="flex flex-col items-center mt-6 lg:mt-20">
<div className="flex flex-wrap justify-center lg:flex-row-reverse">
<div className="p-2 w-full lg:w-1/2">
<img src={'./public/images/Asset 1@2x.png'} alt="Coding" />
</div>
<div className="pt-12 w-full lg:w-1/2">
{HeroSectionFirst.map((item, index) => (
<div key={index} className="flex mb-12">
<div>
<h5 className="mt-1 mb-2 text-xl">{item.title}</h5>
<p className="text-md text-neutral-500">{item.description}</p>
</div>
</div>
))}
</div>
</div>
<h1 className="text-4xl sm:text-6xl lg:text-7xl text-center tracking-wide">
VirtualR build tools
<span className="bg-gradient-to-r from-orange-500 to-red-800 text-transparent bg-clip-text">
{" "}
for developers
</span>
</h1>
<p className="mt-10 text-lg text-center text-neutral-500 max-w-4xl">
Empower your creativity and bring your VR app ideas to life with our
intuitive development tools. Get started today and turn your imagination
into immersive reality!
</p>
<div className="flex justify-center my-10">
<a
href="#"
className="bg-gradient-to-r from-orange-500 to-orange-800 py-3 px-4 mx-3 rounded-md"
>
Start for free
</a>
<a href="#" className="py-3 px-4 mx-3 rounded-md border">
Documentation
</a>
</div>
<div className="flex mt-10 justify-center">
<video
autoPlay
loop
muted
className="rounded-lg w-1/2 border border-orange-700 shadow-sm shadow-orange-400 mx-2 my-4"
>
<source src={'video1'} type="video/mp4" />
Your browser does not support the video tag.
</video>
<video
autoPlay
loop
muted
className="rounded-lg w-1/2 border border-orange-700 shadow-sm shadow-orange-400 mx-2 my-4"
>
<source src={'video2'} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
);
};0 Answers