Commit 1503b2c4 authored by EnesKarakas's avatar EnesKarakas
Browse files

React, Lets go!

parent 39acfa69
......@@ -31,3 +31,6 @@ build/
### VS Code ###
.vscode/
### Node Modules ###
frontend/node_modules
module.exports = {
reactScriptsVersion: "react-scripts",
style: {
css: {
loaderOptions: () => {
return {
url: false,
};
},
},
},
};
\ No newline at end of file
This diff is collapsed.
{
"name": "weather-app",
"version": "1.0.0",
"private": true,
"dependencies": {
"prop-types": "15.7.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
"react-router-dom": "^5.2.0"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test --env=jsdom",
"eject": "craco eject"
},
"engines": {
"node": "18.x"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@craco/craco": "^7.1.0",
"react-scripts": "^5.0.1"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flat Dizzy Grasshopper</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta property="twitter:card" content="summary_large_image" />
<style data-tag="reset-style-sheet">
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6,figure,blockquote,figcaption { margin: 0; padding: 0;}button { background-color: transparent;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
</style>
<style data-tag="default-style-sheet">
html {
font-family: Inter Tight;
font-size: 16px;
}
body {
font-weight: 400;
font-style:normal;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
line-height: 1.15;
color: var(--dl-color-theme-neutral-dark);
background-color: var(--dl-color-theme-neutral-light);
fill: var(--dl-color-theme-neutral-dark);
}
</style>
<link
rel="stylesheet"
href="https://unpkg.com/animate.css@4.1.1/animate.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://unpkg.com/@teleporthq/teleport-custom-scripts/dist/style.css"
/>
</head>
<body>
<div id="app"></div>
<script
defer
src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
></script>
</body>
</html>
.contact4-contact20 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.contact4-max-width {
gap: var(--dl-space-space-twounits);
display: flex;
align-items: center;
flex-direction: column;
}
.contact4-section-title {
gap: var(--dl-space-space-unit);
width: auto;
display: flex;
max-width: 800px;
align-self: flex-start;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
}
.contact4-content {
gap: var(--dl-space-space-halfunit);
display: flex;
align-items: flex-start;
flex-direction: column;
}
.contact4-text2 {
text-align: center;
}
.contact4-row {
gap: 48px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-shrink: 0;
}
.contact4-content1 {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
width: auto;
display: flex;
flex-grow: 1;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
}
.contact4-contact-info {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.contact4-content2 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.contact4-text3 {
align-self: flex-start;
text-align: center;
}
.contact4-text4 {
align-self: flex-start;
text-align: left;
}
.contact4-email {
align-self: flex-start;
text-align: center;
}
.contact4-content3 {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
width: auto;
display: flex;
align-items: center;
flex-shrink: 0;
flex-direction: column;
}
.contact4-icon2 {
align-self: flex-start;
}
.contact4-contact-info1 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.contact4-content4 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.contact4-text5 {
align-self: stretch;
text-align: left;
}
.contact4-text6 {
text-align: left;
}
.contact4-phone {
align-self: flex-start;
text-align: center;
}
.contact4-content5 {
gap: var(--dl-space-space-oneandhalfunits);
flex: 1;
width: auto;
display: flex;
align-items: center;
flex-shrink: 0;
flex-direction: column;
}
.contact4-icon4 {
align-self: flex-start;
}
.contact4-contact-info2 {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.contact4-content6 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.contact4-text7 {
align-self: flex-start;
text-align: left;
}
.contact4-text8 {
text-align: left;
}
.contact4-address {
align-self: flex-start;
text-align: left;
}
@media(max-width: 767px) {
.contact4-row {
flex-direction: column;
}
}
import React from 'react'
import PropTypes from 'prop-types'
import './contact4.css'
const Contact4 = (props) => {
return (
<div className="contact4-contact20 thq-section-padding">
<div className="contact4-max-width thq-section-max-width">
<div className="contact4-section-title">
<span className="thq-body-small">{props.content2}</span>
<div className="contact4-content">
<h2 className="thq-heading-2">{props.heading1}</h2>
<p className="contact4-text2 thq-body-large">{props.content1}</p>
</div>
</div>
<div className="contact4-row">
<div className="contact4-content1">
<svg viewBox="0 0 1024 1024" className="thq-icon-medium">
<path d="M854 342v-86l-342 214-342-214v86l342 212zM854 170q34 0 59 26t25 60v512q0 34-25 60t-59 26h-684q-34 0-59-26t-25-60v-512q0-34 25-60t59-26h684z"></path>
</svg>
<div className="contact4-contact-info">
<div className="contact4-content2">
<h3 className="contact4-text3 thq-heading-3">Email</h3>
<p className="contact4-text4 thq-body-large">
{props.content3}
</p>
</div>
<span className="contact4-email thq-body-small">
{props.email1}
</span>
</div>
</div>
<div className="contact4-content3">
<svg
viewBox="0 0 1024 1024"
className="contact4-icon2 thq-icon-medium"
>
<path d="M282 460q96 186 282 282l94-94q20-20 44-10 72 24 152 24 18 0 30 12t12 30v150q0 18-12 30t-30 12q-300 0-513-213t-213-513q0-18 12-30t30-12h150q18 0 30 12t12 30q0 80 24 152 8 26-10 44z"></path>
</svg>
<div className="contact4-contact-info1">
<div className="contact4-content4">
<h3 className="contact4-text5 thq-heading-3">Phone</h3>
<p className="contact4-text6 thq-body-large">
{props.content4}
</p>
</div>
<span className="contact4-phone thq-body-small">
{props.phone1}
</span>
</div>
</div>
<div className="contact4-content5">
<svg
viewBox="0 0 1024 1024"
className="contact4-icon4 thq-icon-medium"
>
<path d="M512 0c-176.732 0-320 143.268-320 320 0 320 320 704 320 704s320-384 320-704c0-176.732-143.27-320-320-320zM512 512c-106.040 0-192-85.96-192-192s85.96-192 192-192 192 85.96 192 192-85.96 192-192 192z"></path>
</svg>
<div className="contact4-contact-info2">
<div className="contact4-content6">
<h3 className="contact4-text7 thq-heading-3">Office</h3>
<p className="contact4-text8 thq-body-large">
{props.content5}
</p>
</div>
<span className="contact4-address thq-body-small">
{props.address1}
</span>
</div>
</div>
</div>
</div>
</div>
)
}
Contact4.defaultProps = {
email1: 'info@weatherapp.com',
content2: 'Get in touch with us today!',
address1: '123 Weather Street, City, Country',
heading1: 'Contact Us',
content1: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
phone1: '+123-456-7890',
content3:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
content4:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
content5:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.',
}
Contact4.propTypes = {
email1: PropTypes.string,
content2: PropTypes.string,
address1: PropTypes.string,
heading1: PropTypes.string,
content1: PropTypes.string,
phone1: PropTypes.string,
content3: PropTypes.string,
content4: PropTypes.string,
content5: PropTypes.string,
}
export default Contact4
.cta1-container {
gap: var(--dl-space-space-threeunits);
display: flex;
overflow: hidden;
position: relative;
flex-direction: column;
}
.cta1-max-width {
width: 100%;
display: flex;
max-width: var(--dl-size-size-maxwidth);
align-items: center;
flex-direction: column;
}
.cta1-content {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.cta1-heading1 {
text-align: center;
}
.cta1-content1 {
text-align: center;
}
.cta1-actions {
gap: var(--dl-space-space-oneandhalfunits);
display: flex;
align-items: flex-start;
}
.cta1-action1 {
text-align: center;
}
.cta1-action2 {
text-align: center;
}
@media(max-width: 479px) {
.cta1-actions {
width: 100%;
flex-direction: column;
}
.cta1-button {
width: 100%;
}
.cta1-button1 {
width: 100%;
}
}
import React from 'react'
import PropTypes from 'prop-types'
import './cta1.css'
const CTA1 = (props) => {
return (
<div className="cta1-container thq-section-padding">
<div className="cta1-max-width thq-section-max-width">
<div className="cta1-content">
<h2 className="cta1-heading1 thq-heading-2">{props.heading1}</h2>
<p className="cta1-content1 thq-body-large">{props.content1}</p>
<div className="cta1-actions">
<button className="thq-button-filled cta1-button">
<span className="cta1-action1 thq-body-small">
{props.action1}
</span>
</button>
<button className="thq-button-outline cta1-button1">
<span className="cta1-action2 thq-body-small">
{props.action2}
</span>
</button>
</div>
</div>
</div>
</div>
)
}
CTA1.defaultProps = {
action1: 'Get Weather Updates',
heading1: 'Plan Your Day with Accurate Weather Forecasts',
content1:
'Stay informed about the weather conditions in your city or any location worldwide.',
action2: 'Try Now',
}
CTA1.propTypes = {
action1: PropTypes.string,
heading1: PropTypes.string,
content1: PropTypes.string,
action2: PropTypes.string,
}
export default CTA1
.faq1-faq7 {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
flex-direction: column;
}
.faq1-max-width {
gap: var(--dl-space-space-fiveunits);
display: flex;
align-items: center;
flex-direction: column;
}
.faq1-text1 {
text-align: center;
}
.faq1-list-item1 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq1-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item2 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq2-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item3 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq3-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item4 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq4-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-list-item5 {
display: flex;
align-self: stretch;
align-items: flex-start;
flex-direction: column;
}
.faq1-faq5-question {
font-style: normal;
text-align: center;
font-weight: 600;
}
.faq1-content1 {
gap: 16px;
display: flex;
align-self: stretch;
align-items: center;
flex-direction: column;
}
.faq1-text3 {
text-align: center;
}
.faq1-container {
display: flex;
position: relative;
}
@media(max-width: 991px) {
.faq1-max-width {
gap: var(--dl-space-space-oneandhalfunits);
}
}
@media(max-width: 767px) {
.faq1-text1 {
text-align: left;
}
.faq1-list {
gap: var(--dl-space-space-twounits);
}
.faq1-button {
width: 100%;
}
}
import React from 'react'
import PropTypes from 'prop-types'
import './faq1.css'
const FAQ1 = (props) => {
return (
<div className="faq1-faq7 thq-section-padding">
<div className="