diff --git a/components/ContactSection.tsx b/components/ContactSection.tsx index 5e4ec63..266edaa 100644 --- a/components/ContactSection.tsx +++ b/components/ContactSection.tsx @@ -9,6 +9,7 @@ import Scene from "./Three/Scene"; import { Canvas } from "@react-three/fiber"; import { FogExp2, Vector3 } from "three"; import { isMobile } from "react-device-detect"; +import Reveal from "./Reveal"; export default function ContactSection() { return ( @@ -18,33 +19,46 @@ export default function ContactSection() { >
-
Контакты
+ +
Контакты
+ +
- -
- -
codium.kg
-
- + + +
+ +
codium.kg
+
+ + + + + +
+ +
+996 504 044 402
+
+ + + + + +
+ +
codiumtokmok@gmail.com
+
+ + - -
- -
+996 504 044 402
-
- - -
- -
codiumtokmok@gmail.com
-
- - -
- -
codium_kg
-
- + + +
+ +
codium_kg
+
+ +
diff --git a/components/CourseSection.tsx b/components/CourseSection.tsx index f17d055..e59dfba 100644 --- a/components/CourseSection.tsx +++ b/components/CourseSection.tsx @@ -3,6 +3,7 @@ import { HiOutlineRocketLaunch } from "react-icons/hi2"; import { MdComputer } from "react-icons/md"; import { FaCode } from "react-icons/fa6"; import SectionHeader from "./SectionHeader"; +import Reveal from "./Reveal"; export default function CourseSection() { return ( @@ -15,32 +16,34 @@ export default function CourseSection() {
{COURSES.map((course) => (
-

-
- -
- {course.title} -

-
- {course.modules.map((module) => ( -
-
-
- -
+ +

+
+ +
+ {course.title} +

+
+ {course.modules.map((module) => ( +
+
+
+ +
-

{module.title}

-
+

{module.title}

+
-
- {module.description} +
+ {module.description} +
-
- ))} -
+ ))} +
+
))}
diff --git a/components/FAQSection.tsx b/components/FAQSection.tsx index bc9762b..cf2f96f 100644 --- a/components/FAQSection.tsx +++ b/components/FAQSection.tsx @@ -6,6 +6,7 @@ import SectionHeader from "./SectionHeader"; import { MdQuestionMark } from "react-icons/md"; import { FaChevronDown } from "react-icons/fa"; import { FAQ } from "@/constants/constants"; +import Reveal from "./Reveal"; export default function FAQSection() { return ( @@ -13,40 +14,44 @@ export default function FAQSection() { className="py-32 w-screen min-h-screen flex flex-col justify-center items-center" id="faq" > - } - /> + + } + /> + -
- - {FAQ.map((question, index) => ( - - - -
- {question.question} -
+ +
+ + {FAQ.map((question, index) => ( + + + +
+ {question.question} +
- - - - - {question.answer} - - - ))} - -
+ + + + + {question.answer} + + + ))} + +
+ ); } diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx index 59e39e3..674ec9c 100644 --- a/components/HeroSection.tsx +++ b/components/HeroSection.tsx @@ -1,6 +1,7 @@ import Image from "next/image"; import Logo from "@/assets/codium_logo_solo.png"; import RegRequestModal from "./RegRequestModal"; +import Reveal from "./Reveal"; export default function HeroSection() { return ( @@ -9,32 +10,39 @@ export default function HeroSection() { id="hero" >
-
- Logo -
- -
-
- - Добро пожаловать в мир{" "} - {" "} -
- - IT - - где навыки становятся{" "} -
- - возможностями! - + +
+ Logo
+ + + +
+
+ + Добро пожаловать в мир{" "} + {" "} +
+ + IT + + + {" "} + где навыки становятся + {" "} +
+ + возможностями! + +
- -
+ +
+
); diff --git a/components/Reveal.tsx b/components/Reveal.tsx new file mode 100644 index 0000000..19b6957 --- /dev/null +++ b/components/Reveal.tsx @@ -0,0 +1,40 @@ +"use client"; + +import { motion, useAnimation, useInView } from "framer-motion"; +import { ReactNode, useEffect, useRef } from "react"; + +interface Props { + children: ReactNode; +} + +function Reveal({ children }: Props) { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: "-120px" }); + + const controls = useAnimation(); + + useEffect(() => { + if (isInView) { + controls.start("visible"); + } + }, [isInView, controls]); + + return ( +
+ + {children} + +
+ ); +} + +export default Reveal; diff --git a/package.json b/package.json index 6baa7ad..98069b1 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@types/p5": "^1.7.4", "@types/three": "^0.159.0", "autoprefixer": "^10.4.16", + "framer-motion": "^11.0.3", "next": "14.0.1", "p5": "^1.9.0", "postcss": "^8.4.31", diff --git a/yarn.lock b/yarn.lock index e11ede2..5848780 100644 --- a/yarn.lock +++ b/yarn.lock @@ -26,6 +26,18 @@ dependencies: regenerator-runtime "^0.14.0" +"@emotion/is-prop-valid@^0.8.2": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" @@ -2048,6 +2060,15 @@ fraction.js@^4.3.6: resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7" integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew== +framer-motion@^11.0.3: + version "11.0.3" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.0.3.tgz#b2a87e7ae166a9e27da33da9cfb50a0db5f94fa7" + integrity sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw== + dependencies: + tslib "^2.4.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + fs-constants@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"