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

+40
Loading

‎components/About.js

-35
This file was deleted.

‎components/Banner.tsx

+18
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

+13
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

+32
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

-76
This file was deleted.

‎components/OurMember.tsx

+73
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

+59
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

‎components/Subcribe.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react'
2+
3+
const Subcribe = () => (
4+
<section className="p-24 text-center">
5+
<div className="container">
6+
<div className="row clearfix">
7+
<div>
8+
<div className="atf-mailchamp-headding mb-4">
9+
<h2 className="text-4xl font-bold leading-10 text-gray-800 mb-8">Subcribe Today For Updates Newletter</h2>
10+
</div>
11+
12+
<div className="justify-center flex">
13+
<input type="email" name="EMAIL" className="text-sm rounded-r-yl text-gray-800 w-8/12 h-11 p-4 border border-gray-200 border-solid focus:outline-none" id="email" placeholder="Your Email" required></input>
14+
<button type="submit" id="subscribe-button" className="bg-blue-600 text-white text-4xl leading-54 px-2 rounded-r-xl focus:outline-none"><i className="fab fa-telegram-plane"></i></button>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
</section>
20+
)
21+
22+
export default Subcribe

‎next-env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />

‎next.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
images: {
3+
domains: ["themesfamily.com", "media.graphcms.com"],
4+
},
5+
};

0 commit comments

Comments
 (0)