diff --git a/public/index.html b/public/index.html index 63633f7..d852e59 100644 --- a/public/index.html +++ b/public/index.html @@ -3,8 +3,7 @@ - - + CodeUtsava 7.0 - + - +
+
- + > - + diff --git a/public/preloader.css b/public/preloader.css index 7986d5d..83cbbb5 100644 --- a/public/preloader.css +++ b/public/preloader.css @@ -20,9 +20,15 @@ --secondary-c: #b200ee; } +.hehe{ + overflow: hidden; +} + +.intro-container1 img { + height: 100px; +} + .intro-container1 { - background-repeat: no-repeat; - background-size: cover; position: absolute; top: 50%; transform: translateY(-50%); @@ -37,15 +43,16 @@ width: max-content; } -.intro-container1 img { - height: 100px; +#canvas{ + position: absolute; + z-index: -2; } -/* #root { +#root { display: none; opacity: 0; -} */ - +} +/* .pre-container { position: absolute; right: 30%; @@ -94,6 +101,13 @@ background: black; box-shadow: none !important; right: 0; +} */ + +.sky-container { + overflow: hidden; + position: absolute; + display: none; + opacity: 0; } .button { @@ -149,12 +163,6 @@ transition: 0.15s ease-out; } -.sky-container { - width: 100%; - height: 100vh; - background-image: url('./loader_bg.png'); -} - @media screen and (min-width: 860px) { .sky-container__left h2, .sky-container__right h2 { diff --git a/public/preloader.js b/public/preloader.js index 5a10176..81f4b4b 100644 --- a/public/preloader.js +++ b/public/preloader.js @@ -1,148 +1,198 @@ "use strict"; -let introContainer1 = $(".intro-container1"); -let skyContainer = $(".sky-container"); -let roo = $("#root"); -let loaderimg = $(".preloader-img"); -let bbb = $(".shift-camera-button"); - -const container = document.querySelector(".pre-container"); -const lineOne = document.querySelector(".l-1"); -const lineTwo = document.querySelector(".l-2"); -const lineThree = document.querySelector(".l-3"); -let isOpen = false; -let a1 = {}, - a2 = {}, - a3 = {}; - -function initial() { - a1 = gsap.timeline().to(lineOne, { - rotate: 80, - x: -350, - y: -50, - background: "yellow", - }); +/* globals THREE, $, TweenLite, Power3, TimelineMax */ - a2 = gsap.timeline().to(lineThree, { - rotate: 100, - background: "white", - x: 350, - y: -70, - }); -} + // Draw canvas here... + const c1 = "#7f00a6"; + const c2 = "#b200ee"; + var canvas = document.querySelector('canvas'); + var c = canvas.getContext('2d'); + + canvas.width = Math.max(window.innerWidth,window.innerHeight); + canvas.height = Math.max(window.innerWidth,window.innerHeight); -initial(); - -$(".shift-camera-button").click(function () { - a1 = gsap - .timeline() - .to(lineOne, { - rotate: 130, - x: -5, - y: -50, - }) - .to(lineOne, { - rotate: 130, - x: -5, - y: -50, - }) - .to(lineOne, { - rotate: 130, - x: -15, - y: -50, - }) - .to( - lineOne, - { - rotate: 100, - x: -7, - y: 10, - }, - "-=0.25" - ) - .to(lineOne, { - rotate: 110, - x: -25, - y: -50, - }) - .to(lineOne, { - rotate: 130, - x: 0, - }) - .to(lineOne, { - rotate: 135, - y: -50, - x: 0, - delay: 0.4, + console.log(window.innerWidth,window.innerHeight); + + var particleCount = 750; + var mouse = { + x: window.innerWidth / 2, + y: window.innerHeight / 2 + }; + + window.addEventListener("mousemove", function(event) { + mouse.x = event.clientX - canvas.width / 2; + mouse.y = event.clientY - canvas.height / 2; }); - - a2 = gsap - .timeline() - .to(lineThree, { - rotate: 50, - x: 20, - y: -70, - }) - .to( - lineThree, - { - rotate: 80, - x: 0, - y: -70, - duration: 0.25, - }, - "-=0.25" - ) - .to(lineThree, { - rotate: 50, - x: 17, - y: -70, - }) - .to(lineThree, { - rotate: 50, - x: -20, - y: -70, - }) - .to(lineThree, { - rotate: 420, - y: -9, - x: 5, - }) - .to(lineThree, { - rotate: 45, - y: -6, - x: 0, - delay: 0.4, + + window.addEventListener("resize", function() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + + lightParticles = []; + initializeParticles(); }); - a3 = gsap - .timeline() - .to(loaderimg, { - opacity: 0, - }) - .to(bbb,{ - opacity: 0, - }) - .to(skyContainer,{ - display: "none", - delay: 2, - }) -}); + + + function LightParticle(x, y, radius, color) { + this.x = x; + this.y = y; + this.radius = radius; + this.color = color; + + this.update = function() { + + this.draw(); + }; + + this.draw = function() { + c.save(); + c.beginPath(); + c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); + c.shadowColor = this.color; + c.shadowBlur = 15; + c.shadowOffsetX = 0; + c.shadowOffsetY = 0; + c.fillStyle = this.color; + c.fill(); + c.closePath(); + c.restore(); + }; + } + + var lightParticles = []; + + var timer = 0; + var opacity = 1; + var speed = 0.0005; + var colors = [ + c1, + c2, + "#fbfbdd", + "#333333", + "#F2E8C9" + ]; + + var initializeParticles; + + (initializeParticles = function() { + for (var i = 0; i < particleCount; i++) { + + var randomColorIndex = Math.floor(Math.random() * 6); + var randomRadius = Math.random() * 2; + + // Ensure particles are spawned past screen width and height so + // there will be no missing stars when rotating canvas + var x = (Math.random() * (canvas.width + 200)) - (canvas.width + 200) / 2; + var y = (Math.random() * (canvas.width + 200)) - (canvas.width + 200) / 2; + lightParticles.push(new LightParticle(x, y, randomRadius, colors[randomColorIndex])); + } + })(); + + function animate() { + window.requestAnimationFrame(animate); + + c.save(); + if (isMouseDown === true) { + + // Ease into the new opacity + var desiredOpacity = 0.01; + opacity += (desiredOpacity - opacity) * 0.03; + c.fillStyle = "rgba(0, 0, 0,"+ opacity +")"; + + // Ease into the new speed + var desiredSpeed = 0.012; + speed += (desiredSpeed - speed) * 0.01; + timer += speed; + + } else { + + // Ease back to the original opacity + var originalOpacity = 1; + opacity += (originalOpacity - opacity) * 0.01; + c.fillStyle = "rgba(0, 0, 0, " + opacity + ")"; + + // Ease back to the original speed + var originalSpeed = 0.001; + speed += (originalSpeed - speed) * 0.01; + timer += speed; + + } + + c.fillRect(0, 0, canvas.width, canvas.height); + c.translate(canvas.width / 2, canvas.height / 3); + c.rotate(timer); + + for (var i = 0; i < lightParticles.length; i++) { + lightParticles[i].update(); + } + + c.restore(); + + + } + + var isMouseDown = false; + + window.addEventListener("mousedown", function() { + isMouseDown = true; + }); + + + window.addEventListener("mouseup", function() { + isMouseDown = false; + }); + + animate(); + +// let introContainer = $(".intro-container"); +let introContainer1 = $(".intro-container1"); +let skyContainer = $(".sky-container"); +let roo = $("#root"); +let canv = document.getElementsByTagName("canvas"); +let hhh = document.getElementsByTagName("body"); $(".shift-camera-button").click(function () { let introTimeline = new TimelineMax(); introTimeline.add([ TweenLite.fromTo( introContainer1, - 5, + 0.5, { opacity: 1 }, { opacity: 0, ease: Power3.easeIn } ), + // TweenLite.fromTo( + // introContainer1, + // 0.5, + // { opacity: 1 }, + // { opacity: 0, ease: Power3.easeIn } + // ), + // TweenLite.to(camera.rotation, 3, { + // x: Math.PI / 2, + // ease: Power3.easeInOut, + // }), + // TweenLite.to(camera.position, 2.5, { z: 20, ease: Power3.easeInOut }), + // TweenLite.to(camera.position, 3, { y: 120, ease: Power3.easeInOut }), + // TweenLite.to(plane.scale, 3, { x: 2, y: 0, ease: Power3.easeInOut }), ]); introTimeline.add([ - TweenLite.to(root, 0.1, { + TweenLite.to(skyContainer, 0.1, { opacity: 1, display: "block", + position: 'sticky', + ease: Power3.easeInOut, + }), + TweenLite.to(root, 0.1, { + opacity: 1, + display: "block", ease: Power3.easeInOut, }), + TweenLite.to(canv, 0.1, { + display: 'none', + ease: Power3.easeInOut, + }), + TweenLite.to(hhh, 0.1, { + 'overflow-y': 'visible', + ease: Power3.easeInOut, + }), ]); }); diff --git a/src/App.js b/src/App.js index 2be4820..2d5029a 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import HomePage from "./pages/home/HomePage"; import TeamTCP from "./pages/teamTcp/TeamTcp"; import ScrollToTop from "./ScrollToTop"; import Error404 from "./pages/Error404/Error404"; +import ContactUs from "./pages/contactUs/ContactUs"; export default class App extends Component { render() { @@ -16,6 +17,7 @@ export default class App extends Component { } /> } /> } /> + } /> ); diff --git a/src/components/contactForm/ContactForm.css b/src/components/contactForm/ContactForm.css new file mode 100644 index 0000000..b38386a --- /dev/null +++ b/src/components/contactForm/ContactForm.css @@ -0,0 +1,167 @@ +.codeutsava__contact-section { + display: flex; + margin-top: 6rem; + font-size: 2rem; + color: white; + font-family: var(--font-family); + padding: 4rem; + align-items: center; + justify-content: center; + border-radius: 8px; + gap: 2rem; + background-color: rgb(30, 31, 33); +} + +.codeutsava__contact-submit-button { + font-family: var(--font-family); + font-size: 16px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 16px 20px; + border-radius: 4px; + border: none; + color: white; + margin-top: 1rem; + cursor: pointer; + background-color: var(--primary-c); +} + +.codeutsava__contact-form { + height: 560px; + width: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} +.map-container { + height: 100%; + width: 50%; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: center; +} + +.codeutsava__contact-submit-button img { + width: 12px; + margin-left: 4px; + transform: rotate(-90deg); + filter: invert(100%); +} +.codeutsava__contact-submit-button a { + font-size: 12px; + margin-left: 8px; +} +.codeutsava__contact-submit-button:hover img { + filter: invert(0%); +} + +.codeutsava__contact-header { + width: 90%; + color: white; + font-size: 1.6rem; + border-bottom: 1px solid rgba(193, 186, 186, 0.232); +} + +.codeutsava__contact-submit-button:hover { + background-color: rgba(255, 255, 255, 0.9); + color: black; +} + +.map { + border: none; + filter: invert(90%); + height: 560px; + width: 100%; + border: 1px solid rgba(121, 111, 111, 0.639); +} + +.codeutsava__contact-form form { + width: 90%; + display: flex; + flex-direction: column; +} + +.form-group { + margin-bottom: 4px; + display: flex; + flex-direction: column; +} + +.form-group label { + font-size: 16px; + margin-bottom: 8px; +} + +input[type="text"], +input[type="email"], +input[type="contact"], +textarea { + width: 100%; + font-family: var(--font-family3); + padding: 1rem; + margin-bottom: 10px; + border: 1px solid rgb(161, 153, 153, 0.5); + border-radius: 4px; + background-color: rgb(33, 36, 37); + color: white; +} + +textarea { + resize: none; +} + +@media screen and (max-width: 756px) { + .codeutsava__contact-section { + margin: auto; + margin-top: 3rem; + } + .container-inside { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + } + .codeutsava__contact-form { + width: 90%; + height: 590px; + } + .codeutsava__contact-form form { + height: 480px; + display: flex; + flex-direction: column; + } + + .map-container { + width: 90%; + height: 590px; + } +} + +@media screen and (max-width: 430px) { + .map-container { + width: 90%; + } + .codeutsava__contact-section { + display: flex; + flex-direction: column; + padding: 2rem 1rem; + } + .codeutsava__contact-form { + width: 90%; + height: 530px; + margin-top: 2rem; + margin-bottom: 4rem; + } + .map-container { + width: 90%; + height: 530px; + } + .codeutsava__contact-submit-button { + margin-bottom: 2rem; + } +} diff --git a/src/components/contactForm/ContactForm.js b/src/components/contactForm/ContactForm.js new file mode 100644 index 0000000..a82fb60 --- /dev/null +++ b/src/components/contactForm/ContactForm.js @@ -0,0 +1,95 @@ +import React from "react"; +import "./ContactForm.css"; +import { useState, useRef } from "react"; + +const ContactForm = () => { + const form = useRef(); + const [sentT, setSentT] = useState("Submit"); + const handleButtonClick = (e) => { + e.preventDefault(); + var emailData = { + service_id: "service_y25o3tu", + template_id: "TCP-Tech_Response", + user_id: "kE8yPfFnAkGs6aRJk", + template_params: { + person_name: form.current.name.value, + mobile_no: form.current.contact.value, + email_id: form.current.email.value, + message: form.current.message.value, + }, + }; + fetch("https://api.emailjs.com/api/v1.0/email/send", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(emailData), + }).then( + (response) => {}, + (err) => {} + ); + setSentT("Whoosh! Done"); + console.log(form.current); + }; + return ( +
+
+
Contact Us
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+ ); +}; + +export default ContactForm; diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js index 9b1a2a5..0f2752d 100644 --- a/src/components/navbar/Navbar.js +++ b/src/components/navbar/Navbar.js @@ -8,6 +8,7 @@ import feedBack from "../../assets/images/feedback.svg"; import brochure from "../../assets/images/CodeUtsava_Brochure_7.0.pdf"; import { motion } from "framer-motion"; import { headerVariants } from "../../motionUtils"; +import { Link } from "react-router-dom"; const Navbar = () => { const [isOpen, setIsOpen] = useState(false); @@ -28,7 +29,7 @@ const Navbar = () => {
-
+
diff --git a/src/pages/home/sections/section16/Section16.css b/src/pages/contactUs/ContactUs.css similarity index 84% rename from src/pages/home/sections/section16/Section16.css rename to src/pages/contactUs/ContactUs.css index 4495640..c1b7e5b 100644 --- a/src/pages/home/sections/section16/Section16.css +++ b/src/pages/contactUs/ContactUs.css @@ -28,7 +28,7 @@ justify-content: center; align-items: center; } -.codeutsava__contact-title img{ +.codeutsava__contact-title img { width: auto; position: relative; height: 90px; @@ -37,7 +37,6 @@ .codeutsava__contact-submit-button { font-family: var(--font-family); font-size: 16px; - width: 90%; display: flex; flex-direction: row; justify-content: center; @@ -46,6 +45,7 @@ border-radius: 4px; border: none; color: white; + margin-top: 1rem; cursor: pointer; background-color: var(--primary-c); } @@ -84,7 +84,7 @@ .codeutsava__contact-header { width: 90%; color: white; - font-size: 1.9rem; + font-size: 1.6rem; border-bottom: 1px solid rgba(193, 186, 186, 0.232); } @@ -115,14 +115,16 @@ } .form-group label { - font-size: 1rem; - margin-bottom: 4px; + font-size: 16px; + margin-bottom: 8px; } input[type="text"], input[type="email"], +input[type="contact"], textarea { width: 100%; + font-family: var(--font-family3); padding: 1rem; margin-bottom: 10px; border: 1px solid rgb(161, 153, 153, 0.5); @@ -144,9 +146,8 @@ textarea { resize: none; } -@media (max-width: 1000px) { +@media screen and (max-width: 756px) { .codeutsava__contact-section { - display: flex; margin: auto; margin-top: 3rem; } @@ -173,7 +174,7 @@ textarea { } } -@media (max-width: 625px) { +@media screen and (max-width: 430px) { .map-container { width: 90%; } @@ -182,8 +183,24 @@ textarea { flex-direction: column; padding: 2rem 1rem; } - .codeutsava__contact-title{ + .codeutsava__contact-title { font-size: 40px; line-height: 64px; } + .codeutsava__contact-header { + margin-bottom: 2rem; + } + .codeutsava__contact-form { + width: 90%; + height: 530px; + margin-top: 2rem; + margin-bottom: 4rem; + } + .map-container { + width: 90%; + height: 530px; + } + .codeutsava__contact-submit-button { + margin-bottom: 2rem; + } } diff --git a/src/pages/contactUs/ContactUs.js b/src/pages/contactUs/ContactUs.js new file mode 100644 index 0000000..393c717 --- /dev/null +++ b/src/pages/contactUs/ContactUs.js @@ -0,0 +1,38 @@ +import React, { Component } from "react"; +import "./ContactUs.css"; +import cauldron from "../../assets/images/cauldron.png"; +import { motion } from "framer-motion"; +import ContactForm from "../../components/contactForm/ContactForm"; +import Footer from "../../components/footer/Footer"; +import NavbarTeam from "../../components/navbarTeam/NavbarTeam"; +import IntroAudio from "../../components/introAudio/IntroAudio"; + +const ContactUs = () => { + return ( +
+
+ +
+
+ +
+ Have Some Questions? + +
+ + +
+
+
+
+
+
+ ); +}; + +export default ContactUs; diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js index a8cd5cb..17a67c7 100644 --- a/src/pages/home/HomePage.js +++ b/src/pages/home/HomePage.js @@ -20,9 +20,6 @@ import Section11 from "./sections/section11/Section11"; import Section12 from "./sections/section12/Section12"; import Section13 from "./sections/section13/Section13"; import Section14 from "./sections/section14/Section14"; -import Section16 from "./sections/section16/Section16"; - - const HomePage = () => { return ( @@ -48,7 +45,6 @@ const HomePage = () => { -
diff --git a/src/pages/home/sections/section1/Section1.css b/src/pages/home/sections/section1/Section1.css index c9582d9..9a9bcec 100644 --- a/src/pages/home/sections/section1/Section1.css +++ b/src/pages/home/sections/section1/Section1.css @@ -40,15 +40,15 @@ align-items: center; } .codeutsava__section1-heading { - margin: 1rem 0; - height: 65px; + margin: 4px 0; + height: 70px; } .codeutsava__section1-subheading { font-family: var(--font-family1); font-weight: 500; - font-size: 36px; - line-height: 82px; + font-size: 40px; + line-height: 70px; letter-spacing: 4px; color: var(--secondary-c); text-transform: uppercase; diff --git a/src/pages/home/sections/section1/Section1.js b/src/pages/home/sections/section1/Section1.js index c0482d5..aa3c575 100644 --- a/src/pages/home/sections/section1/Section1.js +++ b/src/pages/home/sections/section1/Section1.js @@ -15,8 +15,8 @@ import "../../../../../node_modules/font-awesome/css/font-awesome.min.css"; import register from "../../../../assets/images/register.pdf"; const Section1 = () => { - const c1 = "#7f00a6"; - const c2 = "#b200ee"; + // const c1 = "#7f00a6"; + // const c2 = "#b200ee"; React.useEffect(() => { const script = document.createElement("script"); @@ -29,122 +29,122 @@ const Section1 = () => { }; }, []); - const canvasRef = useRef(null); - useEffect(() => { - // Draw canvas here... - const canvas = canvasRef.current; - const c = canvas.getContext("2d"); + // const canvasRef = useRef(null); + // useEffect(() => { + // // Draw canvas here... + // const canvas = canvasRef.current; + // const c = canvas.getContext("2d"); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + // canvas.width = window.innerWidth; + // canvas.height = window.innerHeight; - var particleCount = 750; - var mouse = { - x: window.innerWidth / 2, - y: window.innerHeight / 2, - }; + // var particleCount = 750; + // var mouse = { + // x: window.innerWidth / 2, + // y: window.innerHeight / 2, + // }; - canvas.addEventListener("mousemove", function (event) { - mouse.x = event.clientX - canvas.width / 2; - mouse.y = event.clientY - canvas.height / 2; - }); + // canvas.addEventListener("mousemove", function (event) { + // mouse.x = event.clientX - canvas.width / 2; + // mouse.y = event.clientY - canvas.height / 2; + // }); - function LightParticle(x, y, radius, color) { - this.x = x; - this.y = y; - this.radius = radius; - this.color = color; + // function LightParticle(x, y, radius, color) { + // this.x = x; + // this.y = y; + // this.radius = radius; + // this.color = color; - this.update = function () { - this.draw(); - }; + // this.update = function () { + // this.draw(); + // }; - this.draw = function () { - c.save(); - c.beginPath(); - c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); - c.shadowColor = this.color; - c.shadowBlur = 15; - c.shadowOffsetX = 0; - c.shadowOffsetY = 0; - c.fillStyle = this.color; - c.fill(); - c.closePath(); - c.restore(); - }; - } + // this.draw = function () { + // c.save(); + // c.beginPath(); + // c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); + // c.shadowColor = this.color; + // c.shadowBlur = 15; + // c.shadowOffsetX = 0; + // c.shadowOffsetY = 0; + // c.fillStyle = this.color; + // c.fill(); + // c.closePath(); + // c.restore(); + // }; + // } - var lightParticles = []; + // var lightParticles = []; - var timer = 0; - var opacity = 1; - var speed = 0.0005; - var colors = [c1, c2, "#fbfbdd", "#333333", "#F2E8C9"]; + // var timer = 0; + // var opacity = 1; + // var speed = 0.0005; + // var colors = [c1, c2, "#fbfbdd", "#333333", "#F2E8C9"]; - var initializeParticles; + // var initializeParticles; - (initializeParticles = function () { - for (var i = 0; i < particleCount; i++) { - var randomColorIndex = Math.floor(Math.random() * 6); - var randomRadius = Math.random() * 2; + // (initializeParticles = function () { + // for (var i = 0; i < particleCount; i++) { + // var randomColorIndex = Math.floor(Math.random() * 6); + // var randomRadius = Math.random() * 2; - // Ensure particles are spawned past screen width and height so - // there will be no missing stars when rotating canvas - var x = Math.random() * (canvas.width + 200) - (canvas.width + 200) / 2; - var y = Math.random() * (canvas.width + 200) - (canvas.width + 200) / 2; - lightParticles.push( - new LightParticle(x, y, randomRadius, colors[randomColorIndex]) - ); - } - })(); + // // Ensure particles are spawned past screen width and height so + // // there will be no missing stars when rotating canvas + // var x = Math.random() * (canvas.width + 200) - (canvas.width + 200) / 2; + // var y = Math.random() * (canvas.width + 200) - (canvas.width + 200) / 2; + // lightParticles.push( + // new LightParticle(x, y, randomRadius, colors[randomColorIndex]) + // ); + // } + // })(); - function animate() { - window.requestAnimationFrame(animate); + // function animate() { + // window.requestAnimationFrame(animate); - c.save(); - if (isMouseDown === true) { - // Ease into the new opacity - var desiredOpacity = 0.01; - opacity += (desiredOpacity - opacity) * 0.03; - c.fillStyle = "rgba(0, 0, 0," + opacity + ")"; + // c.save(); + // if (isMouseDown === true) { + // // Ease into the new opacity + // var desiredOpacity = 0.01; + // opacity += (desiredOpacity - opacity) * 0.03; + // c.fillStyle = "rgba(0, 0, 0," + opacity + ")"; - // Ease into the new speed - var desiredSpeed = 0.012; - speed += (desiredSpeed - speed) * 0.01; - timer += speed; - } else { - // Ease back to the original opacity - var originalOpacity = 1; - opacity += (originalOpacity - opacity) * 0.01; - c.fillStyle = "rgba(0, 0, 0, " + opacity + ")"; + // // Ease into the new speed + // var desiredSpeed = 0.012; + // speed += (desiredSpeed - speed) * 0.01; + // timer += speed; + // } else { + // // Ease back to the original opacity + // var originalOpacity = 1; + // opacity += (originalOpacity - opacity) * 0.01; + // c.fillStyle = "rgba(0, 0, 0, " + opacity + ")"; - // Ease back to the original speed - var originalSpeed = 0.001; - speed += (originalSpeed - speed) * 0.01; - timer += speed; - } + // // Ease back to the original speed + // var originalSpeed = 0.001; + // speed += (originalSpeed - speed) * 0.01; + // timer += speed; + // } - c.fillRect(0, 0, canvas.width, canvas.height); - c.translate(canvas.width / 2, canvas.height / 2); - c.rotate(timer); + // c.fillRect(0, 0, canvas.width, canvas.height); + // c.translate(canvas.width / 2, canvas.height / 2); + // c.rotate(timer); - for (var i = 0; i < lightParticles.length; i++) { - lightParticles[i].update(); - } + // for (var i = 0; i < lightParticles.length; i++) { + // lightParticles[i].update(); + // } - c.restore(); - } - animate(); - var isMouseDown = false; + // c.restore(); + // } + // animate(); + // var isMouseDown = false; - window.addEventListener("mousedown", function () { - isMouseDown = true; - }); + // window.addEventListener("mousedown", function () { + // isMouseDown = true; + // }); - window.addEventListener("mouseup", function () { - isMouseDown = false; - }); - }, []); + // window.addEventListener("mouseup", function () { + // isMouseDown = false; + // }); + // }, []); return ( { className="codeutsava__section1" id="home" > - + /> */}
{ > Central India's{" "} Largest Coding Event.{" "} - Stay Tuned! + Join Us on 1st - 2nd November.
{ - const [formData, setFormData] = useState({}); - const [sentT, setSentT] = useState("Send"); - const handleChange = (e) => { - setFormData({ ...formData, [e.target.name]: e.target.value }); - }; - var emailData = { - service_id: "service_y25o3tu", - template_id: "TCP-Tech_Response", - user_id: "kE8yPfFnAkGs6aRJk", - template_params: { - person_name: formData.name, - mobile_no: formData.contact, - email_id: formData.email, - message: formData.message, - }, - }; - console.log(emailData); - const handleButtonClick = (e) => { - e.preventDefault(); - fetch("https://api.emailjs.com/api/v1.0/email/send", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(emailData), - }).then( - (response) => { - console.log(response); - }, - (err) => { - console.log(err); - } - ); - }; - console.log(formData); - return ( - -
- Have Some Questions? - -
-
-
-
Contact Us
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- -
-
- - ); -}; - -export default Section16;