FernandoJVideira/LK_Landing_Page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero WIP

Browse Source
This commit is contained in:
FernandoJVideira
2024-04-13 11:11:29 +01:00
parent a951b9b53f
commit f827ef18ae
3 changed files with 21 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Components/Hero/Hero.tsx
+16 -16
View File
@@ -5,27 +5,27 @@ import { FaChevronDown } from "react-icons/fa";
const Hero = () => { const Hero = () => {
return ( return (
<div className="flex flex-col sm:flex-row"> <div className="flex flex-col lg:flex-row md:flex-row">
<div className="sm:w-1/2 w-full"> <div className="lg:w-1/2 w-full md:w-1/2">
<img src={HeroImg} alt="hero" className="sm:mt-16"></img> <img src={HeroImg} alt="hero" className="lg:mt-8 md:mt-8"></img>
</div> </div>
<div className="sm:w-1/2 sm:ml-20"> <div className="text-center lg:w-1/2 ml-auto md:w-1/2 md:ml-auto md:mr-auto">
<div> <img
<img src={Stars} alt="hero" className="sm:mt-16 sm:ml-22"></img> src={Stars}
<h1 className="text-4xl sm:text-8xl text-text-blue">GROW YOUR</h1> alt="hero"
<h1 className="text-4xl sm:text-8xl text-text-blue sm:ml-24 ml-9"> className="lg:ml-auto lg:mr-48 lg:mt-8"
BUSINESS ></img>
</h1> <h1 className="text-4xl sm:text-6xl md:text-8xl">GROW YOUR</h1>
</div> <h1 className="text-4xl sm:text-6xl md:text-8xl">BUSINESS</h1>
<div className="flex flex-col"> <div className="flex flex-col">
<h2 className="text-xl sm:text-3xl mt-10"> <h2 className="lg:text-3xl lg:ml-10 mt-10 md:text-sm">
We do all the digital footprint for you, We do all the digital footprint for you,
</h2> </h2>
<h2 className="text-xl sm:text-3xl"> <h2 className="lg:text-3xl lg:ml-6 md:text-sm">
so you can focus on what’s important! so you can focus on what’s important!
</h2> </h2>
<div className="flex w-20 h-14 mt-10 mr-8 ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg"> <div className="flex w-full lg:w-21 lg:h-4-75 mt-12 lg:ml-auto lg:mr-48 rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
<button className="flex-1 font-bold text-xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500"> <button className="flex-1 font-bold text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
Yes, I want that! Yes, I want that!
</button> </button>
</div> </div>
@@ -33,7 +33,7 @@ const Hero = () => {
</div> </div>
<div className="w-full mb-4 h-12 absolute bottom-0"> <div className="w-full mb-4 h-12 absolute bottom-0">
<a href="javascript:void(0)"> <a href="javascript:void(0)">
<FaChevronDown className="text-text-gold text-5xl text-text-blue mx-auto"></FaChevronDown> <FaChevronDown size={40} className="text-text-gold mx-auto" />
</a> </a>
</div> </div>
</div> </div>
src/routes/Home.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import Navbar from "../components/Navbar/Navbar"; import Navbar from "../Components/Navbar/Navbar";
import Hero from "../components/Hero/Hero"; import Hero from "../Components/Hero/Hero";
const Home = () => { const Home = () => {
return ( return (
tailwind.config.js
+3
View File
@@ -14,8 +14,11 @@ export default {
baijam: ['"Bai Jamjuree"', "sans-serif"], baijam: ['"Bai Jamjuree"', "sans-serif"],
}, },
spacing: { spacing: {
"4-75": "4.75rem",
8: "8rem", 8: "8rem",
"13-62": "13.625rem",
20: "12rem", 20: "12rem",
21: "21rem",
22: "22rem", 22: "22rem",
}, },
}, },