mikhail_lanskikh/graff.event
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Lanskikh
2024-09-25 18:45:32 +05:00
parent 104f9ec6df
commit 05a48a5f55
5 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -22,7 +22,7 @@
<meta property="og:url" content="https://graff.events" />
<meta
property="og:image"
content="https://graff.events/images/promotion/exhibitions/1.png"
content="https://graff.events/images/promotion/exhibitions/1.jpg"
/>
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="200" />
src/components/Contacts.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export function Contacts() {
return (
<div
id="contacts"
className="lg:px-6 px-4 sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px]"
className="lg:px-6 px-4 sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px] max-sm:scroll-m-14"
>
<h2 className="font-medium lg:col-span-7 sm:col-span-full h2 max-lg:mb-6">
Хотите интерактивное решение для выставки?
src/components/Devices.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ export function Devices() {
return (
<div
id="devices"
className="space-y-8 scroll-m-14 lg:scroll-m-20 sm:space-y-10 lg:space-y-20 lg:pt-[180px] sm:pt-[140px] pt-20"
className="space-y-8 scroll-m-14 lg:scroll-m-20 sm:space-y-10 lg:space-y-32 lg:pt-[180px] sm:pt-[140px] pt-20"
>
<Title>
Работаем с
@@ -90,7 +90,7 @@ function DesktopDevice({
<motion.img
src={img}
alt={title}
className="bottom-0 right-[calc(144/1552*100%)] w-[calc(560/1552*100%)] max-w-[560px] absolute"
className="bottom-0 right-[calc(70/1552*100%)] w-[calc(560/1552*100%)] max-w-[768px] absolute"
initial={{ opacity: 0, y: 500 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 100 }}
src/components/Form.tsx
+5 -5
View File
@@ -12,8 +12,8 @@ export function Form() {
<div className="relative max-lg:flex items-center gap-x-[35px]">
<FeedbackForm />
<div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_15s_linear_infinite]">
<div className="relative lg:w-[calc(512/1600*100vw)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 origin-center">
<div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute">
<div className="relative lg:w-[min(calc(512/1600*100vw),768px)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 origin-center">
<div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute">
<img
src="/images/form/1_1.jpg"
alt="Виртуальные выставки и метавселенные"
@@ -25,7 +25,7 @@ export function Form() {
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
/>
</div>
<div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45">
<div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45">
<img
src="/images/form/2_1.jpg"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
@@ -37,7 +37,7 @@ export function Form() {
alt="ЖК «Upside Towers»"
/>
</div>
<div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90">
<div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90">
<div className="-rotate-90">
<img
src="/images/form/3_1.jpg"
@@ -53,7 +53,7 @@ export function Form() {
/>
</div>
</div>
<div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]">
<div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]">
<div className="-rotate-90">
<img
src="/images/form/4_1.jpg"
src/components/Promotion.tsx
+25 -9
View File
@@ -7,6 +7,7 @@ import { hashes } from '../consts/motivationHashes';
import { ChevronUpIcon } from './icons/ChevronUpIcon';
import { ChevronDownIcon } from './icons/ChevronDownIcon';
import { useWindowWidth } from '../hooks/useWindowWidth';
import { useOnClickOutside } from 'usehooks-ts';
export function Promotion() {
const width = useWindowWidth();
@@ -63,9 +64,12 @@ function DesktopPromotionFeature({
const width = useWindowWidth();
const [expanded, setExpanded] = useState(false);
const [animationing, setAnimationing] = useState(false);
const inView = useInView(ref);
useOnClickOutside(ref, () => setExpanded(false));
useEffect(
() => setExpanded(hash.slice(1) === hashes.get(number)),
[hash, number],
@@ -78,16 +82,19 @@ function DesktopPromotionFeature({
return (
<div
id={hashes.get(number)}
onClick={() => setExpanded(prev => !prev)}
onClick={() => {
if (!animationing) {
setAnimationing(true);
setExpanded(prev => !prev);
}
}}
className="scroll-m-20 select-none py-7 border-t border-[#3D425C] cursor-pointer relative last:border-b bg-[url(/images/promotion/Ellipse.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all bg-no-repeat bg-top"
ref={ref}
>
<motion.div
className="flex justify-between gap-x-4 [clip-path:polygon(0%_0%,calc(100%-64px)_0%,calc(100%-64px)_calc(100%+28px),0%_calc(100%+28px))]"
transition={{ duration: 0.7 }}
animate={
expanded ? { height: 0.265 * width } : { height: 0.0875 * width }
}
animate={{ height: (expanded ? 0.265 : 0.0875) * width }}
>
<div className="max-w-[40vw] flex flex-col xl:gap-y-12 gap-y-6 justify-between h-full">
<p className="l-text text-[#52587A] font-medium">[0{number}]</p>
@@ -120,12 +127,12 @@ function DesktopPromotionFeature({
key={image}
src={image}
alt={title}
transition={{ duration: 0.5 }}
transition={{ duration: 1 }}
className="object-cover h-full pointer-events-none"
animate={{
maxHeight:
expanded && index === 0 ? 0.265 * width : 0.0875 * width,
maxHeight: (expanded && index === 0 ? 0.265 : 0.0875) * width,
}}
onAnimationComplete={() => setAnimationing(false)}
/>
</AnimatePresence>
))}
@@ -150,6 +157,7 @@ function PromotionFeature({
number: number;
}) {
const [expanded, setExpanded] = useState(false);
const [animationing, setAnimationing] = useState(false);
const { hash } = useLocation();
@@ -157,6 +165,8 @@ function PromotionFeature({
const inView = useInView(ref);
useOnClickOutside(ref, () => setExpanded(false));
useEffect(() => {
setExpanded(hash.slice(1) === hashes.get(number));
}, [hash, number]);
@@ -170,7 +180,12 @@ function PromotionFeature({
ref={ref}
id={hashes.get(number)}
className="scroll-m-14 relative select-none sm:py-4 py-2 sm:space-y-8 space-y-4 border-t border-[#3D425C] last:border-b flex flex-col justify-between"
onClick={() => setExpanded(prev => !prev)}
onClick={() => {
if (!animationing) {
setAnimationing(true);
setExpanded(prev => !prev);
}
}}
>
<div className="flex items-center justify-between gap-x-5">
<p className="font-medium h3">{title}</p>
@@ -182,7 +197,7 @@ function PromotionFeature({
{expanded && (
<motion.p
className="font-medium l-text"
transition={{ delay: 0.25 }}
transition={{ delay: 0.2 }}
initial={{ opacity: 0, y: 10 }}
animate={expanded ? { opacity: 0.6, y: 0 } : { opacity: 0, y: 10 }}
exit={{ opacity: 0, y: 10 }}
@@ -205,6 +220,7 @@ function PromotionFeature({
}
className={index > 0 ? 'max-sm:hidden' : ''}
key={image}
onAnimationComplete={() => setAnimationing(false)}
>
<img src={image} alt={title} className="w-full" />
</motion.div>