Reza_ashrafi
3 years ago
parent
6bef83dd46
commit
3038fae33d
22 changed files with 990 additions and 72 deletions
@ -0,0 +1,119 @@ |
|||||||
|
|
||||||
|
.Slider{ |
||||||
|
width: 100%; |
||||||
|
height: 80vh; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
z-index: 4; |
||||||
|
max-width: 1550px; |
||||||
|
@media screen and (min-width: 1551px) { |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
&-main-box { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
|
||||||
|
&-title { |
||||||
|
width: 80%; |
||||||
|
margin: 0 auto; |
||||||
|
font-size: 38px; |
||||||
|
color: #fff; |
||||||
|
font-family: Medium; |
||||||
|
} |
||||||
|
|
||||||
|
&-item-container { |
||||||
|
width: 80%; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 20px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
// direction: rtl; |
||||||
|
|
||||||
|
&-item { |
||||||
|
width: 32%; |
||||||
|
flex-shrink: 0; |
||||||
|
aspect-ratio: 1/0.85; |
||||||
|
border-radius: 21px; |
||||||
|
background-color: rgba($color: #fff, $alpha: 0.1); |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
margin-right: 2%; |
||||||
|
transition: all 1s; |
||||||
|
|
||||||
|
&-img-container { |
||||||
|
width: 100%; |
||||||
|
height: 70%; |
||||||
|
// background-color: rgb(253, 57, 178); |
||||||
|
} |
||||||
|
|
||||||
|
&-title { |
||||||
|
font-size: 24px; |
||||||
|
width: 100%; |
||||||
|
margin-top: 10px; |
||||||
|
font-family: Medium; |
||||||
|
color: #0080ff; |
||||||
|
} |
||||||
|
|
||||||
|
&-subtitle { |
||||||
|
width: 100%; |
||||||
|
font-size: 18px; |
||||||
|
margin-top: 10px; |
||||||
|
color: #fff; |
||||||
|
font-family: Thin; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-slider-btns { |
||||||
|
width: 80%; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 30px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
&-previous { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
color: #555; |
||||||
|
|
||||||
|
&-icon { |
||||||
|
// color: #fff; |
||||||
|
font-size: 25px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
&-text { |
||||||
|
font-size: 30px; |
||||||
|
font-family: Thin; |
||||||
|
// color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-next { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&-icon { |
||||||
|
color: #fff; |
||||||
|
font-size: 25px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
&-text { |
||||||
|
font-size: 30px; |
||||||
|
font-family: Thin; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
|
||||||
|
export const Textarea = ({ rows, value, onChange, name, placeholder }) => { |
||||||
|
return ( |
||||||
|
<textarea |
||||||
|
rows={rows} |
||||||
|
value={value} |
||||||
|
placeholder={placeholder} |
||||||
|
name={name} |
||||||
|
onChange={e => onChange(e.target.name, e.target.value)} |
||||||
|
className={`w-full outline-none border border-solid border-gray-200 focus:border-primary-7 focus:bg-secondary-9 bg-gray-50 rounded-lg placeholder:text-gray-400 focus:text-secondary-8 text-2x p-6 font-2`} |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({}); |
||||||
|
|
||||||
|
const mapDispatchToProps = {}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(Textarea); |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
import { useCallback, useRef, useState } from "react"; |
||||||
|
|
||||||
|
export const useLongPress = ( |
||||||
|
onLongPress, |
||||||
|
onClick, |
||||||
|
{ shouldPreventDefault = true, delay = 300 } = {} |
||||||
|
) => { |
||||||
|
const [longPressTriggered, setLongPressTriggered] = useState(false); |
||||||
|
const timeout = useRef(); |
||||||
|
const target = useRef(); |
||||||
|
|
||||||
|
const start = useCallback( |
||||||
|
(event) => { |
||||||
|
if (shouldPreventDefault && event.target) { |
||||||
|
event.target.addEventListener("touchend", preventDefault, { |
||||||
|
passive: false, |
||||||
|
}); |
||||||
|
target.current = event.target; |
||||||
|
} |
||||||
|
timeout.current = setTimeout(() => { |
||||||
|
onLongPress(event); |
||||||
|
setLongPressTriggered(true); |
||||||
|
}, delay); |
||||||
|
}, |
||||||
|
[onLongPress, delay, shouldPreventDefault] |
||||||
|
); |
||||||
|
|
||||||
|
const clear = useCallback( |
||||||
|
(event, shouldTriggerClick = true) => { |
||||||
|
timeout.current && clearTimeout(timeout.current); |
||||||
|
shouldTriggerClick && !longPressTriggered && onClick(); |
||||||
|
setLongPressTriggered(false); |
||||||
|
if (shouldPreventDefault && target.current) { |
||||||
|
target.current.removeEventListener("touchend", preventDefault); |
||||||
|
} |
||||||
|
}, |
||||||
|
[shouldPreventDefault, onClick, longPressTriggered] |
||||||
|
); |
||||||
|
|
||||||
|
return { |
||||||
|
onMouseDown: (e) => start(e), |
||||||
|
onTouchStart: (e) => start(e), |
||||||
|
onMouseUp: (e) => clear(e), |
||||||
|
onMouseLeave: (e) => clear(e, false), |
||||||
|
onTouchEnd: (e) => clear(e), |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
const isTouchEvent = (event) => { |
||||||
|
return "touches" in event; |
||||||
|
}; |
||||||
|
|
||||||
|
const preventDefault = (event) => { |
||||||
|
if (!isTouchEvent(event)) return; |
||||||
|
|
||||||
|
if (event.touches.length < 2 && event.preventDefault) { |
||||||
|
event.preventDefault(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
export default null; |
||||||
|
|
||||||
|
//sample of useLongPress
|
||||||
|
// import useLongPress from "./useLongPress";
|
||||||
|
|
||||||
|
// export default function App() {
|
||||||
|
|
||||||
|
// const onLongPress = () => {
|
||||||
|
// console.log('longpress is triggered');
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const onClick = () => {
|
||||||
|
// console.log('click is triggered')
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const defaultOptions = {
|
||||||
|
// shouldPreventDefault: true,
|
||||||
|
// delay: 500,
|
||||||
|
// };
|
||||||
|
// const longPressEvent = useLongPress(onLongPress, onClick, defaultOptions);
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div className="App">
|
||||||
|
// <button {...longPressEvent}>use Loooong Press</button>
|
||||||
|
// </div>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
@ -0,0 +1,11 @@ |
|||||||
|
|
||||||
|
class location { |
||||||
|
getId = () => { |
||||||
|
const pathname = window.location.pathname; |
||||||
|
return pathname.slice(pathname.lastIndexOf('/') + 1, pathname.length); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const _location = new location(); |
||||||
|
|
||||||
|
export default _location; |
||||||
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -1,19 +1,90 @@ |
|||||||
import React from "react"; |
import React from "react"; |
||||||
import { connect } from "react-redux"; |
import { connect } from "react-redux"; |
||||||
|
import { form } from "../../../../redux/actions"; |
||||||
|
import onInput from "../../../../utils/onInput"; |
||||||
|
|
||||||
export const Form = ({}) => { |
//components
|
||||||
|
import Input from "../../../../components/Input"; |
||||||
|
import Button from "../../../../components/Button"; |
||||||
|
import Textarea from "../../../../components/Textarea"; |
||||||
|
|
||||||
|
export const Form = ({ contact, setContact }) => { |
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className="w-full flex items-center justify-center bg-purple-100" |
className="w-10/12 flex flex-col items-center justify-around" |
||||||
style={{ height: "calc(100vh - 100vh / 10)" }} |
style={{ height: "calc(100vh - 100vh / 10)" }} |
||||||
> |
> |
||||||
Form |
<div className="flex flex-col items-center"> |
||||||
|
<strong className="text-primary-3 font-6 text-5x"> |
||||||
|
فرم درخواست سرویس{" "} |
||||||
|
</strong> |
||||||
|
<p className="text-2x font-4 text-gray-400 mt-3"> |
||||||
|
در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید{" "} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div className="flex w-full justify-between"> |
||||||
|
<div className="flex flex-col justify-center w-5/12"> |
||||||
|
<strong className="text-primary-7 font-4 text-4x">تماس با ما </strong> |
||||||
|
<strong className="text-black font-7 text-5x mt-2"> |
||||||
|
سلام |
||||||
|
<br /> بیاید با هم صحبت کنیم |
||||||
|
</strong> |
||||||
|
<strong className="text-black font-2 text-4x mt-4"> |
||||||
|
Info@Barnamenegar.com |
||||||
|
</strong> |
||||||
|
</div> |
||||||
|
<div className="h-full w-px bg-gray-200"></div> |
||||||
|
<form |
||||||
|
className="flex flex-col gap-6 items-end justify-center w-5/12" |
||||||
|
onSubmit={(e) => e.prevDefault()} |
||||||
|
> |
||||||
|
<Input |
||||||
|
placeholder="نام" |
||||||
|
name="name" |
||||||
|
value={contact.name} |
||||||
|
onChange={(name, value) => setContact({ name, value })} |
||||||
|
regex={(val) => val} |
||||||
|
/> |
||||||
|
<Input |
||||||
|
placeholder="ایمیل" |
||||||
|
name="email" |
||||||
|
value={contact.email} |
||||||
|
onChange={(name, value) => setContact({ name, value })} |
||||||
|
regex={(val) => val} |
||||||
|
/> |
||||||
|
<Input |
||||||
|
placeholder="زمینه فعالیت" |
||||||
|
name="job" |
||||||
|
value={contact.job} |
||||||
|
onChange={(name, value) => setContact({ name, value })} |
||||||
|
regex={(val) => val} |
||||||
|
/> |
||||||
|
<Textarea |
||||||
|
rows={4} |
||||||
|
name="message" |
||||||
|
value={contact.message} |
||||||
|
placeholder="پیام" |
||||||
|
onChange={(name, value) => setContact({ name, value })} |
||||||
|
/> |
||||||
|
<Button |
||||||
|
title="ارسال" |
||||||
|
backgroundColor="bg-primary-7" |
||||||
|
color="text-white" |
||||||
|
padding="py-4 px-20" |
||||||
|
round="rounded-lg" |
||||||
|
/> |
||||||
|
</form> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
const mapStateToProps = (state) => ({}); |
const mapStateToProps = (state) => ({ |
||||||
|
contact: state.form.contact, |
||||||
|
}); |
||||||
|
|
||||||
const mapDispatchToProps = {}; |
const mapDispatchToProps = { |
||||||
|
setContact: form.setContact, |
||||||
|
}; |
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(Form); |
export default connect(mapStateToProps, mapDispatchToProps)(Form); |
||||||
|
|||||||
Loading…
Reference in new issue