feat: Hero Button Animation, Portfolio Section, Footer Section

This commit is contained in:
Dex404 2024-04-04 18:04:35 +00:00
commit ea37f92b5b
17 changed files with 746 additions and 134 deletions

55
app/about/page.tsx Normal file
View file

@ -0,0 +1,55 @@
import React, { useRef, useEffect, useState } from "react";
const MouseTrackingGlowEffect: React.FC = () => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const [isHovered, setIsHovered] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleMouseMove = (event: MouseEvent) => {
setPosition({ x: event.clientX, y: event.clientY });
};
const handleMouseEnter = () => {
setIsHovered(true);
};
const handleMouseLeave = () => {
setIsHovered(false);
};
const container = containerRef.current;
if (container) {
container.addEventListener("mousemove", handleMouseMove);
container.addEventListener("mouseenter", handleMouseEnter);
container.addEventListener("mouseleave", handleMouseLeave);
}
return () => {
if (container) {
container.removeEventListener("mousemove", handleMouseMove);
container.removeEventListener("mouseenter", handleMouseEnter);
container.removeEventListener("mouseleave", handleMouseLeave);
}
};
}, []);
return (
<div
ref={containerRef}
className="relative w-screen h-screen overflow-hidden"
>
<div
className={`absolute top-0 left-0 w-64 h-64 bg-blue-500 rounded-full filter ${
isHovered ? "blur-xl" : "blur-none"
}`}
style={{
transform: `translate(${position.x - 32}px, ${position.y - 32}px)`,
}}
></div>
</div>
);
};
export default MouseTrackingGlowEffect;

View file

@ -1,16 +1,16 @@
import "styles/tailwind.css"
import "styles/custom.css"
import Navbar from "components/Navbar/Navbar"
import Footer from "components/Footer/Footer"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<body className="bg-[#0f172a] ">
<Navbar logoSrc="/images/image-removebg-preview (1).png" />
{children}</body>
{children}
<Footer />
</body>
</html>
)
}

View file

@ -1,10 +1,16 @@
"use client"
import { Metadata } from "next"
import { Button } from "components/Button/Button"
import { InfiniteSlider } from "components/Slider/Slider"
import Navbar from "components/Navbar/Navbar"
import { FaArrowRight, FaFileCsv, FaHandPaper, FaNewspaper } from "react-icons/fa"
import { LP_GRID_ITEMS } from "lp-items"
import { FaArrowRight, FaFileCsv, FaNewspaper } from "react-icons/fa"
import "../styles/custom.css"
import { MdOutlineWeb } from "react-icons/md"
import { TiTick } from "react-icons/ti"
import { useState } from "react"
import { MdOutlineAppSettingsAlt } from "react-icons/md"
import { Glow, GlowCapture } from "@codaworks/react-glow"
export default function Web() {
const [hovered, setHovered] = useState(false)
@ -12,14 +18,15 @@ export default function Web() {
transform: hovered ? "translateX(2px)" : "none",
transition: "transform .2s", // Optional: Smooth transition
}
return (
<div>
<section className="h-[60%] bg-[#0f172a] pl-[15%] pr-[15%] ">
<section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
<div
className=" h-[80%] rounded-[3rem] pt-[10%]"
style={{
backgroundImage: `url('/images/glow-bottom.svg')`,
backgroundSize: "cover",
backgroundSize: "fill",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
@ -29,22 +36,22 @@ export default function Web() {
<h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-5xl xl:text-6xl">
Experience the next dimension
</h1>
<p className="mb-6 max-w-2xl font-light text-gray-200 text-slate-100 md:text-lg lg:mb-8 lg:text-xl">
<p className="mb-6 max-w-2xl font-light text-gray-200 md:text-lg lg:mb-8 lg:text-xl">
Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software
solutions powered by AI.
</p>
<Button
href="https://github.com/Blazity/next-enterprise"
className="mr-3"
className="mr-3 "
intent="hero1"
size="hero1"
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
<span className="">Get started</span>
<span>Get started</span>
<div className="ml-2">
<span>
<FaArrowRight style={imgStyle} />
<FaArrowRight style={imgStyle} className="text-orange-500" />
</span>
</div>
</Button>
@ -62,8 +69,7 @@ export default function Web() {
<InfiniteSlider />
</div>
</section>
<section className="h-[100vh] bg-[#0f172a] pl-[15%] pr-[15%] ">
<section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
<div
className=" h-[60%] rounded-[3rem]"
style={{
@ -73,105 +79,247 @@ export default function Web() {
backgroundRepeat: "no-repeat",
}}
>
<div>
<div className="flex w-[100%] items-center justify-around pb-[10vh] pt-[5vh]">
<div className="mx-auto max-w-screen-xl px-4 py-8 lg:py-16">
<div className="mx-auto text-left text-white">
<h4 className="bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 bg-clip-text pt-20 font-bold text-transparent ">
About VizoleLabs
About Vizole Labs
</h4>
<div className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
<div className="mb-4 max-w-2xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
<h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text text-transparent">
Our Mission in Motion
We are a new digital product development agency
</h2>
</div>
<h3 className="mr-90 text-slate-300">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, totam culpa officia ad esse
<h3 className="mr-90 max-w-2xl text-slate-300">
we're dedicated to bringing your ideas to life with innovative solutions tailored to your unique
needs.
</h3>
<div>
<ul className="grid w-1/3 md:grid-cols-1">
<div className="mt-5 pt-2">
<li>
<input
type="radio"
id="item01"
name="items"
value="item-01"
className="peer hidden"
defaultChecked
/>
<label
htmlFor="item01"
className="inline-flex w-full cursor-pointer items-center rounded-lg border border-gray-200 bg-transparent p-2 text-gray-500 hover:bg-homeBg2 peer-checked:border-blue-600 peer-checked:text-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:peer-checked:text-blue-500"
>
<FaNewspaper className="mr-2" />
<div className="block">
<div className="w-full">Section 01</div>
</div>
</label>
</li>
</div>
<div className="pt-2">
<li>
<input type="radio" id="item02" name="items" value="item-02" className="peer hidden" />
<label
htmlFor="item02"
className="inline-flex w-full cursor-pointer items-center rounded-lg border border-gray-200 bg-transparent p-2 text-gray-500 hover:bg-homeBg2 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500"
>
<FaNewspaper className="mr-2" />
<div className="block">
<div className="w-full">Section 02</div>
</div>
</label>
</li>
</div>
<div className="pt-2">
<li>
<input type="radio" id="item03" name="items" value="item-03" className="peer hidden" />
<label
htmlFor="item03"
className="inline-flex w-full cursor-pointer items-center rounded-lg border border-gray-200 bg-transparent p-2 text-gray-500 hover:bg-homeBg2 hover:text-gray-600 peer-checked:border-blue-600 peer-checked:text-white dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-blue-500"
>
<FaNewspaper className="mr-2" />
<div className="block">
<div className="w-full">Section 03</div>
</div>
</label>
</li>
</div>
</ul>
</div>
</div>
<div className="mx-auto mt-3 flex flex-col justify-around text-left text-white">
<Button
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
intent="aboutUs"
size="hero1"
>
<TiTick className="mr-2 h-5 w-5" />
Expertise and Experience
</Button>
<Button
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
intent="aboutUs"
size="hero1"
>
<TiTick className="mr-2 h-5 w-5" />
Client-Centric Approach
</Button>
<Button
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
intent="aboutUs"
size="hero1"
>
<TiTick className="mr-2 h-5 w-5" />
Innovation at the Core
</Button>
</div>
</div>
<div>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/_vhf0RZg0fg"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
></iframe>
</div>
</div>
</div>
</section>
<section className="mt-[3%] bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
<div className="flex flex-col items-center justify-around">
<div className="mb-4 max-w-3xl text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
<h2 className="">Our Services</h2>
</div>
<p className="mb-6 max-w-2xl text-center font-light text-gray-200 md:text-lg lg:mb-8 lg:text-xl">
Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions
powered by AI.
</p>
</div>
<div className="mt-10 grid max-w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2">
<div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
<div className=" text-center">
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
<MdOutlineWeb className="h-[80px] w-[80px] text-white" />
</div>
</div>
<div className="flex h-full flex-col rounded-lg ">
<div className="mb-3 flex items-center ">
<h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
Web Devlopment
</h2>
</div>
<div className="flex flex-grow flex-col justify-between">
<p className="text-base leading-relaxed text-gray-300">
We specialize in creating modern, user-friendly websites that reflect your brand and drive business
growth.
</p>
<a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
Learn More
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
className="ml-2 h-4 w-4"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
<div className=" text-center">
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
<MdOutlineAppSettingsAlt className="h-[80px] w-[80px] text-white" />
</div>
</div>
<div className="flex h-full flex-col rounded-lg ">
<div className="mb-3 flex items-center ">
<h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
IOS / Android App Development
</h2>
</div>
<div className="flex flex-grow flex-col justify-between">
<p className="text-base leading-relaxed text-gray-300">
We specialize in creating modern, user-friendly websites that reflect your brand and drive business
growth.
</p>
<a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
Learn More
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
className="ml-2 h-4 w-4"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
<div className=" text-center">
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
<MdOutlineWeb className="h-[80px] w-[80px] text-white" />
</div>
</div>
<div className="flex h-full flex-col rounded-lg ">
<div className="mb-3 flex items-center ">
<h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
Web Devlopment
</h2>
</div>
<div className="flex flex-grow flex-col justify-between">
<p className="text-base leading-relaxed text-gray-300">
We specialize in creating modern, user-friendly websites that reflect your brand and drive business
growth.
</p>
<a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
Learn More
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
className="ml-2 h-4 w-4"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
<div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
<div className=" text-center">
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
<MdOutlineWeb className="h-[80px] w-[80px] text-white" />
</div>
</div>
<div className="flex h-full flex-col rounded-lg ">
<div className="mb-3 flex items-center ">
<h2 className="mb-4 max-w-3xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-3xl">
Web Devlopment
</h2>
</div>
<div className="flex flex-grow flex-col justify-between">
<p className="text-base leading-relaxed text-gray-300">
We specialize in creating modern, user-friendly websites that reflect your brand and drive business
growth.
</p>
<a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
Learn More
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
className="ml-2 h-4 w-4"
viewBox="0 0 24 24"
>
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<section className="h-[150vh] bg-[#0f172a] pl-[10%] pr-[10%] ">
<section className="h-[150vh] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
<div className="mx-auto place-self-center text-center">
<h1 className="mb-4 text-4xl font-extrabold tracking-tight text-white md:text-5xl xl:text-6xl">
Lorem. Ipsam.
</h1>
<p className="text-2xl text-gray-600">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, veniam aperiam! Delectus, tempora, est
perferendis repellat explicabo nesciunt facere totam quod quos ratione distinctio? Voluptates in
necessitatibus quam fugiat quo!
</p>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="col-span-3 mt-10 h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
<div
className=" h-[100%] rounded-[3rem]"
style={{
backgroundImage: `url('/images/glow-bottom.svg')`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
>
<p></p>
</div>
<div className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
<h1 className="">Our Portfolio</h1>
</div>
<p className="pl-5 pr-5 text-2xl text-white">
The showcase of our innovations. Dive in to explore our diverse range of projects and see how we’re driving
digital transformation across industries.”
</p>
<div className="grid max-w-full grid-cols-3 gap-4 sm:grid-cols-1 md:grid-cols-3">
<div className="col-span-3 mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
<div
className=" h-[100%] rounded-[3rem]"
style={{
backgroundImage: `url('/images/glow-bottom.svg')`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
>
<p></p>
</div>
</div>
<div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
<div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
<div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
</div>
</div>
</section>
<section className="h-[50vh] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
<div className="mx-auto place-self-center text-center">
<div className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
<h1 className="">Contact US</h1>
</div>
<div className="max-w-70% col-span-2 mt-10 h-[50vh] rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
<div className="mt-10 h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
</div>
</section>
</div>