diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..cb9adc6 --- /dev/null +++ b/app/about/page.tsx @@ -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(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 ( +
+
+
+ ); +}; + +export default MouseTrackingGlowEffect; diff --git a/app/layout.tsx b/app/layout.tsx index 4c103ff..6cca4bb 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -7,7 +7,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - + {children} diff --git a/app/page.tsx b/app/page.tsx index e77023f..2585ab1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,44 +1,54 @@ +"use client" import { Metadata } from "next" import { Button } from "components/Button/Button" -import { InfiniteSlider } from "components/Slider/Slider"; +import { InfiniteSlider } from "components/Slider/Slider" import Navbar from "components/Navbar/Navbar" import { LP_GRID_ITEMS } from "lp-items" -import { FaArrowRight, FaFileCsv } from "react-icons/fa"; -import '../styles/custom.css' +import { FaArrowRight, FaFileCsv } 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" export default function Web() { + + return (
-
-
+
+

Experience the next dimension

-

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

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

-
-
@@ -46,28 +56,222 @@ export default function Web() {
-
-
-
- +
+
+
-
-

About VizoleLabs

-
-

Our Mission in Motion

+
+

+ About Vizole Labs +

+
+

+ We are a new digital product development agency +

-

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, totam culpa officia ad esse

+

+ 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 specialize in creating modern, user-friendly websites that reflect your brand and drive business + growth. +

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

+ IOS / Android App Development +

+
+
+

+ We specialize in creating modern, user-friendly websites that reflect your brand and drive business + growth. +

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

+ Web Devlopment +

+
+
+

+ We specialize in creating modern, user-friendly websites that reflect your brand and drive business + growth. +

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

+ Web Devlopment +

+
+
+

+ We specialize in creating modern, user-friendly websites that reflect your brand and drive business + growth. +

+ + Learn More + + + + +
+
+
+
+
+
) } diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx index 3537d9d..8a993b5 100644 --- a/components/Button/Button.tsx +++ b/components/Button/Button.tsx @@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge" const button = cva( [ - "justify-center", + "inline-flex", "items-center", "rounded-xl", @@ -15,10 +15,10 @@ const button = cva( { variants: { intent: { - primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"], - secondary: ["bg-transparent", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"], - hero1: ["text-black", "bg-white", "font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2", "border-solid", "border-2", "border-slate-100"], - aboutUs: ["bg-transparent", "w-1/4", "hover:bg-blue-500", "text-white", "font-semibold", "hover:text-white", "py-2", "px-4", "border", "border-blue-500", "hover:border-transparent", "rounded", "flex", "text-left"] + primary: ["bg-blue-400", "justify-center", "text-white", "hover:enabled:bg-blue-700"], + secondary: ["bg-transparent", "justify-center", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"], + hero1: ["text-black", "bg-white", "justify-center","font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2", "border-solid", "border-2", "border-slate-100"], + aboutUs: ["text-left","bg-transparent", "text-white", "font-semibold", "hover:text-white", "py-2", "px-4", "border", "border-gray-400","transition-all", "hover:border-white", "rounded", "flex", , "my-1","w-[50%]"] }, size: { sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"], diff --git a/components/Navbar/icons/icon1.tsx b/components/Navbar/icons/icon1.tsx new file mode 100644 index 0000000..38f18f5 --- /dev/null +++ b/components/Navbar/icons/icon1.tsx @@ -0,0 +1,9 @@ + + +function Aws(){ + + + +} + +export default Aws \ No newline at end of file diff --git a/components/Slider/Slider.tsx b/components/Slider/Slider.tsx index 17b688e..ab9fb4d 100644 --- a/components/Slider/Slider.tsx +++ b/components/Slider/Slider.tsx @@ -12,32 +12,27 @@ import { } from "@radix-ui/react-icons" const LOGOS = [ - , - , - , - , - , - , - , - , - , - , + "/images/Amazon_Web_Services-Logo.wine.svg", + "/images/Cisco_Systems-Logo.wine.svg", + "/images/Oracle_Database-Logo.wine.svg", + "/images/ids.svg", + "/images/yanolja-icon.svg", ] export const InfiniteSlider = () => { return ( // bg-gradient-to-r from-black to-transparent //
-
+
{LOGOS.map((logo, index) => ( -
- {logo} +
+
))} {LOGOS.map((logo, index) => ( -
- {logo} +
+
))}
diff --git a/public/images/Amazon_Web_Services-Logo.wine.svg b/public/images/Amazon_Web_Services-Logo.wine.svg index b3049e1..0e42044 100644 --- a/public/images/Amazon_Web_Services-Logo.wine.svg +++ b/public/images/Amazon_Web_Services-Logo.wine.svg @@ -1 +1,23 @@ - \ No newline at end of file + + + + + + + + + + \ No newline at end of file diff --git a/public/images/Cisco_Systems-Logo.wine.svg b/public/images/Cisco_Systems-Logo.wine.svg index 476a10f..20ddaa1 100644 --- a/public/images/Cisco_Systems-Logo.wine.svg +++ b/public/images/Cisco_Systems-Logo.wine.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + + + + + + + + \ No newline at end of file diff --git a/public/images/Oracle_Database-Logo.wine.svg b/public/images/Oracle_Database-Logo.wine.svg index a673f35..3cd5b99 100644 --- a/public/images/Oracle_Database-Logo.wine.svg +++ b/public/images/Oracle_Database-Logo.wine.svg @@ -1 +1,6 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/public/images/ids.svg b/public/images/ids.svg new file mode 100644 index 0000000..9302f72 --- /dev/null +++ b/public/images/ids.svg @@ -0,0 +1,42 @@ + + + + + + \ No newline at end of file diff --git a/public/images/yanolja-icon.svg b/public/images/yanolja-icon.svg new file mode 100644 index 0000000..3ec79a2 --- /dev/null +++ b/public/images/yanolja-icon.svg @@ -0,0 +1,17 @@ + + + + + + + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index cdfd3cd..e845e7a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,8 +16,8 @@ module.exports = { ], theme: { extend: { - colors: { + black: "#0f172a", primary: { 50: "#eff6ff", 100: "#dbeafe", @@ -34,7 +34,7 @@ module.exports = { vizoleG2: "#F5887A", vizoleG3: "#F5887A", homeBg: "#0f172a", - homeBg2: "#0c1324" + homeBg2: "#0c1324", }, fontFamily: { body: [ @@ -100,7 +100,9 @@ module.exports = { }, }, }, - plugins: [], + plugins: [ + + ], future: { hoverOnlyWhenSupported: true, },