feat: Scroll Animations
This commit is contained in:
Dex404
parent
84c14cec5a
commit
ff7bbd72a4
16 changed files with 769 additions and 319 deletions
|
|
@ -1,175 +1,189 @@
|
|||
import { Glow, GlowCapture } from "@codaworks/react-glow"
|
||||
import { BsAndroid, BsApple, BsGlobe2, BsHeadsetVr } from "react-icons/bs"
|
||||
|
||||
import MoveLeftWhenVisible from "utils/ScrollAnimations/MoveLeftOnScroll"
|
||||
import MoveUpWhenVisible from "utils/ScrollAnimations/MoveUpOnScroll"
|
||||
export default function OurServices() {
|
||||
return (
|
||||
<div>
|
||||
<GlowCapture>
|
||||
<div className="z_fold:w-[100%] 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="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text text-transparent">
|
||||
Our Services
|
||||
</h2>
|
||||
<MoveLeftWhenVisible>
|
||||
<h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text text-transparent">
|
||||
Our Services
|
||||
</h2>
|
||||
</MoveLeftWhenVisible>
|
||||
</div>
|
||||
<p className="mb-6 max-w-2xl text-center font-light text-[#94a3b8] 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>
|
||||
<MoveLeftWhenVisible>
|
||||
<p className="mb-6 max-w-2xl text-center font-light text-[#94a3b8] 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>
|
||||
</MoveLeftWhenVisible>
|
||||
</div>
|
||||
|
||||
<div className=" mt-10 grid max-w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2">
|
||||
<Glow color="#F0B37D">
|
||||
<div className="glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsGlobe2 className="h-[50px] w-[50px] text-white" />
|
||||
<MoveUpWhenVisible>
|
||||
<div className="glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsGlobe2 className="h-[50px] w-[50px] text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="z_fold:w-[100%] flex h-full flex-col rounded-lg max-md:items-center max-md:justify-center">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
Web Devlopment
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-justify text-base leading-relaxed text-gray-300">
|
||||
We craft engaging and responsive websites that captivate users and drive business growth.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="2"
|
||||
className="ml-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="z_fold:w-[100%] flex h-full flex-col rounded-lg max-md:items-center max-md:justify-center">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
Web Devlopment
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-justify text-base leading-relaxed text-gray-300">
|
||||
We craft engaging and responsive websites that captivate users and drive business growth.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="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>
|
||||
</MoveUpWhenVisible>
|
||||
</Glow>
|
||||
<Glow color="#F0B37D">
|
||||
<div className="glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsApple className="h-[50px] w-[50px] text-white" />
|
||||
<MoveUpWhenVisible>
|
||||
<div className="glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsApple className="h-[50px] w-[50px] text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full flex-col rounded-lg max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
IOS Application Development
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-base leading-relaxed text-gray-300">
|
||||
Our skilled team designs and develops intuitive iOS apps that seamlessly integrate with Apple
|
||||
devices.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="2"
|
||||
className="ml-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="flex h-full flex-col rounded-lg max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
IOS Application Development
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-base leading-relaxed text-gray-300">
|
||||
Our skilled team designs and develops intuitive iOS apps that seamlessly integrate with Apple
|
||||
devices.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="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>
|
||||
</MoveUpWhenVisible>
|
||||
</Glow>
|
||||
<Glow color="#F0B37D">
|
||||
<div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsAndroid className="h-[50px] w-[50px] text-white" />
|
||||
<MoveUpWhenVisible>
|
||||
<div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsAndroid className="h-[50px] w-[50px] text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full flex-col rounded-lg max-md:flex-wrap max-md:items-center max-md:justify-center ">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
Android Application Development
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-base leading-relaxed text-gray-300">
|
||||
From concept to deployment, we create robust Android apps that cater to a diverse user base.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="2"
|
||||
className="ml-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="flex h-full flex-col rounded-lg max-md:flex-wrap max-md:items-center max-md:justify-center ">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
Android Application Development
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-base leading-relaxed text-gray-300">
|
||||
From concept to deployment, we create robust Android apps that cater to a diverse user base.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="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>
|
||||
</MoveUpWhenVisible>
|
||||
</Glow>
|
||||
<Glow color="#F0B37D">
|
||||
<div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsHeadsetVr className="h-[50px] w-[50px] text-white" />
|
||||
<MoveUpWhenVisible>
|
||||
<div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<div className=" text-center">
|
||||
<div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
|
||||
<BsHeadsetVr className="h-[50px] w-[50px] text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full flex-col rounded-lg max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
Apps for AR Devices
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-base leading-relaxed text-gray-300">
|
||||
Immerse users in augmented reality experiences with our cutting-edge applications for MetaQuest and
|
||||
Apple Vision Pro.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="2"
|
||||
className="ml-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
<div className="flex h-full flex-col rounded-lg max-md:flex-wrap max-md:items-center max-md:justify-center">
|
||||
<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 max-md:text-center md:text-4xl xl:text-3xl">
|
||||
Apps for AR Devices
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex flex-grow flex-col justify-between">
|
||||
<p className="text-base leading-relaxed text-gray-300">
|
||||
Immerse users in augmented reality experiences with our cutting-edge applications for MetaQuest
|
||||
and Apple Vision Pro.
|
||||
</p>
|
||||
<a
|
||||
href="#"
|
||||
className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white max-md:text-center"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
Learn More
|
||||
<svg
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
strokeWidth="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>
|
||||
</MoveUpWhenVisible>
|
||||
</Glow>
|
||||
</div>
|
||||
</GlowCapture>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue