From a23ae8025bd4bf003a5219e3a7d17701657caf47 Mon Sep 17 00:00:00 2001
From: Wanjohi <71614375+wanjohiryan@users.noreply.github.com>
Date: Tue, 11 Feb 2025 13:59:12 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9C=20fix(www):=20Fix=20GPU=20lines=20?=
 =?UTF-8?q?on=20iOS=20(#183)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
I am trying to fix a bug where the `Bring your own GPU` landing page
feature is broken on iOS

## Related Issues
<!-- List any related issues (e.g., "Closes #123", "Fixes #456") -->

## Type of Change

- [x] Bug fix (non-breaking change)
- [ ] New feature (non-breaking change)
- [ ] Breaking change (fix or feature that changes existing
functionality)
- [ ] Documentation update
- [ ] Other (please describe):

## Checklist

- [x] I have updated relevant documentation
- [x] My code follows the project's coding style
- [x] My changes generate no new warnings/errors

## Notes for Reviewers
<!-- Point out areas you'd like reviewers to focus on, questions you
have, or decisions that need discussion -->

## Screenshots/Demo
<!-- If applicable, add screenshots or a GIF demo of your changes
(especially for UI changes) -->
![IMG_1805
webp](https://github.com/user-attachments/assets/6b268737-243d-4a6d-920e-f86781b53ded)

## Additional Context
<!-- Add any other context about the pull request here -->
---
 apps/www/src/routes/(public)/index.tsx |  6 +++---
 packages/ui/src/react/footer.tsx       | 20 +-------------------
 2 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/apps/www/src/routes/(public)/index.tsx b/apps/www/src/routes/(public)/index.tsx
index 2e6e1ee9..6469b9c1 100644
--- a/apps/www/src/routes/(public)/index.tsx
+++ b/apps/www/src/routes/(public)/index.tsx
@@ -424,7 +424,7 @@ export default component$(() => {
           </MotionComponent>
         </div>
       </section>
-      <section class="w-full py-12 sm:py-16">
+      <section class="w-full pt-12 pb-3 sm:py-16">
         <div class="relative mx-auto w-full max-w-[980px]">
           <div class="relative px-4 z-10 gap-1 sm:gap-2 mx-auto flex flex-col items-center text-balance text-center max-w-[680px]">
             <MotionComponent
@@ -475,7 +475,7 @@ export default component$(() => {
             }}
             viewport={{ once: true }} class="w-full flex select-none justify-between max-[600px]:flex-col items-center max-w-[700px] mx-auto my-5 sm:my-20" >
             <div class="relative h-[264px] flex flex-[1_1] max-[600px]:pb-[64px] max-[600px]:max-w-[264px] max-[600px]:w-full">
-              <div class="justify-between items-start inline-flex md:flex-col h-full max-[600px]:flex-[1_1]">
+              <div class="justify-between items-start inline-flex md:flex-col min-[600px]:h-full max-[600px]:flex-[1_1]">
                 <div class="ring-gray-200 md:justify-start max-[600px]:size-9 text-gray-600 dark:text-gray-400 dark:ring-gray-800 ring-2 bg-white dark:bg-black rounded-xl flex items-center justify-center md:p-[8px_14px_8px_12px] xl:p-[8px_14px_8px_12px] gap-2" >
                   <svg class="size-6 text-[#85B737]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M1.635 7.146S3.08 5.012 5.97 4.791v-.774C2.77 4.273 0 6.983 0 6.983s1.57 4.536 5.97 4.952v-.824c-3.23-.406-4.335-3.965-4.335-3.965M5.97 9.475v.753c-2.44-.435-3.118-2.972-3.118-2.972S4.023 5.958 5.97 5.747v.828h-.004c-1.021-.123-1.82.83-1.82.83s.448 1.607 1.824 2.07M6 2l-.03 2.017A7 7 0 0 1 6.252 4c3.637-.123 6.007 2.983 6.007 2.983s-2.722 3.31-5.557 3.31q-.39-.002-.732-.065v.883q.292.039.61.04c2.638 0 4.546-1.348 6.394-2.943c.307.246 1.561.842 1.819 1.104c-1.757 1.47-5.852 2.657-8.173 2.657a7 7 0 0 1-.65-.034V14H16l.03-12zm-.03 3.747v-.956a6 6 0 0 1 .282-.015c2.616-.082 4.332 2.248 4.332 2.248S8.73 9.598 6.743 9.598c-.286 0-.542-.046-.773-.123v-2.9c1.018.123 1.223.572 1.835 1.593L9.167 7.02s-.994-1.304-2.67-1.304a5 5 0 0 0-.527.031" /></svg>
                   <span class="max-[600px]:hidden" >RTX 4090</span>
@@ -493,7 +493,7 @@ export default component$(() => {
                   <span class="max-[600px]:hidden" >Radeon RX 7900</span>
                 </div>
               </div>
-              <div class="absolute max-[600px]:right-1/2 max-[600px]:translate-x-1/2 max-[600px]:w-[calc(100%-36px)] max-[600px]:bottom-0 -right-[30px] w-[calc(100%-96px+40px)] top-1/2 -z-[1] -translate-y-1/2">
+              <div class="absolute max-[600px]:right-1/2 max-[600px]:translate-x-1/2 max-[600px]:w-[calc(100%-36px)] max-[600px]:bottom-0 min-[600px]:-right-[30px] w-[calc(100%-96px+40px)] min-[600px]:top-1/2 -z-[1] min-[600px]:-translate-y-1/2 max-[600px]:top-[unset] ">
                 <div class="min-[600px]:hidden h-16 relative">
                   <svg class="absolute inset-0 text-gray-500" fill="none" height="64" preserveAspectRatio="none" viewBox="0 0 230 64" width="100%" xmlns="http://www.w3.org/2000/svg">
                     <path d="M111 64L111 56.9516C111 43.5878 104.93 30.9476 94.5 22.5925L85.3167 15.236C80.6917 11.5311 78 5.92592 78 -1.44248e-06V-1.44248e-06" stroke="currentColor" stroke-width="2" vector-effect="non-scaling-stroke"></path>
diff --git a/packages/ui/src/react/footer.tsx b/packages/ui/src/react/footer.tsx
index 07b6a9f1..66ee2101 100644
--- a/packages/ui/src/react/footer.tsx
+++ b/packages/ui/src/react/footer.tsx
@@ -19,7 +19,7 @@ type Props = {
 export function ReactFooter({ children }: Props) {
   return (
     <>
-      <footer className="flex justify-center flex-col items-center w-screen pt-8 sm:pb-0 pb-8 [&>*]:w-full px-3">
+      <footer className="flex justify-center flex-col items-center w-screen py-20 sm:pb-0 [&>*]:w-full px-3">
         <section className="mx-auto flex flex-col justify-center items-center max-w-[600px] pt-20">
           <motion.img
             initial={{
@@ -72,24 +72,6 @@ export function ReactFooter({ children }: Props) {
                 Your rules
               </motion.span>
             </ReactDisplay>
-            {/* <motion.p
-              initial={{
-                opacity: 0,
-                y: 50
-              }}
-              transition={{
-                delay: 0.3,
-                ...transition
-              }}
-              whileInView={{
-                y: 0,
-                opacity: 1
-              }}
-              viewport={{ once: true }}
-              className="dark:text-gray-50/70 text-gray-950/70 text-base font-normal text-center leading-tight text-balance tracking-tight sm:text-xl"
-            >
-              Nestri is an open-source cloud gaming platform that lets you play games on your own terms — invite friends to join your gaming sessions, share your game library, and take even more control by running it on your own GPU instance
-            </motion.p> */}
             <motion.div
               initial={{
                 opacity: 0,