","
"]},sb=db(y),tb=sb.appendChild(y.createElement("div"));rb.optgroup=rb.option,rb.tbody=rb.tfoot=rb.colgroup=rb.caption=rb.thead,rb.th=rb.td;function ub(a,b){var c,d,e=0,f=typeof a.getElementsByTagName!==K?a.getElementsByTagName(b||"*"):typeof a.querySelectorAll!==K?a.querySelectorAll(b||"*"):void 0;if(!f)for(f=[],c=a.childNodes||a;null!=(d=c[e]);e++)!b||m.nodeName(d,b)?f.push(d):m.merge(f,ub(d,b));return void 0===b||b&&m.nodeName(a,b)?m.merge([a],f):f}function vb(a){W.test(a.type)&&(a.defaultChecked=a.checked)}function wb(a,b){return m.nodeName(a,"table")&&m.nodeName(11!==b.nodeType?b:b.firstChild,"tr")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function xb(a){return a.type=(null!==m.find.attr(a,"type"))+"/"+a.type,a}function yb(a){var b=pb.exec(a.type);return b?a.type=b[1]:a.removeAttribute("type"),a}function zb(a,b){for(var c,d=0;null!=(c=a[d]);d++)m._data(c,"globalEval",!b||m._data(b[d],"globalEval"))}function Ab(a,b){if(1===b.nodeType&&m.hasData(a)){var c,d,e,f=m._data(a),g=m._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;e>d;d++)m.event.add(b,c,h[c][d])}g.data&&(g.data=m.extend({},g.data))}}function Bb(a,b){var c,d,e;if(1===b.nodeType){if(c=b.nodeName.toLowerCase(),!k.noCloneEvent&&b[m.expando]){e=m._data(b);for(d in e.events)m.removeEvent(b,d,e.handle);b.removeAttribute(m.expando)}"script"===c&&b.text!==a.text?(xb(b).text=a.text,yb(b)):"object"===c?(b.parentNode&&(b.outerHTML=a.outerHTML),k.html5Clone&&a.innerHTML&&!m.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):"input"===c&&W.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):"option"===c?b.defaultSelected=b.selected=a.defaultSelected:("input"===c||"textarea"===c)&&(b.defaultValue=a.defaultValue)}}m.extend({clone:function(a,b,c){var d,e,f,g,h,i=m.contains(a.ownerDocument,a);if(k.html5Clone||m.isXMLDoc(a)||!gb.test("<"+a.nodeName+">")?f=a.cloneNode(!0):(tb.innerHTML=a.outerHTML,tb.removeChild(f=tb.firstChild)),!(k.noCloneEvent&&k.noCloneChecked||1!==a.nodeType&&11!==a.nodeType||m.isXMLDoc(a)))for(d=ub(f),h=ub(a),g=0;null!=(e=h[g]);++g)d[g]&&Bb(e,d[g]);if(b)if(c)for(h=h||ub(a),d=d||ub(f),g=0;null!=(e=h[g]);g++)Ab(e,d[g]);else Ab(a,f);return d=ub(f,"script"),d.length>0&&zb(d,!i&&ub(a,"script")),d=h=e=null,f},buildFragment:function(a,b,c,d){for(var e,f,g,h,i,j,l,n=a.length,o=db(b),p=[],q=0;n>q;q++)if(f=a[q],f||0===f)if("object"===m.type(f))m.merge(p,f.nodeType?[f]:f);else if(lb.test(f)){h=h||o.appendChild(b.createElement("div")),i=(jb.exec(f)||["",""])[1].toLowerCase(),l=rb[i]||rb._default,h.innerHTML=l[1]+f.replace(ib,"<$1>")+l[2],e=l[0];while(e--)h=h.lastChild;if(!k.leadingWhitespace&&hb.test(f)&&p.push(b.createTextNode(hb.exec(f)[0])),!k.tbody){f="table"!==i||kb.test(f)?"| t |
").append(m.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},m.expr.filters.animated=function(a){return m.grep(m.timers,function(b){return a===b.elem}).length};var cd=a.document.documentElement;function dd(a){return m.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}m.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=m.css(a,"position"),l=m(a),n={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=m.css(a,"top"),i=m.css(a,"left"),j=("absolute"===k||"fixed"===k)&&m.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),m.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(n.top=b.top-h.top+g),null!=b.left&&(n.left=b.left-h.left+e),"using"in b?b.using.call(a,n):l.css(n)}},m.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){m.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,m.contains(b,e)?(typeof e.getBoundingClientRect!==K&&(d=e.getBoundingClientRect()),c=dd(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===m.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),m.nodeName(a[0],"html")||(c=a.offset()),c.top+=m.css(a[0],"borderTopWidth",!0),c.left+=m.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-m.css(d,"marginTop",!0),left:b.left-c.left-m.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||cd;while(a&&!m.nodeName(a,"html")&&"static"===m.css(a,"position"))a=a.offsetParent;return a||cd})}}),m.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);m.fn[a]=function(d){return V(this,function(a,d,e){var f=dd(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?m(f).scrollLeft():e,c?e:m(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),m.each(["top","left"],function(a,b){m.cssHooks[b]=Lb(k.pixelPosition,function(a,c){return c?(c=Jb(a,b),Hb.test(c)?m(a).position()[b]+"px":c):void 0})}),m.each({Height:"height",Width:"width"},function(a,b){m.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){m.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return V(this,function(b,c,d){var e;return m.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?m.css(b,c,g):m.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),m.fn.size=function(){return this.length},m.fn.andSelf=m.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return m});var ed=a.jQuery,fd=a.$;return m.noConflict=function(b){return a.$===m&&(a.$=fd),b&&a.jQuery===m&&(a.jQuery=ed),m},typeof b===K&&(a.jQuery=a.$=m),m});
\ No newline at end of file
diff --git a/src/logo.svg b/public/logo.svg
similarity index 100%
rename from src/logo.svg
rename to public/logo.svg
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 0e8605e99..000000000
--- a/src/App.css
+++ /dev/null
@@ -1,18 +0,0 @@
-@media screen and (max-width: 400px) {
- #features {
- padding: 20px;
- width: 111%;
- }
- #about,
- #services,
- #testimonials,
- #team,
- #contact,
- #footer {
- width: 111%;
- }
-
- #portfolio {
- width: 110%;
- }
-}
diff --git a/src/App.jsx b/src/App.jsx
deleted file mode 100644
index 2517df8f5..000000000
--- a/src/App.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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 (
-
+
+ );
+};
diff --git a/src/components/about.jsx b/src/components/about.jsx
deleted file mode 100644
index d50a7f2d4..000000000
--- a/src/components/about.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-
-export const About = (props) => {
- return (
-
+
+ );
+};
diff --git a/src/components/contact.jsx b/src/components/contact.jsx
deleted file mode 100644
index be29734ed..000000000
--- a/src/components/contact.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { useState } from "react";
-import emailjs from "emailjs-com";
-import React from "react";
-
-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 (
-
+
+
+ );
+};
diff --git a/src/components/features.jsx b/src/components/features.jsx
deleted file mode 100644
index 40701dd61..000000000
--- a/src/components/features.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-
-export const Features = (props) => {
- return (
-
+
+ );
+};
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 000000000..f3e04f346
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const Footer = () => {
+
+ return (
+
+ );
+};
diff --git a/src/components/gallery.jsx b/src/components/gallery.jsx
deleted file mode 100644
index 697336f11..000000000
--- a/src/components/gallery.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Image } from "./image";
-import React from "react";
-
-export const Gallery = (props) => {
- return (
-
+
+ );
+};
diff --git a/src/components/header.jsx b/src/components/header.jsx
deleted file mode 100644
index c834357b0..000000000
--- a/src/components/header.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-
-export const Header = (props) => {
- return (
-
-
- );
-};
diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 000000000..fb6ca773a
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+export const Header = ({ data }) => {
+ return (
+
+
+ );
+};
diff --git a/src/components/image.jsx b/src/components/image.jsx
deleted file mode 100644
index dd87322fc..000000000
--- a/src/components/image.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-export const Image = ({ title, largeImage, smallImage }) => {
- return (
-
+
+ );
+};
diff --git a/src/components/testimonials.jsx b/src/components/testimonials.jsx
deleted file mode 100644
index 3d001c16b..000000000
--- a/src/components/testimonials.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-export const Testimonials = (props) => {
- return (
-
+
+ );
+};
diff --git a/src/css/base.css b/src/css/base.css
new file mode 100644
index 000000000..8ab6240c2
--- /dev/null
+++ b/src/css/base.css
@@ -0,0 +1,363 @@
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+h4 {
+ font-family: "Raleway", sans-serif;
+ font-weight: 600;
+ position: relative;
+}
+
+h1 {
+ font-size: 5.125rem;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
+h2 {
+ font-size: 2.25rem;
+ font-weight: 800;
+ text-transform: uppercase;
+}
+
+h3 {
+ font-size: 1.5rem;
+}
+
+h4 {
+ font-size: 1.125rem;
+}
+
+section {
+ padding: 6.25rem 0;
+ background: var(--bs-body-bg);
+
+ &.section-gray {
+ background: var(--bs-secondary-bg);
+ }
+
+ &.section-gradient {
+ background: var(--gradient);
+ color: var(--bs-light);
+ }
+
+ .section-title {
+ position: relative;
+ margin-bottom: 50px;
+ padding-bottom: 15px;
+
+ &::after {
+ position: absolute;
+ content: "";
+ background: var(--gradient);
+ height: 4px;
+ width: 60px;
+ bottom: 0;
+ margin-left: -30px;
+ left: 50%;
+ }
+ }
+}
+
+.btn-custom {
+ background-color: #5ca9fb;
+ background-image: var(--gradient);
+ border-radius: 5rem;
+ border: none;
+ color: var(--bs-light);
+ letter-spacing: 0.1rem;
+ text-transform: uppercase;
+ transition: all 0.5s linear;
+
+ &:active,
+ &:hover,
+ &:focus {
+ background-image: none;
+ background-color: #6372ff;
+ }
+}
+
+/* Navigation */
+#menu {
+ &.navbar {
+ padding: 1.5rem;
+ box-shadow: var(--bs-box-shadow);
+ width: 100vw;
+ }
+
+ .navbar-brand {
+ font-family: "Raleway", sans-serif;
+ font-size: 1.5rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ }
+
+ &.navbar .navbar-nav>li>a {
+ font-family: "Lato", sans-serif;
+ text-transform: uppercase;
+ font-size: 1rem;
+ position: relative;
+ }
+
+ &.navbar .navbar-nav>li>a:after {
+ display: block;
+ position: absolute;
+ left: 0;
+ bottom: -1px;
+ width: 0;
+ height: 2px;
+ background: var(--gradient);
+ content: "";
+ transition: width 0.2s;
+ }
+
+ &.navbar .navbar-nav>li>a:hover:after {
+ width: 100%;
+ }
+
+ &.navbar .navbar-toggler:hover,
+ &.navbar .navbar-toggler:focus {
+ border-color: var(--bs-primary);
+ box-shadow: none;
+ }
+
+ &.navbar .navbar-collapse {
+ flex-grow: 0;
+ }
+}
+
+/* Header Section */
+#header {
+ color: var(--bs-light);
+
+ .intro {
+ color: var(--bs-light);
+ display: table;
+ width: 100%;
+ padding: 0;
+ background-size: cover;
+ background-position: center;
+ }
+
+ img {
+ width: 99vw;
+ height: 100vh;
+ object-fit: cover;
+ }
+
+ .overlay {
+ background: rgba(0, 0, 0, 0.2);
+ }
+
+ .intro-text {
+ padding-top: 240px;
+ padding-bottom: 100px;
+ text-align: center;
+ }
+
+ h1 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ }
+
+ p {
+ line-height: 30px;
+ margin: 0 auto;
+ margin-bottom: 60px;
+ }
+}
+
+/* Features Section */
+#features {
+ i {
+ align-items: center;
+ background: var(--gradient);
+ border-radius: 50%;
+ box-shadow: var(--bs-box-shadow);
+ color: var(--bs-light);
+ display: flex;
+ justify-content: center;
+ margin: 0 auto 2.5rem;
+ width: 6.25rem;
+ height: 6.25rem;
+ }
+}
+
+/* About Section */
+#about {
+ li {
+ padding: 0 1rem;
+ white-space: nowrap;
+
+ &::marker {
+ content: "\f00c";
+ font-family: "FontAwesome";
+ color: var(--bs-primary);
+ }
+ }
+
+ p {
+ margin: 30px 0;
+ }
+}
+
+/* Services Section */
+#services {
+ p {
+ color: rgba(255, 255, 255, 0.75);
+ margin-bottom: 3.125rem;
+ }
+
+ i {
+ align-items: center;
+ background: var(--gradient);
+ border-radius: 50%;
+ box-shadow: var(--bs-box-shadow);
+ color: var(--bs-light);
+ display: flex;
+ justify-content: center;
+ margin: 0 auto 2.5rem;
+ width: 6.25rem;
+ height: 6.25rem;
+ }
+
+ .service-desc {
+ margin: 2.5rem 0.625rem;
+ }
+}
+
+/* Portfolio Section */
+#portfolio {
+ .portfolio-item {
+
+ .hover-bg {
+ position: relative;
+ display: block;
+
+ .hover-text {
+ background: var(--gradient);
+ color: var(--bs-light);
+ height: 100%;
+ letter-spacing: 0.0625rem;
+ opacity: 0;
+ position: absolute;
+ text-align: center;
+ text-transform: uppercase;
+ transition: all 0.5s;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &:hover .hover-text {
+ opacity: 0.8;
+ }
+
+ }
+ }
+}
+
+/* Testimonials Section */
+#testimonials {
+ .testimonial {
+ position: relative;
+ padding: 20px;
+ }
+
+ .testimonial-image {
+ float: left;
+ margin-right: 15px;
+
+ img {
+ border-radius: 50%;
+ }
+ }
+
+ .testimonial-content {
+ position: relative;
+ overflow: hidden;
+
+ p {
+ margin-bottom: 0;
+ font-size: 14px;
+ font-style: italic;
+ }
+ }
+
+ .testimonial-meta {
+ margin-top: 10px;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--bs-secondary);
+ }
+}
+
+/* Team Section */
+#team {
+ figcaption {
+ padding: 0.625rem 0 0;
+ color: var(--bs-secondary);
+ }
+}
+
+/* Contact Section */
+#contact {
+ .text-danger {
+ color: var(--bs-danger);
+ text-align: left;
+ }
+
+ .contact-item {
+ span {
+ display: block;
+ }
+
+ i {
+ margin-right: 0.625rem;
+ }
+ }
+
+ .social {
+ border-top: 0.0625px solid rgba(255, 255, 255, 0.15);
+ margin-top: 3.125rem;
+ padding-top: 3.125rem;
+ text-align: center;
+
+ ul li {
+ display: inline-block;
+ margin: 0 1.25rem;
+
+ a {
+ align-items: center;
+ border-radius: 50%;
+ border: 0.0625px solid var(--bs-light);
+ color: var(--bs-light);
+ display: flex;
+ height: 3rem;
+ justify-content: center;
+ text-decoration: none;
+ transition: all 0.3s;
+ width: 3rem;
+
+ &:hover {
+ background: var(--bs-light);
+ color: var(--bs-primary);
+ }
+ }
+ }
+ }
+}
+
+/* Footer Section*/
+#footer {
+ padding: 1.8rem 0;
+ font-size: 0.8rem;
+}
\ No newline at end of file
diff --git a/src/css/index.css b/src/css/index.css
new file mode 100644
index 000000000..5df4b9961
--- /dev/null
+++ b/src/css/index.css
@@ -0,0 +1,4 @@
+/* Don't waste the the order */
+@import "./vendor";
+@import "./variables";
+@import "./base";
diff --git a/src/css/variables.css b/src/css/variables.css
new file mode 100644
index 000000000..b60cd384a
--- /dev/null
+++ b/src/css/variables.css
@@ -0,0 +1,32 @@
+:root {
+ --bs-body-font-family: "Open Sans", sans-serif;
+ --bs-body-font-weight: 400;
+ --bs-heading-color: inherit;
+}
+
+:root[data-bs-theme=light] {
+ --bs-body-color: #212529;
+ --bs-box-shadow: 0 0.5rem 1rem #00000026;
+ --bs-dark: #212529;
+ --bs-emphasis-color: #212529;
+ --bs-light: #F8F9FA;
+ --bs-link-color-rgb: 96, 141, 253;
+ --bs-link-color: #5CA9FB;
+ --bs-primary: #5CA9FB;
+ --gradient: linear-gradient(to right, #6372FF 0%, #5CA9FB 100%);
+ --bs-secondary: #6C757D;
+}
+
+
+:root[data-bs-theme=dark] {
+ --bs-body-color: #DEE2E6;
+ --bs-box-shadow: 0 0.5rem 1rem #00000026;
+ --bs-dark: #212529;
+ --bs-emphasis-color: #212529;
+ --bs-light: #F8F9FA;
+ --bs-link-color-rgb: 96, 141, 253;
+ --bs-link-color: #5CA9FB;
+ --bs-primary: #5CA9FB;
+ --gradient: linear-gradient(to right, #6372FF 0%, #5CA9FB 100%);
+ --bs-secondary: #6C757D;
+}
\ No newline at end of file
diff --git a/src/css/vendor.css b/src/css/vendor.css
new file mode 100644
index 000000000..3803deb36
--- /dev/null
+++ b/src/css/vendor.css
@@ -0,0 +1,5 @@
+@import url('//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css');
+@import url('//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
+@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
+@import url('//fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900');
+@import url('//fonts.googleapis.com/css?family=Lato:400,700');
diff --git a/src/data/data.json b/src/data/data.json
index 4055cd61a..ebf79c261 100644
--- a/src/data/data.json
+++ b/src/data/data.json
@@ -21,132 +21,132 @@
"Gallery": [
{
"title": "Project Title",
- "largeImage": "img/portfolio/01-large.jpg",
- "smallImage": "img/portfolio/01-small.jpg"
+ "largeImage": "assets/img/portfolio/01-large.jpg",
+ "smallImage": "assets/img/portfolio/01-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/02-large.jpg",
- "smallImage": "img/portfolio/02-small.jpg"
+ "largeImage": "assets/img/portfolio/02-large.jpg",
+ "smallImage": "assets/img/portfolio/02-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/03-large.jpg",
- "smallImage": "img/portfolio/03-small.jpg"
+ "largeImage": "assets/img/portfolio/03-large.jpg",
+ "smallImage": "assets/img/portfolio/03-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/04-large.jpg",
- "smallImage": "img/portfolio/04-small.jpg"
+ "largeImage": "assets/img/portfolio/04-large.jpg",
+ "smallImage": "assets/img/portfolio/04-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/05-large.jpg",
- "smallImage": "img/portfolio/05-small.jpg"
+ "largeImage": "assets/img/portfolio/05-large.jpg",
+ "smallImage": "assets/img/portfolio/05-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/06-large.jpg",
- "smallImage": "img/portfolio/06-small.jpg"
+ "largeImage": "assets/img/portfolio/06-large.jpg",
+ "smallImage": "assets/img/portfolio/06-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/07-large.jpg",
- "smallImage": "img/portfolio/07-small.jpg"
+ "largeImage": "assets/img/portfolio/07-large.jpg",
+ "smallImage": "assets/img/portfolio/07-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/08-large.jpg",
- "smallImage": "img/portfolio/08-small.jpg"
+ "largeImage": "assets/img/portfolio/08-large.jpg",
+ "smallImage": "assets/img/portfolio/08-small.jpg"
},
{
"title": "Project Title",
- "largeImage": "img/portfolio/09-large.jpg",
- "smallImage": "img/portfolio/09-small.jpg"
+ "largeImage": "assets/img/portfolio/09-large.jpg",
+ "smallImage": "assets/img/portfolio/09-small.jpg"
}
],
"Services": [
{
- "icon": "fa fa-wordpress",
+ "icon": "fa-solid fa-blog",
"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",
+ "icon": "fa-solid 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",
+ "icon": "fa-solid 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",
+ "icon": "fa-solid 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",
+ "icon": "fa-solid 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",
+ "icon": "fa-solid 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.\"",
+ "img": "assets/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.\"",
+ "img": "assets/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.\"",
+ "img": "assets/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.\"",
+ "img": "assets/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.\"",
+ "img": "assets/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.\"",
+ "img": "assets/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",
+ "img": "assets/img/team/01.jpg",
"name": "John Doe",
"job": "Director"
},
{
- "img": "img/team/02.jpg",
+ "img": "assets/img/team/02.jpg",
"name": "Mike Doe",
"job": "Senior Designer"
},
{
- "img": "img/team/03.jpg",
+ "img": "assets/img/team/03.jpg",
"name": "Jane Doe",
"job": "Senior Designer"
},
{
- "img": "img/team/04.jpg",
+ "img": "assets/img/team/04.jpg",
"name": "Karen Doe",
"job": "Project Manager"
}
@@ -161,22 +161,22 @@
},
"Features": [
{
- "icon": "fa fa-comments-o",
+ "icon": "fa-solid fa-comments",
"title": "Lorem ipsum",
"text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
},
{
- "icon": "fa fa-bullhorn",
+ "icon": "fa-solid 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",
+ "icon": "fa-solid fa-user-group",
"title": "Lorem ipsum",
"text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
},
{
- "icon": "fa fa-magic",
+ "icon": "fa-solid fa-magic",
"title": "Lorem ipsum",
"text": "Lorem ipsum dolor sit amet placerat facilisis felis mi in tempus eleifend pellentesque natoque etiam."
}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8c..000000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-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;
-}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index f5185c1ec..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(
-
- ,
- document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 000000000..6ee85f585
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,18 @@
+import React, { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import '@/css/index.css';
+
+const root = document.getElementById('root');
+
+if (!root) {
+ throw new Error('Could not find root element!');
+}
+
+const rootElement = createElement(() => {
+ return (
+
-
- );
-};
-
-export default App;
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 000000000..8d9979d89
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,33 @@
+import React 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 { Footer } from "./components/footer";
+
+import Data from "./data/data.json";
+
+const App = () => {
+
+ return (
+ <>
+
-
- );
-};
diff --git a/src/components/Team.tsx b/src/components/Team.tsx
new file mode 100644
index 000000000..8c2c563de
--- /dev/null
+++ b/src/components/Team.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export const Team = ({ data }) => {
+ return (
+
-
-
-
- Meet the Team
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed - dapibus leonec. -
-
- {props.data
- ? props.data.map((d, i) => (
-
-
-
- ))
- : "loading"}
-
- {" "}
- 
-
-
-
- {d.name}
-{d.job}
-
+
+ Meet the Team
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed + dapibus leonec. +
+
+ {data.map(({ name, job, img }, i) => (
+
+
+
+ {" "}
+ 
+
+
+
+
+ ))}
+ {name}
+{job}
+
-
- );
-};
diff --git a/src/components/about.tsx b/src/components/about.tsx
new file mode 100644
index 000000000..cbec28da5
--- /dev/null
+++ b/src/components/about.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+export const About = ({ data }) => {
+ return (
+
-
-
-
-
- {" "}
- 
{" "}
-
- {" "}
-
-
-
-
- About Us
-{props.data ? props.data.paragraph : "loading..."}
-Why Choose Us?
-
-
-
-
- -
- {props.data
- ? props.data.Why.map((d, i) => (
-
- {d} - )) - : "loading"} -
-
- -
- {props.data
- ? props.data.Why2.map((d, i) => (
-
- {d} - )) - : "loading"} -
+
+
+ 
+
+
+
+
+ About Us
+Why Choose Us?
+
+
+
+
+ -
+ {data.Why.map((d, i) => (
+
- {d} + ))} +
+
+ -
+ {data.Why2.map((d, i) => (
+
- {d} + ))} +
-
- );
-};
diff --git a/src/components/contact.tsx b/src/components/contact.tsx
new file mode 100644
index 000000000..f204c9aae
--- /dev/null
+++ b/src/components/contact.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import emailjs from '@emailjs/browser';
+
+const initialState = {
+ name: '',
+ email: '',
+ message: '',
+};
+
+export const Contact = ({ data }) => {
+ const [{ name, email, message }, setState] = useState(initialState);
+
+ const handleChange = ({ target }) => {
+ const { name, value } = target;
+ setState((prevState) => ({ ...prevState, [name]: value }));
+ };
+ const clearState = () => setState({ ...initialState });
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ emailjs
+ .sendForm(process.env.EMAILJS_SERVICE_ID!, process.env.EMAILJS_TEMPLATE_ID!, e.target, process.env.EMAILJS_PUBLIC_KEY!)
+ .then(
+ (result) => {
+ clearState();
+ },
+ ({ text }) => {
+ console.error(text);
+ }
+ );
+ };
+
+ return (
+ <>
+
-
-
-
-
-
-
-
-
-
-
-
- Get In Touch
-- Please fill out the form below to send us an email and we will - get back to you as soon as possible. -
-
-
-
-
-
- Contact Info
-- - Address - - {props.data ? props.data.address : "loading"} -
-
-
- - - Phone - {" "} - {props.data ? props.data.phone : "loading"} -
-
-
- - - Email - {" "} - {props.data ? props.data.email : "loading"} -
-
+
+ Get In Touch
++ Please fill out the form below to send us an email and we will + get back to you as soon as possible. +
+ +
-
- );
-};
diff --git a/src/components/features.tsx b/src/components/features.tsx
new file mode 100644
index 000000000..4ee200429
--- /dev/null
+++ b/src/components/features.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const Features = ({ data }) => {
+ return (
+
-
-
-
- Features
-
- {props.data
- ? props.data.map((d, i) => (
-
-
- {" "}
-
-
- ))
- : "Loading..."}
- {d.title}
-{d.text}
-
+
+ Features
+
+ {data.map(({ title, text, icon }, i) => (
+
+
+
+
+ ))}
+ {title}
+{text}
+
-
- );
-};
diff --git a/src/components/gallery.tsx b/src/components/gallery.tsx
new file mode 100644
index 000000000..4b299a659
--- /dev/null
+++ b/src/components/gallery.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Image } from './image';
+
+export const Gallery = ({ data }) => {
+ return (
+
-
-
-
- Gallery
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed - dapibus leonec. -
-
-
-
- {props.data
- ? props.data.map((d, i) => (
-
-
-
- ))
- : "Loading..."}
-
+
+ Portfolio
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed + dapibus leonec. +
+
+ {data.map(({ title, largeImage, smallImage }, i) => (
+
+
+
+ ))}
+
-
-
-
-
-
-
-
-
-
- - {props.data ? props.data.title : "Loading"} - -
-{props.data ? props.data.paragraph : "Loading"}
- - Learn More - {" "} -
+
+
+
+
+
+
+
+
+
-
- );
-};
diff --git a/src/components/image.tsx b/src/components/image.tsx
new file mode 100644
index 000000000..843125c70
--- /dev/null
+++ b/src/components/image.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Image = ({ title, largeImage, smallImage }) => {
+ return (
+
- {" "}
-
- 
{" "}
- {" "}
-
-
-
- {title}
-
+
+
+
+
+ );
+};
diff --git a/src/components/navigation.jsx b/src/components/navigation.jsx
deleted file mode 100644
index 73c0033a3..000000000
--- a/src/components/navigation.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-
-export const Navigation = (props) => {
- return (
-
- );
-};
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
new file mode 100644
index 000000000..15d38dbff
--- /dev/null
+++ b/src/components/navigation.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+
+export const Navigation = () => {
+
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggleNavbar = () => {
+ setIsOpen(!isOpen);
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/services.jsx b/src/components/services.jsx
deleted file mode 100644
index c60e1bfcc..000000000
--- a/src/components/services.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-export const Services = (props) => {
- return (
- {title}
+
-
- );
-};
diff --git a/src/components/services.tsx b/src/components/services.tsx
new file mode 100644
index 000000000..8cf9f040a
--- /dev/null
+++ b/src/components/services.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export const Services = ({ data }) => {
+ return (
+
-
-
-
- Our Services
-- Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed - dapibus leonec. -
-
- {props.data
- ? props.data.map((d, i) => (
-
-
- {" "}
-
-
- ))
- : "loading"}
-
-
- {d.name}
-{d.text}
-
+
+ Our Services
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit duis sed + dapibus leonec. +
+
+ {data.map(({ name, text, icon }, i) => (
+
+
+
+
+ ))}
+
+
+ {name}
+{text}
+
-
- );
-};
diff --git a/src/components/testimonials.tsx b/src/components/testimonials.tsx
new file mode 100644
index 000000000..18c63e9e6
--- /dev/null
+++ b/src/components/testimonials.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+export const Testimonials = ({ data }) => {
+ return (
+
-
-
-
- What our clients say
-
- {props.data
- ? props.data.map((d, i) => (
-
-
-
- ))
- : "loading"}
-
-
-
- {" "}
- {" "}
-
-
-
- "{d.text}"
- - {d.name}
-
+
+ What our clients say
+
+ {data.map(({ name, img, text }, i) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ "{text}"
+ - {name}
+