Skip to content

Commit 3f43c88

Browse files
author
Phuc La
committed
Create component
1 parent 480e7fa commit 3f43c88

39 files changed

+16381
-4521
lines changed

‎assets/1.png‎

298 KB
Loading

‎assets/agency.jpg‎

300 KB
Loading

‎assets/icons/bandcamp.svg‎

Lines changed: 40 additions & 0 deletions
Loading

‎components/About.js‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎components/Banner.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
3+
const Banner = () => (
4+
<section id="home" className="banner h-xl relative z-1 w-full flex items-center atf-header-area flex justify-center" data-stellar-background-ratio="0.3">
5+
<div className="container">
6+
<div className="text-center">
7+
<h2 className="text-5xl uppercase">Welcome To Our Muhsi</h2>
8+
<p className="text-lg pt-10 pb-6" >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do elit eiusmod tempor incididunt ut labore et dolore.</p>
9+
10+
<div className="mt-3">
11+
<a href="#" className="ease-in-out duration-500 transition-all translate-y-px hover:bg-green-800 py-4 px-6 bg-blue-500 rounded">Contact Us <i className="fa fa-angle-right"></i></a>
12+
</div>
13+
</div>
14+
</div>
15+
</section>
16+
)
17+
18+
export default Banner

‎components/Footer.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
3+
const Footer = () => (
4+
<div className="py-9 bg-gray-700 text-center mt-6">
5+
<div className="row">
6+
<div className="col-md-12 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s" data-wow-offset="0">
7+
<p>©Copyright - All Right Reserved.Designed <i className="fa fa-heart ml-1 mr-1"></i> by <a href="">Theme Family</a> </p>
8+
</div>
9+
</div>
10+
</div>
11+
)
12+
13+
export default Footer

‎components/Header.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react"
2+
import clsx from 'clsx'
3+
4+
const Header = ({ isToggle }) => (
5+
<header>
6+
<nav className={clsx("w-full p-5 flex items-center fixed z-2 transition-all duration-500 ease-in-out", {"bg-gray-700 bg-opacity-95 " : isToggle})} id="menu-top">
7+
<div className="flex items-center justify-between lg:max-w-4xl md:max-w-3xl mx-auto">
8+
<a className="text-3xl mr-4 py-1 text-white" href="index.html">Leocf</a>
9+
<button type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
10+
<span></span>
11+
<span></span>
12+
<span></span>
13+
</button>
14+
<div className="flex justify-end items-center" id="navbarDefault">
15+
<ul className="flex">
16+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2 text-blue-500" href="#home">Home</a></li>
17+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#about">About</a></li>
18+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#agency-team">Team</a></li>
19+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#service">Service</a></li>
20+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#gallery">Work</a></li>
21+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#portfolio">Portfolio</a></li>
22+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#pricing">Pricing</a></li>
23+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#blog">Blog</a></li>
24+
<li className="text-white uppercase font-medium text-sm ml-7 hover:text-blue-500"><a className="py-2" href="#contact">Contact</a></li>
25+
</ul>
26+
</div>
27+
</div>
28+
</nav>
29+
</header>
30+
)
31+
32+
export default Header

‎components/Menu.js‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎components/OurMember.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
import Image from 'next/image'
4+
5+
const data = [
6+
{
7+
title: "High Quilty Theme",
8+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
9+
icon: "fab fa-bandcamp"
10+
},
11+
{
12+
title: "Retina Ready",
13+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
14+
icon: "far fa-eye"
15+
},
16+
{
17+
title: "Clean Code",
18+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
19+
icon: "far fa-file-code"
20+
},
21+
{
22+
title: "Light Theme",
23+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
24+
icon: "fab fa-uikit"
25+
}
26+
]
27+
const OurMember = () => {
28+
return (
29+
<section id="about" className="py-20 container mx-auto">
30+
<div className="container">
31+
<div className="flex justify-center text-center">
32+
<div className="lg:w-1/2">
33+
<div className="pb-12">
34+
<h2 className="text-3xl text-gray-800">Our Team Member</h2>
35+
<div className="w-20 h-1 bg-blue-500 mx-auto my-2 pt-1"></div>
36+
<p className="text-sm pt-3 text-gray-700">Lorem elementum Sed congue nisl dolorSed congue nisl dolor Lorem elementum Sed congue nisl dolorSed.</p>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div className="flex flex-wrap">
42+
{data.map(item => (
43+
<div key={item.title} className="px-3 group lg:w-1/4 md:w-1/2 text-center sm:w-full">
44+
<div className="rounded-md bg-blue-50 pb-7 pt-5 px-4 hover:shadow-team duration-500 transition-shadow group transform">
45+
<div className="w-full h-full mb-6 duration-500 transition-shadow transform group-hover:bg-blue-800 rounded-custom">
46+
<Image
47+
src="https://themesfamily.com/tm/muhsi/assets/img/team/1.png"
48+
alt="Picture of the author"
49+
width="100%"
50+
height="100%"
51+
className="rounded-custom w-full h-full group-hover:bg-blue-800"
52+
layout="responsive"
53+
/>
54+
</div>
55+
<h3 className="mb-2 text-gray-800 text-2xl leading-8 font-bold group-hover:text-blue-500 transition-all duration-500 ase-in-out">Al-Malik</h3>
56+
<span className="text-gray-700 text-sm leading-7 font-normal">Web Developer</span>
57+
<ul className="mt-4 ">
58+
<li className="inline-block mr-1"><a href="#" className="w-6 h-6 leading-6 fab fa-facebook duration-500 transition-shadow hover:bg-blue-500 rounded-50 text-gray-200 border border-solid border-gray-200"></a></li>
59+
<li className="inline-block mr-1"><a href="#" className="w-6 h-6 leading-6 fab fa-twitter duration-500 transition-shadow hover:bg-blue-500 rounded-50 text-gray-200 border border-solid border-gray-200"></a></li>
60+
<li className="inline-block mr-1"><a href="#" className="w-6 h-6 leading-6 fab fa-google-plus duration-500 transition-shadow hover:bg-blue-500 rounded-50 text-gray-200 border border-solid border-gray-200"></a></li>
61+
</ul>
62+
</div>
63+
</div>
64+
65+
))}
66+
67+
</div>
68+
</div>
69+
</section>
70+
)
71+
}
72+
73+
export default OurMember

‎components/OurTeam.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
4+
const data = [
5+
{
6+
title: "High Quilty Theme",
7+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
8+
icon: "fab fa-bandcamp"
9+
},
10+
{
11+
title: "Retina Ready",
12+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
13+
icon: "far fa-eye"
14+
},
15+
{
16+
title: "Clean Code",
17+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
18+
icon: "far fa-file-code"
19+
},
20+
{
21+
title: "Light Theme",
22+
description: "Lorem ipsum dolor sit amet elit consectetur adipiscing sed eiusmod tempor.",
23+
icon: "fab fa-uikit"
24+
}
25+
]
26+
const OurTeam = () => {
27+
return (
28+
<section id="about" className="py-20 container mx-auto">
29+
<div className="container">
30+
<div className="flex justify-center text-center">
31+
<div className="lg:w-1/2">
32+
<div className="pb-12">
33+
<h2 className="text-3xl text-gray-800">Welcome To Our Company</h2>
34+
<div className="w-20 h-1 bg-blue-500 mx-auto my-2 pt-1"></div>
35+
<p className="text-sm pt-3 text-gray-700">Lorem elementum Sed congue nisl dolorSed congue nisl dolor Lorem elementum Sed congue nisl dolorSed.</p>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div className="flex flex-wrap">
41+
{data.map(item => (
42+
<div key={item.title} className="lg:w-1/4 md:w-1/2 text-center sm:w-full p-3">
43+
<div className="py-6 px-10 border border-gray-100 border-solid hover:shadow-custom duration-500 transition-shadow group transform my-3" data-wow-duration="2s" data-wow-delay="0.4s" data-wow-offset="0">
44+
<div><i className={clsx("w-24 h-24 text-5xl text-blue-500 bg-blue-100 text-center leading-96 rounded-custom hover:text-white group-hover:bg-blue-500 group-hover:text-white transition-all duration-500 ase-in-out", item.icon)}></i></div>
45+
<div>
46+
<h3 className="text-gray-800 text-2xl leading-8 py-3 font-bold group-hover:text-blue-500 transition-all duration-500 ase-in-out">{item.title}</h3>
47+
<p className="text-gray-700 text-sm leading-7 font-normal">{item.description}</p>
48+
</div>
49+
</div>
50+
</div>
51+
))}
52+
53+
</div>
54+
</div>
55+
</section>
56+
)
57+
}
58+
59+
export default OurTeam

0 commit comments

Comments
 (0)