first commit
This commit is contained in:
“dongming”
18
src/App.css
Normal file
18
src/App.css
Normal file
@@ -0,0 +1,18 @@
|
||||
@media screen and (max-width: 400px) {
|
||||
#features {
|
||||
padding: 20px;
|
||||
width: 111%;
|
||||
}
|
||||
#about,
|
||||
#services,
|
||||
#testimonials,
|
||||
#team,
|
||||
#contact,
|
||||
#footer {
|
||||
width: 111%;
|
||||
}
|
||||
|
||||
#portfolio {
|
||||
width: 110%;
|
||||
}
|
||||
}
|
||||
41
src/App.jsx
Normal file
41
src/App.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Navigation } from "./components/navigation";
|
||||
import { Header } from "./components/header";
|
||||
import { Features } from "./components/features";
|
||||
import { About } from "./components/about";
|
||||
import { Services } from "./components/services";
|
||||
import { Gallery } from "./components/gallery";
|
||||
import { Testimonials } from "./components/testimonials";
|
||||
import { Team } from "./components/Team";
|
||||
import { Contact } from "./components/contact";
|
||||
import JsonData from "./data/data.json";
|
||||
import SmoothScroll from "smooth-scroll";
|
||||
import "./App.css";
|
||||
|
||||
export const scroll = new SmoothScroll('a[href*="#"]', {
|
||||
speed: 1000,
|
||||
speedAsDuration: true,
|
||||
});
|
||||
|
||||
const App = () => {
|
||||
const [landingPageData, setLandingPageData] = useState({});
|
||||
useEffect(() => {
|
||||
setLandingPageData(JsonData);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navigation />
|
||||
<Header data={landingPageData.Header} />
|
||||
<Features data={landingPageData.Features} />
|
||||
<About data={landingPageData.About} />
|
||||
<Services data={landingPageData.Services} />
|
||||
<Gallery data={landingPageData.Gallery} />
|
||||
<Testimonials data={landingPageData.Testimonials} />
|
||||
<Team data={landingPageData.Team} />
|
||||
<Contact data={landingPageData.Contact} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
33
src/components/Team.jsx
Normal file
33
src/components/Team.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
|
||||
export const Team = (props) => {
|
||||
return (
|
||||
<div id="team" className="text-center">
|
||||
<div className="container">
|
||||
<div className="col-md-8 col-md-offset-2 section-title">
|
||||
<h2>Meet the Team</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed
|
||||
dapibus leonec.
|
||||
</p>
|
||||
</div>
|
||||
<div id="row">
|
||||
{props.data
|
||||
? props.data.map((d, i) => (
|
||||
<div key={`${d.name}-${i}`} className="col-md-3 col-sm-6 team">
|
||||
<div className="thumbnail">
|
||||
{" "}
|
||||
<img src={d.img} alt="..." className="team-img" />
|
||||
<div className="caption">
|
||||
<h4>{d.name}</h4>
|
||||
<p>{d.job}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
: "loading"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
43
src/components/about.jsx
Normal file
43
src/components/about.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
|
||||
export const About = (props) => {
|
||||
return (
|
||||
<div id="about">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xs-12 col-md-6">
|
||||
{" "}
|
||||
<img src="img/about.jpg" className="img-responsive" alt="" />{" "}
|
||||
</div>
|
||||
<div className="col-xs-12 col-md-6">
|
||||
<div className="about-text">
|
||||
<h2>About Us</h2>
|
||||
<p>{props.data ? props.data.paragraph : "loading..."}</p>
|
||||
<h3>Why Choose Us?</h3>
|
||||
<div className="list-style">
|
||||
<div className="col-lg-6 col-sm-6 col-xs-12">
|
||||
<ul>
|
||||
{props.data
|
||||
? props.data.Why.map((d, i) => (
|
||||
<li key={`${d}-${i}`}>{d}</li>
|
||||
))
|
||||
: "loading"}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-lg-6 col-sm-6 col-xs-12">
|
||||
<ul>
|
||||
{props.data
|
||||
? props.data.Why2.map((d, i) => (
|
||||
<li key={`${d}-${i}`}> {d}</li>
|
||||
))
|
||||
: "loading"}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
164
src/components/contact.jsx
Normal file
164
src/components/contact.jsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import { useState } from "react";
|
||||
import emailjs from "@emailjs/browser";
|
||||
|
||||
const initialState = {
|
||||
name: "",
|
||||
email: "",
|
||||
message: "",
|
||||
};
|
||||
export const Contact = (props) => {
|
||||
const [{ name, email, message }, setState] = useState(initialState);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setState((prevState) => ({ ...prevState, [name]: value }));
|
||||
};
|
||||
const clearState = () => setState({ ...initialState });
|
||||
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
console.log(name, email, message);
|
||||
|
||||
{/* replace below with your own Service ID, Template ID and Public Key from your EmailJS account */ }
|
||||
|
||||
emailjs
|
||||
.sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", e.target, "YOUR_PUBLIC_KEY")
|
||||
.then(
|
||||
(result) => {
|
||||
console.log(result.text);
|
||||
clearState();
|
||||
},
|
||||
(error) => {
|
||||
console.log(error.text);
|
||||
}
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div id="contact">
|
||||
<div className="container">
|
||||
<div className="col-md-8">
|
||||
<div className="row">
|
||||
<div className="section-title">
|
||||
<h2>Get In Touch</h2>
|
||||
<p>
|
||||
Please fill out the form below to send us an email and we will
|
||||
get back to you as soon as possible.
|
||||
</p>
|
||||
</div>
|
||||
<form name="sentMessage" validate onSubmit={handleSubmit}>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
className="form-control"
|
||||
placeholder="Name"
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<p className="help-block text-danger"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
className="form-control"
|
||||
placeholder="Email"
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<p className="help-block text-danger"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
name="message"
|
||||
id="message"
|
||||
className="form-control"
|
||||
rows="4"
|
||||
placeholder="Message"
|
||||
required
|
||||
onChange={handleChange}
|
||||
></textarea>
|
||||
<p className="help-block text-danger"></p>
|
||||
</div>
|
||||
<div id="success"></div>
|
||||
<button type="submit" className="btn btn-custom btn-lg">
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-3 col-md-offset-1 contact-info">
|
||||
<div className="contact-item">
|
||||
<h3>Contact Info</h3>
|
||||
<p>
|
||||
<span>
|
||||
<i className="fa fa-map-marker"></i> Address
|
||||
</span>
|
||||
{props.data ? props.data.address : "loading"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="contact-item">
|
||||
<p>
|
||||
<span>
|
||||
<i className="fa fa-phone"></i> Phone
|
||||
</span>{" "}
|
||||
{props.data ? props.data.phone : "loading"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="contact-item">
|
||||
<p>
|
||||
<span>
|
||||
<i className="fa fa-envelope-o"></i> Email
|
||||
</span>{" "}
|
||||
{props.data ? props.data.email : "loading"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12">
|
||||
<div className="row">
|
||||
<div className="social">
|
||||
<ul>
|
||||
<li>
|
||||
<a href={props.data ? props.data.facebook : "/"}>
|
||||
<i className="fa fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={props.data ? props.data.twitter : "/"}>
|
||||
<i className="fa fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={props.data ? props.data.youtube : "/"}>
|
||||
<i className="fa fa-youtube"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div className="container text-center">
|
||||
<p>
|
||||
© 2023 Issaaf Kattan React Land Page Template. Design by{" "}
|
||||
<a href="http://www.templatewire.com" rel="nofollow">
|
||||
TemplateWire
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
25
src/components/features.jsx
Normal file
25
src/components/features.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
export const Features = (props) => {
|
||||
return (
|
||||
<div id="features" className="text-center">
|
||||
<div className="container">
|
||||
<div className="col-md-10 col-md-offset-1 section-title">
|
||||
<h2>Features</h2>
|
||||
</div>
|
||||
<div className="row">
|
||||
{props.data
|
||||
? props.data.map((d, i) => (
|
||||
<div key={`${d.title}-${i}`} className="col-xs-6 col-md-3">
|
||||
{" "}
|
||||
<i className={d.icon}></i>
|
||||
<h3>{d.title}</h3>
|
||||
<p>{d.text}</p>
|
||||
</div>
|
||||
))
|
||||
: "Loading..."}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
36
src/components/gallery.jsx
Normal file
36
src/components/gallery.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Image } from "./image";
|
||||
import React from "react";
|
||||
|
||||
export const Gallery = (props) => {
|
||||
return (
|
||||
<div id="portfolio" className="text-center">
|
||||
<div className="container">
|
||||
<div className="section-title">
|
||||
<h2>Gallery</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed
|
||||
dapibus leonec.
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="portfolio-items">
|
||||
{props.data
|
||||
? props.data.map((d, i) => (
|
||||
<div
|
||||
key={`${d.title}-${i}`}
|
||||
className="col-sm-6 col-md-4 col-lg-4"
|
||||
>
|
||||
<Image
|
||||
title={d.title}
|
||||
largeImage={d.largeImage}
|
||||
smallImage={d.smallImage}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
: "Loading..."}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
29
src/components/header.jsx
Normal file
29
src/components/header.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from "react";
|
||||
|
||||
export const Header = (props) => {
|
||||
return (
|
||||
<header id="header">
|
||||
<div className="intro">
|
||||
<div className="overlay">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-md-8 col-md-offset-2 intro-text">
|
||||
<h1>
|
||||
{props.data ? props.data.title : "Loading"}
|
||||
<span></span>
|
||||
</h1>
|
||||
<p>{props.data ? props.data.paragraph : "Loading"}</p>
|
||||
<a
|
||||
href="#features"
|
||||
className="btn btn-custom btn-lg page-scroll"
|
||||
>
|
||||
Learn More
|
||||
</a>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
17
src/components/image.jsx
Normal file
17
src/components/image.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
|
||||
export const Image = ({ title, largeImage, smallImage }) => {
|
||||
return (
|
||||
<div className="portfolio-item">
|
||||
<div className="hover-bg">
|
||||
{" "}
|
||||
<a href={largeImage} title={title} data-lightbox-gallery="gallery1">
|
||||
<div className="hover-text">
|
||||
<h4>{title}</h4>
|
||||
</div>
|
||||
<img src={smallImage} className="img-responsive" alt={title} />{" "}
|
||||
</a>{" "}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
70
src/components/navigation.jsx
Normal file
70
src/components/navigation.jsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
|
||||
export const Navigation = (props) => {
|
||||
return (
|
||||
<nav id="menu" className="navbar navbar-default navbar-fixed-top">
|
||||
<div className="container">
|
||||
<div className="navbar-header">
|
||||
<button
|
||||
type="button"
|
||||
className="navbar-toggle collapsed"
|
||||
data-toggle="collapse"
|
||||
data-target="#bs-example-navbar-collapse-1"
|
||||
>
|
||||
{" "}
|
||||
<span className="sr-only">Toggle navigation</span>{" "}
|
||||
<span className="icon-bar"></span>{" "}
|
||||
<span className="icon-bar"></span>{" "}
|
||||
<span className="icon-bar"></span>{" "}
|
||||
</button>
|
||||
<a className="navbar-brand page-scroll" href="#page-top">
|
||||
React Landing Page
|
||||
</a>{" "}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="collapse navbar-collapse"
|
||||
id="bs-example-navbar-collapse-1"
|
||||
>
|
||||
<ul className="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="#features" className="page-scroll">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#about" className="page-scroll">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#services" className="page-scroll">
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#portfolio" className="page-scroll">
|
||||
Gallery
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#testimonials" className="page-scroll">
|
||||
Testimonials
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#team" className="page-scroll">
|
||||
Team
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#contact" className="page-scroll">
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
31
src/components/services.jsx
Normal file
31
src/components/services.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
|
||||
export const Services = (props) => {
|
||||
return (
|
||||
<div id="services" className="text-center">
|
||||
<div className="container">
|
||||
<div className="section-title">
|
||||
<h2>Our Services</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed
|
||||
dapibus leonec.
|
||||
</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
{props.data
|
||||
? props.data.map((d, i) => (
|
||||
<div key={`${d.name}-${i}`} className="col-md-4">
|
||||
{" "}
|
||||
<i className={d.icon}></i>
|
||||
<div className="service-desc">
|
||||
<h3>{d.name}</h3>
|
||||
<p>{d.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
: "loading"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
31
src/components/testimonials.jsx
Normal file
31
src/components/testimonials.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
|
||||
export const Testimonials = (props) => {
|
||||
return (
|
||||
<div id="testimonials">
|
||||
<div className="container">
|
||||
<div className="section-title text-center">
|
||||
<h2>What our clients say</h2>
|
||||
</div>
|
||||
<div className="row">
|
||||
{props.data
|
||||
? props.data.map((d, i) => (
|
||||
<div key={`${d.name}-${i}`} className="col-md-4">
|
||||
<div className="testimonial">
|
||||
<div className="testimonial-image">
|
||||
{" "}
|
||||
<img src={d.img} alt="" />{" "}
|
||||
</div>
|
||||
<div className="testimonial-content">
|
||||
<p>"{d.text}"</p>
|
||||
<div className="testimonial-meta"> - {d.name} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
: "loading"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
184
src/data/data.json
Normal file
184
src/data/data.json
Normal file
@@ -0,0 +1,184 @@
|
||||
{
|
||||
"Header": {
|
||||
"title": "We are a Landing Page",
|
||||
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sed commodo nibh ante facilisis bibendum."
|
||||
},
|
||||
"About": {
|
||||
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
||||
"Why": [
|
||||
"Lorem ipsum dolor",
|
||||
"Tempor incididunt",
|
||||
"Lorem ipsum dolor",
|
||||
"Incididunt ut labore"
|
||||
],
|
||||
"Why2": [
|
||||
"Aliquip ex ea commodo",
|
||||
"Lorem ipsum dolor",
|
||||
"Exercitation ullamco",
|
||||
"Lorem ipsum dolor"
|
||||
]
|
||||
},
|
||||
"Gallery": [
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/01-large.jpg",
|
||||
"smallImage": "img/portfolio/01-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/02-large.jpg",
|
||||
"smallImage": "img/portfolio/02-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/03-large.jpg",
|
||||
"smallImage": "img/portfolio/03-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/04-large.jpg",
|
||||
"smallImage": "img/portfolio/04-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/05-large.jpg",
|
||||
"smallImage": "img/portfolio/05-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/06-large.jpg",
|
||||
"smallImage": "img/portfolio/06-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/07-large.jpg",
|
||||
"smallImage": "img/portfolio/07-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/08-large.jpg",
|
||||
"smallImage": "img/portfolio/08-small.jpg"
|
||||
},
|
||||
{
|
||||
"title": "Project Title",
|
||||
"largeImage": "img/portfolio/09-large.jpg",
|
||||
"smallImage": "img/portfolio/09-small.jpg"
|
||||
}
|
||||
],
|
||||
"Services": [
|
||||
{
|
||||
"icon": "fa fa-wordpress",
|
||||
"name": "Lorem ipsum dolor",
|
||||
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-cart-arrow-down",
|
||||
"name": "Consectetur adipiscing",
|
||||
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-cloud-download",
|
||||
"name": "Lorem ipsum dolor",
|
||||
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-language",
|
||||
"name": "Consectetur adipiscing",
|
||||
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-plane",
|
||||
"name": "Lorem ipsum dolor",
|
||||
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-pie-chart",
|
||||
"name": "Consectetur adipiscing",
|
||||
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at."
|
||||
}
|
||||
],
|
||||
"Testimonials": [
|
||||
{
|
||||
"img": "img/testimonials/01.jpg",
|
||||
"text": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at.\"",
|
||||
"name": "John Doe"
|
||||
},
|
||||
{
|
||||
"img": "img/testimonials/02.jpg",
|
||||
"text": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at.\"",
|
||||
"name": "Johnathan Doe"
|
||||
},
|
||||
{
|
||||
"img": "img/testimonials/03.jpg",
|
||||
"text": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at.\"",
|
||||
"name": "John Doe"
|
||||
},
|
||||
{
|
||||
"img": "img/testimonials/04.jpg",
|
||||
"text": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at.\"",
|
||||
"name": "Johnathan Doe"
|
||||
},
|
||||
{
|
||||
"img": "img/testimonials/05.jpg",
|
||||
"text": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at.\"",
|
||||
"name": "John Doe"
|
||||
},
|
||||
{
|
||||
"img": "img/testimonials/06.jpg",
|
||||
"text": "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam sedasd commodo nibh ante facilisis bibendum dolor feugiat at.\"",
|
||||
"name": "Johnathan Doe"
|
||||
}
|
||||
],
|
||||
"Team": [
|
||||
{
|
||||
"img": "img/team/01.jpg",
|
||||
"name": "John Doe",
|
||||
"job": "Director"
|
||||
},
|
||||
{
|
||||
"img": "img/team/02.jpg",
|
||||
"name": "Mike Doe",
|
||||
"job": "Senior Designer"
|
||||
},
|
||||
{
|
||||
"img": "img/team/03.jpg",
|
||||
"name": "Jane Doe",
|
||||
"job": "Senior Designer"
|
||||
},
|
||||
{
|
||||
"img": "img/team/04.jpg",
|
||||
"name": "Karen Doe",
|
||||
"job": "Project Manager"
|
||||
}
|
||||
],
|
||||
"Contact": {
|
||||
"address": "4321 California St, San Francisco, CA 12345 ",
|
||||
"phone": "+1 123 456 1234",
|
||||
"email": "info@company.com",
|
||||
"facebook": "fb.com",
|
||||
"twitter": "twitter.com",
|
||||
"youtube": "youtube.com"
|
||||
},
|
||||
"Features": [
|
||||
{
|
||||
"icon": "fa fa-comments-o",
|
||||
"title": "Lorem ipsum",
|
||||
"text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-bullhorn",
|
||||
"title": "Lorem ipsum",
|
||||
"text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-group",
|
||||
"title": "Lorem ipsum",
|
||||
"text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
|
||||
},
|
||||
{
|
||||
"icon": "fa fa-magic",
|
||||
"title": "Lorem ipsum",
|
||||
"text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
|
||||
}
|
||||
]
|
||||
}
|
||||
13
src/index.css
Normal file
13
src/index.css
Normal file
@@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
7
src/logo.svg
Normal file
7
src/logo.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
)
|
||||
Reference in New Issue
Block a user