diff --git a/app/page.tsx b/app/page.tsx index 4cfacf0..db98a07 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,20 +1,14 @@ "use client" -import { Metadata } from "next" + import { Button } from "components/Button/Button" import { InfiniteSlider } from "components/Slider/Slider" import { useState } from "react" -import Navbar from "components/Navbar/Navbar" -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 { MdOutlineAppSettingsAlt } from "react-icons/md" import { Glow, GlowCapture } from "@codaworks/react-glow" -import StarBackground from "components/StarBackground/StarBackground" -import { Textarea } from "@nextui-org/react" import ImageFilter from "components/ImageFilter/ImageFilter" -import { BackgroundBeams } from "components/Ui/BackgroundBeams" +import { BsGlobe2, BsAndroid, BsApple, BsHeadsetVr } from "react-icons/bs" export default function Web() { const [init, setInit] = useState(false) @@ -160,7 +154,7 @@ export default function Web() {
- +
@@ -171,8 +165,7 @@ export default function Web() {

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

- +

- IOS / Android App Development + IOS Application Development

- We specialize in creating modern, user-friendly websites that reflect your brand and drive - business growth. + Our skilled team designs and develops intuitive iOS apps that seamlessly integrate with Apple + devices.

- +

- Web Devlopment + Android Application Development

- We specialize in creating modern, user-friendly websites that reflect your brand and drive - business growth. + From concept to deployment, we create robust Android apps that cater to a diverse user base.

- +

- Web Devlopment + Apps for AR Devices

- We specialize in creating modern, user-friendly websites that reflect your brand and drive - business growth. + Immerse users in augmented reality experiences with our cutting-edge applications for MetaQuest + and Apple Vision Pro.

-
+

@@ -329,10 +321,12 @@ export default function Web() { digital transformation across industries.”

- +
+ +
-
+

Contact Us diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx index 68c83ef..0f379b2 100644 --- a/components/Button/Button.tsx +++ b/components/Button/Button.tsx @@ -17,6 +17,28 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center", "border-2", "border-slate-100", ], + navSignIn: [ + "bg-transparent", + "justify-center", + "text-slate-200", + "rounded-[30px]", + "hover:text-white", + "border-solid", + "border-0", + "border-slate-100", + "mr-2", + ], + navSignUp: [ + "justify-center", + "text-slate-100", + "hover:text-white", + "rounded-[30px]", + "border-solid", + "border-2", + "border-slate-100", + "flex", + "mx-auto", + ], hero1: [ "text-black", "bg-white", diff --git a/components/ImageFilter/ImageFilter.tsx b/components/ImageFilter/ImageFilter.tsx index 9c8f796..a21f218 100644 --- a/components/ImageFilter/ImageFilter.tsx +++ b/components/ImageFilter/ImageFilter.tsx @@ -2,7 +2,7 @@ import { Button } from "components/Button/Button" import { useState } from "react" -import { Image } from "./image" +import { ImageCard } from "./image" import { FilterableData } from "./FilterableData" import { CardBody, CardContainer, CardItem } from "components/Ui/Card" import { motion } from "framer-motion" // Import motion @@ -33,11 +33,16 @@ const ImageFilter = () => { ))} {/* filtered cards display */}

-
+ {/*
*/} +
{FilterableData.map((item, index) => ( { > - {item.name} = { } type ImageProps = ImageOwnProps & Omit, keyof ImageOwnProps> +import Image from "next/image" -export const Image = ({ +export const ImageCard = ({ className, image, alt, @@ -19,7 +20,7 @@ export const Image = ({ const Component = as || "div" return ( - {alt} + {alt} ) } diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx index 809552f..23b278f 100644 --- a/components/Navbar/Navbar.tsx +++ b/components/Navbar/Navbar.tsx @@ -1,50 +1,99 @@ +"use client" interface NavbarProps { - logoSrc: string; // Path to your logo image + logoSrc: string // Path to your logo image +} + +import { useState, useEffect } from "react" +import { Button } from "components/Button/Button" +import { FaArrowRight } from "react-icons/fa" + +const Navbar: React.FC = ({ logoSrc }) => { + const [showBackground, setShowBackground] = useState(false) + const TOP_OFFSET = 50 + + useEffect(() => { + const handleScroll = () => { + if (window.scrollY >= TOP_OFFSET) { + setShowBackground(true) + } else { + setShowBackground(false) + } + } + + window.addEventListener("scroll", handleScroll) + + return () => { + window.removeEventListener("scroll", handleScroll) + } + }, []) + + const [hovered, setHovered] = useState(false) + const imgStyle = { + transform: hovered ? "translateX(3px)" : "none", + transition: "transform .2s", // Optional: Smooth transition } - - const Navbar: React.FC = ({ logoSrc }) => { - return ( - - ); - }; - - export default Navbar; \ No newline at end of file + + return ( + + ) +} + +export default Navbar diff --git a/public/images/image-removebg-preview (1).png b/public/images/image-removebg-preview (1).png index a95bca9..f36da4c 100644 Binary files a/public/images/image-removebg-preview (1).png and b/public/images/image-removebg-preview (1).png differ