fixed image issue finally

.firebase/hosting.ZGlzdA.cache

@@ -2,6 +2,6 @@ vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be0
 LeetMigo_banner_main_01.png,1723680240000,fd5319e2bdc14bfd8ff24ac90e9ba0ecfc41f881a8b733fafe8441641b9421e6
 leetmigo waifu 1.png,1719180166792,e196e9e48be328b15c212d370e23a5ea33186361619ee1dfe7a6b05136ff4f5a
 gendonotevil1.png,1716715413819,87612e12215c5df3dd01be8177bbdd74734b0f76f7eb0c5ef72dcfa81a7766d9
-index.html,1724909368224,80b38cad90b48b74752fbd082c133e37911c5d70c6334266d9b595021bd1149d
-assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724909368227,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
-assets/index-r67QgOBL.js,1724909368224,2463ba6490dbf20d4e3fc1337c30f275faf8e4a67a05a76dd8b2b3feff40604f
+index.html,1724983240102,c057d64b0ce524220c650047e3e37d2e540e5cf2be3b43836e477fab0ede5462
+assets/index-DmIjaVRE.js,1724983240114,f53da74e865c2f04635f4f71e8266a02b51aa21b37afd15ab79fed81d76a782b
+assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724983240114,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a

server.js

@@ -0,0 +1,46 @@
+// server.js
+const express = require('express');
+const axios = require('axios');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+require('dotenv').config();
+
+const app = express();
+app.use(cors());
+app.use(bodyParser.json());
+
+const PORT = process.env.PORT || 5000;
+
+// Endpoint to get AI suggestions from the LLM
+app.post('/api/ai', async (req, res) => {
+  try {
+    const { prompt } = req.body;
+    const response = await axios.post('https://api.example-llm.com/generate', {
+      prompt: prompt,
+      max_tokens: 150,
+    });
+
+    res.json({ response: response.data });
+  } catch (error) {
+    res.status(500).send('Error generating AI response');
+  }
+});
+
+// Endpoint to process Bitcoin payments
+app.post('/api/pay', async (req, res) => {
+  try {
+    const { amount, walletAddress } = req.body;
+    const response = await axios.post('https://api.example-bitcoin.com/pay', {
+      amount: amount,
+      walletAddress: walletAddress,
+    });
+
+    res.json({ transactionId: response.data.transactionId });
+  } catch (error) {
+    res.status(500).send('Error processing payment');
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Server is running on port ${PORT}`);
+});

src/AppContent.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   Button,
@@ -21,10 +21,104 @@ import {
   Grid,
   GridItem,
   useToast,
+  Spinner,
 } from '@chakra-ui/react';
 import bannerImage from './LeetMigo_banner_main_01.png';
 import { v4 as uuidv4 } from 'uuid';
+import axios from 'axios';
 
+// AIProgrammingPair Component
+const AIProgrammingPair = () => {
+  const [prompt, setPrompt] = useState('');
+  const [response, setResponse] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [paymentLoading, setPaymentLoading] = useState(false);
+  const toast = useToast();
+
+  const handlePromptSubmit = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.post('/api/ai', { prompt });
+      setResponse(res.data.response);
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: 'Could not get a response from the AI',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePayment = async () => {
+    setPaymentLoading(true);
+    try {
+      const res = await axios.post('/api/pay', {
+        amount: 0.001, // Example amount in BTC
+        walletAddress: 'your-bitcoin-wallet-address-here',
+      });
+      toast({
+        title: 'Payment Successful',
+        description: `Transaction ID: ${res.data.transactionId}`,
+        status: 'success',
+        duration: 5000,
+        isClosable: true,
+      });
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: 'Payment failed',
+        status: 'error',
+        duration: 5000,
+        isClosable: true,
+      });
+    } finally {
+      setPaymentLoading(false);
+    }
+  };
+
+  return (
+    <Box width="100%" bg="gray.800" p={4} borderRadius="md" mt={8}>
+      <VStack spacing={8} align="center">
+        <Text fontSize="2xl" fontWeight="bold">
+          AI-Powered Learning
+        </Text>
+
+        <FormControl id="prompt">
+          <FormLabel>Enter your DSA problem:</FormLabel>
+          <Input
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe your DSA problem here..."
+          />
+        </FormControl>
+
+        <Button colorScheme="blue" onClick={handlePromptSubmit} isDisabled={loading}>
+          {loading ? <Spinner /> : 'Get AI Help'}
+        </Button>
+
+        {response && (
+          <Box bg="gray.700" p={4} borderRadius="md" width="100%">
+            <Text>{response}</Text>
+          </Box>
+        )}
+
+        <Button
+          colorScheme="orange"
+          onClick={handlePayment}
+          isDisabled={paymentLoading}
+        >
+          {paymentLoading ? <Spinner /> : 'Pay with Bitcoin'}
+        </Button>
+      </VStack>
+    </Box>
+  );
+};
+
+// AppContent Component
 const AppContent = () => {
   const [referralCode] = useState(uuidv4());
   const [isPrivacyModalOpen, setIsPrivacyModalOpen] = useState(false);
@@ -62,17 +156,6 @@ const AppContent = () => {
 
       <Container maxW="container.md" pt={8} px={4} pb={24}>
         <VStack spacing={8} align="center" justify="center">
-        <Box width="100%" overflow="hidden" borderRadius="md" maxH={{ base: "200px", md: "300px" }}>
-          <Image 
-            src={bannerImage} 
-            alt="LeetMigo Banner" 
-            objectFit="cover" 
-            objectPosition="center center"
-            width="100%" 
-            height="100%"
-          />
-        </Box>
-
 
           <Text fontSize={{ base: "lg", md: "xl" }} textAlign="center">
             Yo, weebs and tech otakus! Join the waitlist for LeetMigo - your AI-powered LeetCode sidekick! 🚀🎮
@@ -96,6 +179,18 @@ const AppContent = () => {
             ))}
           </Grid>
 
+          <Box width="100%" overflow="hidden" borderRadius="md">
+            <AspectRatio ratio={16 / 9}>
+              <Image 
+                src={bannerImage} 
+                alt="LeetMigo Banner" 
+                objectFit="cover" 
+                objectPosition="center"
+                width="100%" 
+                height="100%"
+              />
+            </AspectRatio>
+          </Box>
 
           <Text fontSize={{ base: "lg", md: "xl" }} fontWeight="bold" textAlign="center" mt={4}>
             Sign up now for free early access! 🚀
@@ -106,7 +201,7 @@ const AppContent = () => {
               <VStack spacing={4}>
                 <FormControl id="name">
                   <FormLabel>Your Tag</FormLabel>
-                  <Input name="name" type="text" placeholder="Drop your name/tpot username" />
+                  <Input name="name" type="text" placeholder="Enter your name/tpot username" />
                 </FormControl>
                 <FormControl id="email" isRequired>
                   <FormLabel>Email</FormLabel>
@@ -144,8 +239,11 @@ const AppContent = () => {
             >
               privacy stuff
             </Text>
-            . No cap.
+            . 
           </Text>
+
+          <AIProgrammingPair /> {/* Integrated Component */}
+
         </VStack>
       </Container>