Merge pull request #812 from autonomys/feat/improve-auto-id-page

Improve Auto-Id page

explorer/.cursorrules

@@ -0,0 +1,46 @@
+# Project Overview
+This project, named Astral, the Block Explorer of Autonomys network, is built using Next.js and TypeScript. It integrates various libraries for state management, UI components, and data fetching.
+
+# Key URLs
+- Astral Block Explorer: https://explorer.autonomys.xyz/
+- GitHub Repository: https://github.com/autonomys/astral
+- Autonomys: https://autonomys.xyz/
+- Academy: https://academy.autonomys.xyz/
+- Documentation: https://docs.autonomys.xyz/
+
+# Project Structure
+- **Components**: Contains reusable UI components.
+- **App**: Next.js app for routing.
+- **Hooks**: Custom React hooks for state management.
+
+# Development Guidelines
+- Use TypeScript for type safety.
+- Follow the coding standards defined in the ESLint configuration.
+- Ensure all components are responsive and accessible.
+- Use Tailwind CSS for styling, adhering to the defined color palette.
+
+# Important Scripts
+- `dev`: Starts the development server.
+- `build`: Builds the application for production.
+
+# AI Interaction Guidelines
+- When generating code, prioritize TypeScript and React best practices.
+- Ensure that any new components are reusable and follow the existing design patterns.
+- Minimize the use of AI generated comments, instead use clearly named variables and functions.
+- Always validate user inputs and handle errors gracefully.
+- Use the existing components and pages as a reference for the new components and pages.
+
+# Lexicon of Terms and Concepts
+- **H+AI (Human + Artificial Intelligence)**: The collaboration between humans and AI to enhance capabilities and ensure a harmonious coexistence.
+- **Autonomys Network**: A decentralized network designed to provide infrastructure for AI-powered decentralized applications (dApps).
+- **deAI Ecosystem**: A stack of components that includes distributed storage, compute, and a dApp/agent layer for building and deploying AI applications.
+- **Distributed Storage**: A system ensuring data integrity and availability for AI-related data.
+- **Distributed Compute**: Scalable computational resources for AI training and inference.
+- **dApp (Decentralized Application)**: Applications that run on a decentralized network, providing enhanced security and transparency.
+
+# Additional Resources
+- [Next.js Documentation](https://nextjs.org/docs)
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [React Documentation](https://reactjs.org/docs/getting-started.html)
+- [Autonomys Overview](https://autonomys.xyz/)

explorer/src/components/AutoId/index.tsx

@@ -1,23 +1,69 @@
 'use client'
 
+import { EXTERNAL_ROUTES } from 'constants/routes'
+import Link from 'next/link'
 import { FC } from 'react'
 
 export const AutoIdPage: FC = () => {
   return (
     <div className='flex w-full flex-col items-center space-y-4'>
-      <div className='w-full max-w-4xl'>
+      <div className='w-full'>
         <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
           <div className='mb-10 flex flex-col items-center justify-center'>
             <h1 className='mb-8 mt-6 text-center text-4xl font-bold text-gray-900 dark:text-white'>
               Auto-ID
             </h1>
           </div>
           <div className='m-6 flow-root text-gray-900 dark:text-white'>
-            <div className='mb-12 flex w-full items-center gap-5 overflow-x-auto'>
-              <p>
-                Auto ID is our first primitive enabling identity infrastructure at massive scale.
-                Documentation coming soon.
+            <div className='mb-12 flex w-full flex-col items-center gap-5 overflow-x-auto'>
+              <p className='text-center'>
+                Auto-ID is a revolutionary framework designed to enable identity infrastructure at
+                an unprecedented scale. It acts as a foundational layer for decentralized identity
+                solutions, providing a robust and scalable system for managing digital identities
+                across diverse applications and platforms.
               </p>
+              <p className='text-center'>
+                With Auto-ID, we address the urgent need for secure, user-centric identity
+                management in the decentralized web. This solution offers a seamless approach to
+                creating, managing, and verifying digital identities while prioritizing user privacy
+                and data sovereignty.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className='mb-4 w-full rounded-[20px] border border-slate-100 bg-white px-3 py-4 shadow dark:border-none dark:bg-gradient-to-r dark:from-gradientTwilight dark:via-gradientDusk dark:to-gradientSunset sm:p-6'>
+          <div className='m-6 flow-root text-gray-900 dark:text-white'>
+            <div className='mb-12 flex w-full flex-row items-start justify-between gap-5 overflow-x-auto'>
+              <div className='w-1/2 pr-4'>
+                <p className='text-center'>Key features of Auto-ID include:</p>
+                <ul className='list-disc pl-6'>
+                  <li>Decentralized identity creation and management</li>
+                  <li>Scalable infrastructure capable of supporting millions of users</li>
+                  <li>Enhanced privacy controls empowering users</li>
+                  <li>Interoperability with existing identity systems for seamless integration</li>
+                  <li>Robust security measures to safeguard user data</li>
+                </ul>
+              </div>
+              <div className='w-1/2 pl-4'>
+                <p className='text-center'>
+                  We are thrilled about the potential of Auto-ID to transform digital identity
+                  management. While comprehensive documentation is still in progress, you can
+                  explore our approach to decentralized identity solutions in our
+                  <Link
+                    href={EXTERNAL_ROUTES.academy + 'autonomys-solutions/autoid'}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='ml-1 text-blue-500 hover:text-blue-700'
+                  >
+                    Academy section on Auto-ID
+                  </Link>
+                  .
+                </p>
+                <p className='mt-4 text-center'>
+                  Stay tuned for more detailed documentation and updates on this exciting
+                  technology!
+                </p>
+              </div>
             </div>
           </div>
         </div>