Desktop Hero v1
@@ -12,7 +12,7 @@
|
||||
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
|
||||
></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="./public/logo.ico" />
|
||||
<link rel="icon" href="./logo.ico" />
|
||||
<title>LK Solutions</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import HeroImg from "../../assets/HeroImg.svg";
|
||||
import Stars from "../../assets/Stars.svg";
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row">
|
||||
<div className="w-1/2">
|
||||
<img src={HeroImg} alt="hero" className="mt-95"></img>
|
||||
</div>
|
||||
<div className="w-1/2 sm:ml-96">
|
||||
<div>
|
||||
<img src={Stars} alt="hero" className="sm:mt-20 sm:ml-22"></img>
|
||||
<h1 className="text-4xl sm:text-8xl text-text-blue">GROW YOUR</h1>
|
||||
<h1 className="text-4xl sm:text-8xl text-text-blue sm:ml-24 ml-9">
|
||||
BUSINESS
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-xl sm:text-3xl mt-16">
|
||||
We do all the digital footprint for you,
|
||||
</h2>
|
||||
<h2 className="text-xl sm:text-3xl">
|
||||
so you can focus on what’s important!
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -1,84 +0,0 @@
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.header-title-child {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav-menu li a {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1040px) {
|
||||
.nav-menu {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
z-index: -3;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.nav-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding-top: 7px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.nav-menu li a {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: initial;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -19,7 +19,7 @@ export default () => {
|
||||
|
||||
// Replace javascript:void(0) path with your path
|
||||
const navigation = [
|
||||
{ title: "Home", path: "/" },
|
||||
{ title: "Custom", path: "javascript:void(0)" },
|
||||
{ title: "Services", path: "javascript:void(0)" },
|
||||
{ title: "Work", path: "javascript:void(0)" },
|
||||
{ title: "About Us", path: "javascript:void(0)" },
|
||||
@@ -62,7 +62,7 @@ export default () => {
|
||||
<li key={idx} className="hover:text-white">
|
||||
<a
|
||||
href={item.path}
|
||||
className="block py-2 md:py-0 md:px-4 text-lg font-medium$"
|
||||
className="block py-2 md:py-0 md:px-4 text-xl font-medium$"
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
|
||||
|
After Width: | Height: | Size: 611 KiB |
@@ -0,0 +1,29 @@
|
||||
<svg width="199" height="38" viewBox="0 0 199 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M180 1.61804L183.79 13.2832L183.902 13.6287H184.266H196.531L186.608 20.8381L186.314 21.0517L186.427 21.3972L190.217 33.0623L180.294 25.8528L180 25.6393L179.706 25.8528L169.783 33.0623L173.573 21.3972L173.686 21.0517L173.392 20.8381L163.469 13.6287H175.734H176.098L176.21 13.2832L180 1.61804Z" fill="url(#paint0_linear_387_5)" stroke="black"/>
|
||||
<path d="M140 1.61804L143.79 13.2832L143.902 13.6287H144.266H156.531L146.608 20.8381L146.314 21.0517L146.427 21.3972L150.217 33.0623L140.294 25.8528L140 25.6393L139.706 25.8528L129.783 33.0623L133.573 21.3972L133.686 21.0517L133.392 20.8381L123.469 13.6287H135.734H136.098L136.21 13.2832L140 1.61804Z" fill="url(#paint1_linear_387_5)" stroke="black"/>
|
||||
<path d="M99.5 1.65764L103.177 13.2795L103.287 13.6287H103.654H115.588L105.921 20.8419L105.637 21.0545L105.744 21.3935L109.429 33.0424L99.799 25.8566L99.5 25.6335L99.201 25.8566L89.5708 33.0424L93.2562 21.3935L93.3634 21.0545L93.0785 20.8419L83.4116 13.6287H95.3465H95.7127L95.8232 13.2795L99.5 1.65764Z" fill="url(#paint2_linear_387_5)" stroke="black"/>
|
||||
<path d="M59 1.61804L62.7902 13.2832L62.9025 13.6287H63.2658H75.5312L65.6083 20.8381L65.3144 21.0517L65.4266 21.3972L69.2169 33.0623L59.2939 25.8528L59 25.6393L58.7061 25.8528L48.7831 33.0623L52.5734 21.3972L52.6856 21.0517L52.3917 20.8381L42.4688 13.6287H54.7342H55.0975L55.2098 13.2832L59 1.61804Z" fill="url(#paint3_linear_387_5)" stroke="black"/>
|
||||
<path d="M19 1.61804L22.7902 13.2832L22.9025 13.6287H23.2658H35.5312L25.6083 20.8381L25.3144 21.0517L25.4266 21.3972L29.2169 33.0623L19.2939 25.8528L19 25.6393L18.7061 25.8528L8.78314 33.0623L12.5734 21.3972L12.6856 21.0517L12.3917 20.8381L2.46877 13.6287H14.7342H15.0975L15.2098 13.2832L19 1.61804Z" fill="url(#paint4_linear_387_5)" stroke="black"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_387_5" x1="180" y1="0" x2="180" y2="38" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#282828"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_387_5" x1="140" y1="0" x2="140" y2="38" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#282828"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_387_5" x1="99.5" y1="0" x2="99.5" y2="38" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#282828"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_387_5" x1="59" y1="0" x2="59" y2="38" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#282828"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_387_5" x1="19" y1="0" x2="19" y2="38" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FACC97"/>
|
||||
<stop offset="1" stop-color="#282828"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 3.6 MiB |
|
Before Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 262 KiB |
|
Before Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 715 KiB |
|
Before Width: | Height: | Size: 987 KiB |
|
Before Width: | Height: | Size: 516 KiB |
|
Before Width: | Height: | Size: 456 KiB |
|
Before Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 146 KiB |
@@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
import Navbar from "../Components/Navbar/Navbar";
|
||||
import Hero from "../Components/Hero/Hero";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div>
|
||||
<Navbar />
|
||||
<Hero />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -11,6 +11,11 @@ export default {
|
||||
fontFamily: {
|
||||
baijam: ['"Bai Jamjuree"', "sans-serif"],
|
||||
},
|
||||
spacing: {
|
||||
95: "8rem",
|
||||
20: "12rem",
|
||||
22: "22rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||