docs(docs): 📝 Updated PayPal docs

Author: itpropro

docs/app/components/content/contentImage.vue

@@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
     :src="src"
     :preset="preset || null"
     fit="fill"
-    class="mb-2 rounded-lg dark:brightness-75 shadow-lg"
+    class="mb-2 rounded-lg transition-[filter] dark:brightness-75 dark:hover:brightness-100 shadow-lg mx-auto max-h-[500px]"
   >
   <p v-if="alt || title" class="text-center mt-0 opacity-70">
     {{ title || alt }}

docs/app/pages/index.vue

@@ -36,8 +36,8 @@ const browserStyle = computed(() => ({
 }))
 const logoStyle = computed(() => ({
   transition: '.3s ease-out all',
-  transform: `translateX(${parallax.tilt * 6}px) translateY(${
-    parallax.roll * 6
+  transform: `translateX(${parallax.tilt * 4}px) translateY(${
+    parallax.roll * 4
   }px)`,
 }))
 
@@ -58,8 +58,23 @@ const ready = useTimeout(300)
       </template>
 
       <template #description>
-        Nuxt OIDC Auth provides seamless OpenID Connect compatible authentication for your SSR Nuxt Apps.
-        It supports refresh tokens, encrypted sessions, PKCE and a lot more.
+        <p class="tracking-normal">
+          Nuxt OIDC Auth provides seamless OpenID Connect compatible authentication for your SSR Nuxt Apps.
+          It supports
+          <NuxtLink to="/composable#refresh" class="text-[#00dc82] inline-block hover:scale-[103%] transition-transform">
+            refresh tokens
+          </NuxtLink>
+          ,
+          <NuxtLink to="/getting-started/security#session-encryption" class="text-[#00dc82] inline-block hover:scale-[103%] transition-transform">
+            encrypted sessions
+          </NuxtLink>
+          , <NuxtLink to="/getting-started/security" class="text-[#00dc82] inline-block hover:scale-[103%] transition-transform">
+            PKCE
+          </NuxtLink>, tested
+          <NuxtLink to="/provider" class="text-[#00dc82] inline-block hover:scale-[103%] transition-transform">
+            preconfigured providers
+          </NuxtLink> and a lot more.
+        </p>
       </template>
 
       <div>
@@ -69,7 +84,7 @@ const ready = useTimeout(300)
             <img :class="unlocked ? 'opacity-0' : 'opacity-100'" class="absolute left-0 h-32 top-8 w-full" src="~/assets/nuxt-oidc-auth.svg" :style="logoStyle">
             <button class="absolute w-full h-full" @click="unlocked = !unlocked" />
           </div>
-          <div :class="ready ? 'transition-all' : 'transition-transform'" class="duration-300 ease-out h-2 absolute group-hover:shadow-[0px_70px_32px_4px_rgba(0,220,130,0.75)] shadow-[0px_70px_33px_3px_rgba(0,220,130,0.75)] bottom-0 lg:left-[25%] left-[25%] w-[50%] lg:w-[50%] bg-slate-700" :style="shadowStyle" />
+          <div :class="ready ? 'transition-all' : 'transition-transform'" class="duration-300 ease-out h-2 absolute group-hover:shadow-[0px_70px_32px_4px_rgba(0,220,130,0.75)] shadow-[0px_70px_33px_3px_rgba(0,220,130,0.75)] bottom-0 lg:left-[27.5%] left-[35%] w-[30%] lg:w-[45%] bg-slate-700" :style="shadowStyle" />
         </div>
         <MDC
           :value="page.hero.code"

docs/content/2.provider/paypal.md

@@ -14,7 +14,8 @@ icon: i-simple-icons-paypal
 
 ## Introduction
 
-PayPal's documentation is pretty poor and the developer center is also confusing and slow. PayPal also doesn't support modern security standards like PKCE and is lacking many OIDC features like logout redirect functionality.
+PayPal doesn't support modern security standards like PKCE and is lacking OIDC features like logout redirect functionality.
+The developer center can be confusing sometimes, make sure to use the correct users for testing and the right credentials.
 
 You have to enable the "Login with PayPal" functionality first before being able to use PayPal for login: