From f8b0eefb7827a4cdbd1253b65b4ea4c85502ae27 Mon Sep 17 00:00:00 2001 From: Pranav Jerry Date: Wed, 10 Apr 2024 18:03:51 +0530 Subject: [PATCH] edit homepage --- src/Components/Footer/Footer.js | 133 ++++++------ src/Components/LandingPage/LandingPage.js | 245 ++++++++++++---------- 2 files changed, 195 insertions(+), 183 deletions(-) diff --git a/src/Components/Footer/Footer.js b/src/Components/Footer/Footer.js index c5bcd17..5f2b225 100644 --- a/src/Components/Footer/Footer.js +++ b/src/Components/Footer/Footer.js @@ -1,68 +1,65 @@ -import React from 'react'; -import styled from "styled-components"; -import { BsFacebook, BsTwitter, BsYoutube, BsBehance } from 'react-icons/bs'; -import { motion } from "framer-motion"; -import { useScroll } from "../useScroll"; -import { footerTextAnimation } from "../Animation"; - -function Footer() { - const [element, controls] = useScroll(); - return ( - - - © Neural Harbour AI - - - - - - - - - ) -} - -const Foot = styled(motion.footer)` -background-color: black; -color: #fff; -display: flex; -justify-content: space-between; -align-items: center; -padding: 5rem 10rem; -.footer__social__icons { - display: flex; - gap: 2rem; - svg { - font-size: 1.4rem; - cursor: pointer; - transition: 0.5s ease-in-out; - &:hover { - color: var(--secondary-color); - } - } -} -@media screen and (min-width: 280px) and (max-width: 1080px) { - padding: 1rem; - flex-direction: column; - text-align: center; - gap: 1rem; -} -`; - -export default Footer \ No newline at end of file +import React from 'react'; +import styled from "styled-components"; +import { BsFacebook, BsTwitter, BsYoutube, BsBehance } from 'react-icons/bs'; +import { motion } from "framer-motion"; +import { useScroll } from "../useScroll"; +import { footerTextAnimation } from "../Animation"; + +function Footer() { + const [element, controls] = useScroll(); + return ( + + + Speech to Sign Language, Main Project + + + + + + ) +} + +const Foot = styled(motion.footer)` +background-color: black; +color: #fff; +display: flex; +justify-content: space-between; +align-items: center; +padding: 5rem 10rem; +.footer__social__icons { + display: flex; + gap: 2rem; + svg { + font-size: 1.4rem; + cursor: pointer; + transition: 0.5s ease-in-out; + &:hover { + color: var(--secondary-color); + } + } +} +@media screen and (min-width: 280px) and (max-width: 1080px) { + padding: 1rem; + flex-direction: column; + text-align: center; + gap: 1rem; +} +`; + +export default Footer diff --git a/src/Components/LandingPage/LandingPage.js b/src/Components/LandingPage/LandingPage.js index cff0029..103ac70 100644 --- a/src/Components/LandingPage/LandingPage.js +++ b/src/Components/LandingPage/LandingPage.js @@ -1,116 +1,131 @@ -import React, { useEffect, useRef } from 'react'; -import img from './IMG-KONVERT.jpg'; -import './Landing.css'; -import Splitting from 'splitting'; -import { gsap } from 'gsap'; -import { Link } from "react-router-dom"; -const LandingPage = () => { - const navRef = useRef(null); - const sectionTitleRef = useRef(null); - const sectionColRef = useRef(null); - const sectionImageRef = useRef(null); - const sectionOverlayRef = useRef(null); - - useEffect(() => { - const nav = navRef.current; - const sectionTitle = sectionTitleRef.current; - const sectionCol = sectionColRef.current; - const sectionImage = sectionImageRef.current; - const sectionOverlay = sectionOverlayRef.current; - - const section = { - title: Splitting({ - target: sectionTitle, - by: 'chars', - }), - paragraphs: Splitting({ - target: sectionCol, - by: 'words', - }), - image: sectionImage, - overlay: sectionOverlay, - }; - - const titleChars = section.title[0].chars; - const paragraphsWords = section.paragraphs[0].words; - - gsap.set(titleChars, { autoAlpha: 0, yPercent: -100, rotate: '-15deg' }); - gsap.set(paragraphsWords, { autoAlpha: 0, display: 'inline-flex' }); - gsap.set(section.image, { autoAlpha: 0, scale: 1.5 }); - - const t1 = gsap.timeline({ defaults: { duration: 1.64, ease: 'power4.inOut' } }); - - t1.addLabel('section') - .to(titleChars, { - autoAlpha: 1, - yPercent: 0, - rotate: '0deg', - stagger: 0.024, - - }, 'start+=0.6') - .to(paragraphsWords, { - autoAlpha: 1, - stagger: 0.024, - }, 'start+=0.6') - .to(section.overlay, { yPercent: 101 }) - .to(section.image, { autoAlpha: 1, scale: 1 }, '-=2'); - }, []); - - const handleFileUpload = (event) => { - const file = event.target.files[0]; - }; - - return ( - -
-
-
-
- INCONNECT -
-
- Home - Login - SignUp -
-
-
- - -
-
-
-
-
-
-
-

Inconnect

-
-
-
-

- Next-Gen Speech to Sign Language Technology. Introducing our revolutionary Intelligent Sign Language Technology,Powered by cutting-edge AI technology. -

-
- → - Powered By Neural Harbour AI -
-
-
-

- Our sophisticated algorithms delve into the speech's intricate details,enabling anyone to perform quick,accurate and comprehensive conversions. -

-
-
-
-
- dummy -
-
-
-
- - ); -}; - +import React, { useEffect, useRef } from "react"; +import img from "./IMG-KONVERT.jpg"; +import "./Landing.css"; +import Splitting from "splitting"; +import { gsap } from "gsap"; +import { Link } from "react-router-dom"; +const LandingPage = () => { + const navRef = useRef(null); + const sectionTitleRef = useRef(null); + const sectionColRef = useRef(null); + const sectionImageRef = useRef(null); + const sectionOverlayRef = useRef(null); + + useEffect(() => { + const nav = navRef.current; + const sectionTitle = sectionTitleRef.current; + const sectionCol = sectionColRef.current; + const sectionImage = sectionImageRef.current; + const sectionOverlay = sectionOverlayRef.current; + + const section = { + title: Splitting({ + target: sectionTitle, + by: "chars", + }), + paragraphs: Splitting({ + target: sectionCol, + by: "words", + }), + image: sectionImage, + overlay: sectionOverlay, + }; + + const titleChars = section.title[0].chars; + const paragraphsWords = section.paragraphs[0].words; + + gsap.set(titleChars, { autoAlpha: 0, yPercent: -100, rotate: "-15deg" }); + gsap.set(paragraphsWords, { autoAlpha: 0, display: "inline-flex" }); + gsap.set(section.image, { autoAlpha: 0, scale: 1.5 }); + + const t1 = gsap.timeline({ + defaults: { duration: 1.64, ease: "power4.inOut" }, + }); + + t1.addLabel("section") + .to( + titleChars, + { + autoAlpha: 1, + yPercent: 0, + rotate: "0deg", + stagger: 0.024, + }, + "start+=0.6", + ) + .to( + paragraphsWords, + { + autoAlpha: 1, + stagger: 0.024, + }, + "start+=0.6", + ) + .to(section.overlay, { yPercent: 101 }) + .to(section.image, { autoAlpha: 1, scale: 1 }, "-=2"); + }, []); + + const handleFileUpload = (event) => { + const file = event.target.files[0]; + }; + + return ( + +
+
+
+
+ INCONNECT +
+
+ Home + + Login + + + SignUp + +
+
+
+ + +
+
+
+
+
+
+
+

Inconnect

+
+
+
+

+ Speech to Sign Language +

+
+
+

+
+
+
+
+ dummy +
+
+
+
+ + ); +}; + export default LandingPage;