feat: Improved Responsiveness
This commit is contained in:
Dex404
parent
c2baea19d1
commit
69a99c0013
8 changed files with 198 additions and 54 deletions
39
components/Modal/Modal.tsx
Normal file
39
components/Modal/Modal.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
interface ModalProps {
|
||||
// The content of the modal
|
||||
children: React.ReactNode
|
||||
|
||||
// The visibility of the modal
|
||||
isOpen: boolean
|
||||
|
||||
// Function to close the modal
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export const Modal: React.FC<ModalProps> = ({ children, isOpen, onClose }) => {
|
||||
if (!isOpen) return null
|
||||
|
||||
const hadleClose = (e: any) => {
|
||||
if (e.target.id === "wrapper") onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id="wrapper"
|
||||
onClick={hadleClose}
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-25 backdrop-blur-sm"
|
||||
>
|
||||
<div className="flex w-full flex-col lg:w-4/5 xl:w-3/6">
|
||||
<h1 className="cursor-pointer place-self-end font-bold text-white" onClick={() => onClose()}>
|
||||
X
|
||||
</h1>
|
||||
<div className="flex h-full w-full flex-col items-center justify-center place-self-center rounded-md bg-black p-5 drop-shadow-md">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ export default function OurServices() {
|
|||
return (
|
||||
<div>
|
||||
<GlowCapture>
|
||||
<div className="flex flex-col items-center justify-around">
|
||||
<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
|
||||
|
|
@ -16,25 +16,28 @@ export default function OurServices() {
|
|||
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=" 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">
|
||||
<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 className="flex h-full flex-col rounded-lg ">
|
||||
<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 md:text-4xl xl:text-3xl">
|
||||
<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-base leading-relaxed text-gray-300">
|
||||
<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">
|
||||
<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"
|
||||
|
|
@ -53,15 +56,15 @@ export default function OurServices() {
|
|||
</div>
|
||||
</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">
|
||||
<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 className="flex h-full flex-col rounded-lg ">
|
||||
<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 md:text-4xl xl:text-3xl">
|
||||
<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>
|
||||
|
|
@ -70,7 +73,10 @@ export default function OurServices() {
|
|||
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">
|
||||
<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"
|
||||
|
|
@ -89,15 +95,15 @@ export default function OurServices() {
|
|||
</div>
|
||||
</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">
|
||||
<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 className="flex h-full flex-col rounded-lg ">
|
||||
<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 md:text-4xl xl:text-3xl">
|
||||
<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>
|
||||
|
|
@ -105,7 +111,10 @@ export default function OurServices() {
|
|||
<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">
|
||||
<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"
|
||||
|
|
@ -124,15 +133,15 @@ export default function OurServices() {
|
|||
</div>
|
||||
</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">
|
||||
<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 className="flex h-full flex-col rounded-lg ">
|
||||
<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 md:text-4xl xl:text-3xl">
|
||||
<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>
|
||||
|
|
@ -141,7 +150,10 @@ export default function OurServices() {
|
|||
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">
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
import { Button } from "components/Button/Button"
|
||||
import { TiTick } from "react-icons/ti"
|
||||
|
||||
import { BsPlayCircle } from "react-icons/bs"
|
||||
import { Modal } from "components/Modal/Modal"
|
||||
import { useState } from "react"
|
||||
import { motion } from "framer-motion"
|
||||
export default function AboutUs() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
return (
|
||||
<div
|
||||
className=" h-[60%] rounded-[3rem] max-md:rounded-none"
|
||||
|
|
@ -12,7 +16,11 @@ export default function AboutUs() {
|
|||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<div className="flex w-[100%] justify-around pb-[10vh] pt-[5vh] max-md:flex-wrap">
|
||||
<motion.div
|
||||
animate={{ y: -50 }}
|
||||
transition={{ delay: 1 }}
|
||||
className="flex w-[100%] justify-around pb-[10vh] pt-[5vh] max-md:flex-wrap"
|
||||
>
|
||||
<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 ">
|
||||
|
|
@ -56,15 +64,24 @@ export default function AboutUs() {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{/* <iframe
|
||||
className="h-[315px] w-[560px] max-md:h-[14rem] max-md:w-[25rem]"
|
||||
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 className="flex flex-col justify-around">
|
||||
<div className="flex h-[315px] w-[560px] items-center justify-center bg-white max-md:h-[250px] max-md:w-[375px]">
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<BsPlayCircle
|
||||
className="fold:h-[20%] fold:w-[20%] h-[10%] w-[10%] cursor-pointer self-center"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
/>
|
||||
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
|
||||
<iframe
|
||||
className="z_fold:w-[280px] z_fold:h-[170px] h-[315px] w-[560px] max-md:h-[250px] max-md:w-[375px]"
|
||||
src="https://www.youtube.com/embed/SKIXCPn2xB0?si=tQOw37hJEEzbFKFn"
|
||||
title="YouTube video player"
|
||||
></iframe>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue