diff --git a/app/page.tsx b/app/page.tsx index f543c2d..56507f5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,15 +1,15 @@ "use client" import { Button } from "components/Button/Button" -import { InfiniteSlider } from "components/Slider/Slider" + import { useState } from "react" -import { FaArrowRight, FaFileCsv, FaNewspaper } from "react-icons/fa" + import "../styles/custom.css" -import { TiTick } from "react-icons/ti" -import { Glow, GlowCapture } from "@codaworks/react-glow" -import ImageFilter from "components/ImageFilter/ImageFilter" -import { BsGlobe2, BsAndroid, BsApple, BsHeadsetVr } from "react-icons/bs" -import { motion } from "framer-motion" +import AboutUs from "components/aboutUs/AboutUs" +import Hero01 from "components/Hero01/Hero01" +import OurServices from "components/OurServices/OurServices" +import Portfolio from "components/Portfolio/Portfolio" +import ContactUs from "components/ContactUs/ContactUs" export default function Web() { const [init, setInit] = useState(false) @@ -25,386 +25,21 @@ export default function Web() { return (
-
-
-
-
- - {" "} - {"Experience the next dimension".split(" ").map((word, index) => ( - - {word}{" "} - - ))} - - - {"Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions powered by AI." - .split(" ") - .map((word, index) => ( - - {word}{" "} - - ))} - - - -
-
-
-
- -
- {/* */} -
+
-
-
-
-
-

- About Vizole Labs -

-
-

- We are a new digital product development agency -

-
-

- we're dedicated to bringing your ideas to life with innovative solutions tailored to your unique - needs. -

-
- -
- - - -
-
-
- -
-
-
+
-
- -
-
-

- Our Services -

-
-

- Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software - solutions powered by AI. -

-
-
- -
-
-
- -
-
-
-
-

- Web Devlopment -

-
-
-

- We craft engaging and responsive websites that captivate users and drive business growth. -

- - Learn More - - - - -
-
-
- - -
-
-
- -
-
-
-
-

- IOS Application Development -

-
-
-

- Our skilled team designs and develops intuitive iOS apps that seamlessly integrate with Apple - devices. -

- - Learn More - - - - -
-
-
- - -
-
-
- -
-
-
-
-

- Android Application Development -

-
-
-

- From concept to deployment, we create robust Android apps that cater to a diverse user base. -

- - Learn More - - - - -
-
-
- - -
-
-
- -
-
-
-
-

- Apps for AR Devices -

-
-
-

- Immerse users in augmented reality experiences with our cutting-edge applications for MetaQuest - and Apple Vision Pro. -

- - Learn More - - - - -
-
-
- -
- -
+
-
-
-

- Our Portfolio -

-
-

- The showcase of our innovations. Dive in to explore our diverse range of projects and see how we’re driving - digital transformation across industries.” -

-
-
- -
+
-
-

- Contact Us -

-

- Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let - us know. -

-
-
- - -
-
- - -
-
- - -
- -
-
+
) diff --git a/components/ContactUs/ContactUs.tsx b/components/ContactUs/ContactUs.tsx new file mode 100644 index 0000000..7850085 --- /dev/null +++ b/components/ContactUs/ContactUs.tsx @@ -0,0 +1,59 @@ +import { Button } from "components/Button/Button" + +export default function ContactUs() { + return ( +
+

+ Contact Us +

+

+ Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let us + know. +

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ ) +} diff --git a/components/Hero01/Hero01.tsx b/components/Hero01/Hero01.tsx new file mode 100644 index 0000000..0b44a6d --- /dev/null +++ b/components/Hero01/Hero01.tsx @@ -0,0 +1,90 @@ +"use client" +import { Button } from "components/Button/Button" +import { InfiniteSlider } from "components/Slider/Slider" +import { motion } from "framer-motion" +import { useState } from "react" +import { FaArrowRight } from "react-icons/fa" + +export default function Hero01() { + const [init, setInit] = useState(false) + const [hovered, setHovered] = useState(false) + const imgStyle = { + transform: hovered ? "translateX(3px)" : "none", + transition: "transform .2s", // Optional: Smooth transition + } + const wordVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.9, staggerChildren: 0.1 } }, + } + return ( +
+
+
+
+ + {" "} + {"Experience the next dimension".split(" ").map((word, index) => ( + + {word}{" "} + + ))} + + + {"Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions powered by AI." + .split(" ") + .map((word, index) => ( + + {word}{" "} + + ))} + + + +
+
+
+
+ +
+ {/* */} +
+ ) +} diff --git a/components/OurServices/OurServices.tsx b/components/OurServices/OurServices.tsx new file mode 100644 index 0000000..7d62b6b --- /dev/null +++ b/components/OurServices/OurServices.tsx @@ -0,0 +1,166 @@ +import { GlowCapture, Glow } from "@codaworks/react-glow" +import { BsAndroid, BsApple, BsGlobe2, BsHeadsetVr } from "react-icons/bs" + +export default function OurServices() { + return ( +
+ +
+
+

+ Our Services +

+
+

+ Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions + powered by AI. +

+
+
+ +
+
+
+ +
+
+
+
+

+ Web Devlopment +

+
+
+

+ We craft engaging and responsive websites that captivate users and drive business growth. +

+ + Learn More + + + + +
+
+
+ + +
+
+
+ +
+
+
+
+

+ IOS Application Development +

+
+
+

+ Our skilled team designs and develops intuitive iOS apps that seamlessly integrate with Apple + devices. +

+ + Learn More + + + + +
+
+
+ + +
+
+
+ +
+
+
+
+

+ Android Application Development +

+
+
+

+ From concept to deployment, we create robust Android apps that cater to a diverse user base. +

+ + Learn More + + + + +
+
+
+ + +
+
+
+ +
+
+
+
+

+ Apps for AR Devices +

+
+
+

+ Immerse users in augmented reality experiences with our cutting-edge applications for MetaQuest and + Apple Vision Pro. +

+ + Learn More + + + + +
+
+
+ +
+ +
+ ) +} diff --git a/components/Portfolio/Portfolio.tsx b/components/Portfolio/Portfolio.tsx new file mode 100644 index 0000000..7527ca5 --- /dev/null +++ b/components/Portfolio/Portfolio.tsx @@ -0,0 +1,22 @@ +import ImageFilter from "components/ImageFilter/ImageFilter" + +export default function Portfolio() { + return ( + <> +
+
+

+ Our Portfolio +

+
+

+ The showcase of our innovations. Dive in to explore our diverse range of projects and see how we’re driving + digital transformation across industries.” +

+
+
+ +
+ + ) +} diff --git a/components/aboutUs/AboutUs.tsx b/components/aboutUs/AboutUs.tsx new file mode 100644 index 0000000..bc372cf --- /dev/null +++ b/components/aboutUs/AboutUs.tsx @@ -0,0 +1,69 @@ +import { Button } from "components/Button/Button" +import { TiTick } from "react-icons/ti" + +export default function AboutUs() { + return ( +
+
+
+
+

+ About Vizole Labs +

+
+

+ We are a new digital product development agency +

+
+

+ we're dedicated to bringing your ideas to life with innovative solutions tailored to your unique needs. +

+
+ +
+ + + +
+
+
+ +
+
+
+ ) +}