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

upd

Browse Source
This commit is contained in:
Lanskikh
2024-09-19 14:08:39 +05:00
parent 090a866175
commit 28adee3e5f
18 changed files with 472 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+3 -6
View File
@@ -6,17 +6,14 @@
<link rel="icon" type="image/svg+xml" href="/public/favicon.svg" />
<meta
name="keywords"
content="интерактивные,выставки,3D,графика,VR,AR,макеты,приложения,стенды"
content="интерактив,выставки,3D,графика,VR,AR,макеты,приложения,стенды"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Создаем интерактивные выставочные решения"
/>
<meta
property="og:title"
content="Graff.event - Интерактивные выставочные решения"
/>
<meta property="og:title" content="Интерактивные выставочные решения" />
<meta property="og:site_name" content="Интерактивные выставочные решения" />
<meta
property="og:description"
@@ -31,7 +28,7 @@
<meta property="og:image:height" content="200" />
<meta property="og:logo" content="https://graff.event/favicon.svg" />
<meta property="og:type" content="website" />
<title>Graff.event - Интерактивные выставочные решения</title>
<title>Интерактивные выставочные решения</title>
</head>
<body>
<div id="root"></div>
public/video/interactions/1.mp4
BIN
View File
Binary file not shown.
public/video/interactions/2.mp4
BIN
View File
Binary file not shown.
public/video/interactions/3.mp4
BIN
View File
Binary file not shown.
public/video/interactions/4.mp4
BIN
View File
Binary file not shown.
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:grid-rows-[repeat(min-content,2)] sm:grid-rows-[repeat(min-content,3)] 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]"
>
<h2 className="font-medium lg:col-span-7 sm:col-span-full h2 max-lg:mb-6">
Хотите использовать интерактивные тренажеры в обучении?
src/components/Devices.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ function Device({ title, description, img }: IDevice) {
exit={{ opacity: 0, transition: { delay: 0 } }}
transition={{ duration: 0.4 }}
src={img}
alt=""
alt={title}
/>
)}
</AnimatePresence>
src/components/Form.tsx
+12 -12
View File
@@ -16,12 +16,12 @@ export function Form() {
<div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute">
<img
src="/images/form/1_1.png"
alt=""
alt="Виртуальные выставки и метавселенные"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
/>
<img
src="/images/form/1_2.png"
alt=""
alt="Тренажер РЖД: ЭП2Д, Иволга, ЭП20, ТЭ33А, ТЭМ2"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
/>
</div>
@@ -29,43 +29,43 @@ export function Form() {
<img
src="/images/form/2_1.png"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
alt=""
alt="L 410 NG Aircraft"
/>
<img
src="/images/form/2_2.png"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
alt=""
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="-rotate-45">
<div className="-rotate-90">
<img
src="/images/form/3_1.png"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
alt=""
alt="Стенд GRAFF.estate на Всероссийском Жилищном конгрессе в Сочи"
/>
</div>
<div className="rotate-[135deg]">
<div className="-rotate-90">
<img
src="/images/form/3_2.png"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
alt=""
alt="Интерактивная презентация военного корабля"
/>
</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="rotate-90">
<div className="-rotate-90">
<img
src="/images/form/4_1.png"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
alt=""
alt="Симулятор погрузчика"
/>
</div>
<div className="rotate-45">
<div className="-rotate-[135deg]">
<img
src="/images/form/4_2.png"
className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
alt=""
alt="Макет кабины машиниста «Иволга» на выставке ВДНХ"
/>
</div>
</div>
src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx
+5 -5
View File
@@ -10,8 +10,8 @@ import { AnimatePresence, motion } from 'framer-motion';
export const DesktopInteractionSlide = forwardRef<
{ animationing: boolean },
IInteraction & { active: boolean; onClick: () => void; bordered: boolean }
>(({ active, video, onClick, bordered, title }, ref) => {
IInteraction & { active: boolean; onClick: () => void }
>(({ active, video, onClick, title }, ref) => {
const videoRef = useRef<HTMLVideoElement>(null);
const [animationing, setAnimationing] = useState(false);
@@ -45,8 +45,7 @@ export const DesktopInteractionSlide = forwardRef<
duration: 1,
}}
className={
'bg-[#14161F] first:border-l last:border-r flex flex-col transition-all border-[#3D425C] h-fit ' +
(bordered ? 'border' : 'border-y') +
'bg-[#14161F] border flex flex-col border-[#3D425C] h-fit [&:not(:first-child)]:relative [&:not(:first-child)]:right-px [&:nth-child(3)]:right-0.5 [&:nth-child(4)]:right-[3px] ' +
(active ? ' p-8 justify-between' : ' content-center justify-center')
}
>
@@ -55,8 +54,9 @@ export const DesktopInteractionSlide = forwardRef<
<motion.p
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, transition: { delay: 0 } }}
transition={{ delay: 1.25 }}
className="font-medium text-[32px] leading-none mt-0"
className="font-medium text-[32px] leading-none mt-0 mx-8"
>
{title}
</motion.p>
src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx
+1 -2
View File
@@ -29,7 +29,7 @@ export function DesktopInteractionsSlider() {
onRightClick={() => goToSlide('next')}
className="flex justify-end"
/>
<div className="flex items-end h-[600px]">
<div className="flex items-end aspect-[1552/600]">
<AnimatePresence mode="wait">
{interactions.map(({ video, title }, index) => (
<DesktopInteractionSlide
@@ -38,7 +38,6 @@ export function DesktopInteractionsSlider() {
title={title}
active={index === current}
onClick={() => goToSlide(index)}
bordered={index === current || Math.abs(index - current) === 2}
ref={index === current ? currentSlideRef : null}
/>
))}
src/components/Layout/Footer.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ export function Footer() {
<div className="sm:px-6 px-4 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
<div>
<Contact type="email" text="info@graff.tech" />
<Contact type="phone" text="+7 800 770 00 67" />
<Contact type="phone" text="8 800 770 00 67" />
</div>
<div className="font-medium p-[14px] border border-[#3D425C] rounded-full m-text">
RU
@@ -31,7 +31,7 @@ export function Footer() {
</div>
<div className="sm:px-6 px-4 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
<div>
<Contact type="email" text="info@graff.tech" />
<Contact type="email" text="sam@graff.tech" />
<Contact type="phone" text="+971 58 506 0097" />
</div>
<div className="font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full m-text">
src/components/Layout/Header.tsx
+5
View File
@@ -103,6 +103,11 @@ function HashLink({ path, text }: { path: string; text: string }) {
<Link
className="border-l lg:last:border-r border-[#3D425C] px-10 self-stretch font-medium lg:text-[#9299BD] content-center hover:bg-[#3D425C] max-lg:flex max-lg:py-6 btn-text bg-[#14161F] w-full max-lg:[&:not(:last-child)]:border-b"
to={path}
onClick={() => {
document
.getElementById(path.slice(2))
?.scrollIntoView({ behavior: 'smooth' });
}}
>
{text}
</Link>
src/components/Motivation.tsx
+14 -3
View File
@@ -3,9 +3,9 @@ import { Showreel } from './Showreel';
export function Motivation() {
return (
<div className="lg:pt-20 sm:pt-14 pt-16">
<div className="lg:space-y-12 space-y-8 mb-6">
<h1 className="h1 font-medium">
<div className="pt-16 lg:pt-20 sm:pt-14">
<div className="mb-6 space-y-8 lg:space-y-12">
<h1 className="font-medium h1">
Создаем интерактивные
<span className="text-gradient"> выставочные решения</span>
</h1>
@@ -19,6 +19,17 @@ export function Motivation() {
key={solution}
className="h4 font-medium flex gap-x-[7px]"
to={`#${index === 0 ? 'vr_ar' : index == 1 ? 'interactive' : '3d_makets'}`}
onClick={() =>
document
.getElementById(
index === 0
? 'vr_ar'
: index == 1
? 'interactive'
: '3d_makets',
)
?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
>
{solution}
<sup className="text-xs">{count}</sup>
src/components/Promotion.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ function DesktopFeature({
<motion.img
key={image}
src={image}
alt=""
alt={title}
transition={{ duration: 0.5 }}
className="h-full "
animate={{
src/components/SelectPhoneCode.tsx
+2 -2
View File
@@ -35,7 +35,7 @@ export function SelectPhoneCode({
<img
src={countries.find(c => c.iso === currentCountry)?.flag}
className="w-4 sm:w-6"
alt=""
alt={currentCountry}
/>
<p className="h4">{currentPhoneCode}</p>
<ClassNameWrapper
@@ -62,7 +62,7 @@ export function SelectPhoneCode({
>
<img
src={countries.find(c => c.iso === country)?.flag}
alt=""
alt={country}
className="w-4 sm:w-6"
/>
<p className="flex-1 py-1 cursor-pointer h4">{phoneCode}</p>
src/components/icons/Logo.tsx
+193 -198
View File
File diff suppressed because one or more lines are too long
src/components/icons/LogoWithoutText.tsx
+226 -131
View File
File diff suppressed because one or more lines are too long
src/index.css
+6 -37
View File
@@ -16,7 +16,6 @@ body {
*::-webkit-scrollbar-thumb {
background-color: #798fff;
/* border: 3.5px solid transparent; */
border-radius: 4px;
}
@@ -26,21 +25,18 @@ body {
@layer components {
.h1 {
@apply -tracking-[.02em] text-[clamp(36px,36px+(100vw-360px)/1240*76,112px)] leading-[90%]
/* leading-[clamp(36px,36px+(100vw-360px)/1240*50.4,86.4px)]; */;
@apply -tracking-[.02em] text-[clamp(36px,36px+(100vw-360px)/1240*76,112px)] leading-[90%];
}
.h2 {
@apply -tracking-[.02em] text-[clamp(24px,24px+(100vw-360px)/1240*40,64px)] lg:leading-[90%] leading-none;
}
.h3 {
@apply text-[clamp(18px,18px+(100vw-360px)/1240*22,40px)] leading-none
/* leading-[clamp(22px,22px+(100vw-360px)/1240*6.8,28.8px)]; */;
@apply text-[clamp(18px,18px+(100vw-360px)/1240*22,40px)] leading-none;
}
.h4 {
@apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[120%]
/* leading-[clamp(17.6px,17.6px+(100vw-360px)/1240*6.4,24px)]; */;
@apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[120%];
}
.accent {
@@ -48,19 +44,13 @@ body {
}
.l-text {
@apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[135%]
/* leading-[clamp(21.6px,21.6px+(100vw-360px)/1240*5.4,27px)]; */;
@apply text-[clamp(14px,14px+(100vw-360px)/1240*6,20px)] leading-[135%];
}
.m-text {
@apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] leading-[140%]
/* leading-[clamp(19.6px,19.6px+(100vw-360px)/1240*2.4,22.4px)]; */;
@apply text-[clamp(12px,12px+(100vw-360px)/1240*4,16px)] leading-[140%];
}
/* .l-caption {
@apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-none;
} */
.m-caption {
@apply text-[clamp(10px,10px+(100vw-360px)/1240*2,12px)] leading-[clamp(12px,12px+(100vw-360px)/1240*2.4,14.4px)];
}
@@ -74,30 +64,9 @@ body {
}
.descriptor {
@apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-[120%]
/* leading-[clamp(15.6px,15.6px+(100vw-360px)/1240*2.6,18.2px)]; */;
@apply text-[clamp(14px,14px+(100vw-360px)/1240*2,16px)] leading-[120%];
}
/* .feedback-field:focus ~ .feedback-placeholder {
top: 0;
}
.feedback-field:focus ~ .feedback-placeholder-2 {
opacity: 0;
}
.feedback-field:valid ~ .feedback-placeholder {
top: 0;
}
.feedback-field:valid ~ .feedback-placeholder-2 {
opacity: 0;
}
.feedback-field::placeholder {
@apply lg:text-base text-sm font-semibold text-[#77787d];
} */
.text-gradient {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;