Skip to content

Commit

Permalink
ui changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@nfa1
nfa1 committed Aug 26, 2024
1 parent 11b1a8f commit 719c7f5
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 33 deletions.
6 changes: 3 additions & 3 deletions .firebase/hosting.ZGlzdA.cache
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
vite.svg,1713755213475,59ec4b6085a0cb1bf712a5e48dd5f35b08e34830d49c2026c18241be04e05d5a
leetmigo waifu 1.png,1719180166792,e196e9e48be328b15c212d370e23a5ea33186361619ee1dfe7a6b05136ff4f5a
gendonotevil1.png,1716715413819,87612e12215c5df3dd01be8177bbdd74734b0f76f7eb0c5ef72dcfa81a7766d9
index.html,1724519372624,990e9c4883f5c2f61d7e820aea835f614698a2ca3c2cbbcb59a3aa137ee87704
assets/index-BvQ6TMY8.js,1724519372623,50737d9aa1473a057e4bbc149da0f718542e172b0290288c420f30cff296b85d
assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724519372623,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
index.html,1724588508243,97772e31b8e0d46bc0ac7c73343d634095f9bb6ccb9bd17173e1b400bf077b90
assets/index-TXoG1jib.js,1724588508243,2a2d0533a8fc7f66015f18835ad510662f60b8d17e8a42ef36e48a47fd6f69fb
assets/LeetMigo_banner_main_01-B7g23Qd-.png,1724588508243,4ada8c13ac119d2ab923d7e00d6def14e3326c0b0938c8a79afa7176075f773a
Binary file added public/LeetMigo_banner_main_01.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
127 changes: 97 additions & 30 deletions src/AppContent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,16 @@ import {
Container,
AspectRatio,
Spinner,
useClipboard,
} from '@chakra-ui/react';
import bannerImage from './LeetMigo_banner_main_01.png';
import { v4 as uuidv4 } from 'uuid'; // Mock DID generation using UUID

const AppContent = () => {
const [gdprAccepted, setGdprAccepted] = useState(false);
const [isPrivacyPolicyOpen, setIsPrivacyPolicyOpen] = useState(false);
const [did, setDid] = useState('');
const { hasCopied, onCopy } = useClipboard(did);
const widgetRef = useRef(null);

const handleGdprAccept = () => {
Expand All @@ -40,10 +44,14 @@ const AppContent = () => {
script.src = 'https://getlaunchlist.com/js/widget.js';
script.async = true;
script.defer = true;
script.loading = 'lazy';
script.onload = () => {
if (window.LaunchListWidget) {
window.LaunchListWidget.init();
widgetRef.current = true;
setTimeout(() => {
widgetRef.current = false;
}, 500);
}
};
document.body.appendChild(script);
Expand All @@ -56,30 +64,43 @@ const AppContent = () => {
}
}, []);

useEffect(() => {
// Generate DID automatically on mount (mock implementation)
const generatedDid = `did:web5:${uuidv4()}`;
setDid(generatedDid);
}, []);

const commonButtonStyles = {
colorScheme: 'blue',
variant: 'solid',
colorScheme: 'orange',
bg: 'orange.400',
color: 'black',
size: 'lg',
borderRadius: 'full',
width: '100%',
maxW: { base: '100%', md: '300px' },
_hover: { transform: 'scale(1.05)', boxShadow: 'lg' },
paddingX: 8,
paddingY: 6,
fontSize: 'lg',
textDecoration: 'none', // Remove underline
transition: 'all 0.2s ease-in-out',
_hover: { bg: 'orange.500', transform: 'scale(1.1)', boxShadow: '2xl' },
_active: { bg: 'orange.600' },
_focus: { boxShadow: 'outline' },
};

return (
<Box minH="100vh" color="white" bg="gray.900" position="relative">
<Container maxW="container.md" pt={8} px={{ base: 4, md: 8 }} pb={16}>
<VStack spacing={8} align="center" justify="center">
<Box textAlign="center" px={{ base: 2, md: 4 }}>
<Text fontSize={{ base: 'lg', md: 'xl' }} fontWeight="extrabold" lineHeight="shorter">
{/* Title Section */}
<VStack spacing={2} textAlign="center">
<Text fontSize={{ base: 'xl', md: '2xl' }} fontWeight="extrabold" lineHeight="shorter">
LeetMigo 👾
</Text>
<Text fontSize={{ base: 'sm', md: 'md' }} mt={2} fontWeight="semibold">
<Text fontSize={{ base: 'sm', md: 'lg' }} fontWeight="semibold">
the world's first decentralized platform for dsa interview prep, made for non-trad, cracked techies and frens
</Text>
</Box>
</VStack>

{/* Banner Image */}
<AspectRatio ratio={16 / 9} width="100%" maxW="800px" borderRadius="md">
<Image
src={bannerImage}
Expand All @@ -89,35 +110,78 @@ const AppContent = () => {
/>
</AspectRatio>

{!widgetRef.current && <Spinner color="blue.500" size="xl" />}
<Box width="100%" maxW="400px">
{/* LaunchList Widget and CTA */}
{!widgetRef.current && <Spinner color="orange.400" size="xl" />}
{widgetRef.current && (
<Text mt={2} fontSize="sm" color="gray.400">
Widget loaded successfully
</Text>
)}
<Box width="100%" maxW="400px" mt={4}>
<div className="launchlist-widget" data-key-id="pI1JRr" data-height="180px"></div>
</Box>

<Button
as="a"
href="https://docs.google.com/spreadsheets/d/1v0OCKeLa9q8douuR6RQmQ5mOG2piThh50wuGA79g2SY/edit?usp=sharing"
target="_blank"
rel="noopener noreferrer"
{...commonButtonStyles}
colorScheme="teal"
>
Free LeetCode Grind 75 Study Spreadsheet
</Button>

<VStack align="center" spacing={4} width="100%">
<Text fontSize="lg" fontWeight="bold" textAlign="center">
<VStack align="center" width="100%" mt={4} spacing={4}>
<Text fontSize={{ base: 'lg', md: 'xl' }} fontWeight="bold" color="orange.400" textAlign="center">
don’t miss out! 🚀 get free early access and be part of the first wave of cracked techies. sign up now!
</Text>
<Box width="100%" maxW="400px">
<div className="launchlist-widget" data-key-id="pI1JRr" data-height="180px"></div>
</Box>
</VStack>

{/* LeetCode 75 Button */}
<VStack align="center" width="100%" mt={4}>
<Button
{...commonButtonStyles}
as="a"
href="https://docs.google.com/spreadsheets/d/1v0OCKeLa9q8douuR6RQmQ5mOG2piThh50wuGA79g2SY/edit?usp=sharing"
target="_blank"
rel="noopener noreferrer"
bg="orange.500"
border="2px solid"
borderColor="orange.600"
color="white"
_hover={{ bg: "orange.600", transform: "scale(1.1)", boxShadow: "2xl" }}
textDecoration="none"
>
free leetcode grind 75 study spreadsheet
</Button>
</VStack>

{/* Features Section */}
<VStack align="center" spacing={4} width="100%" mt={8}>
<Text fontSize="lg" fontWeight="bold" textAlign="center" color="gray.300">
features coming soon:
</Text>
<HStack spacing={4} justify="center" width="100%">
<Button {...commonButtonStyles}>
<HStack spacing={{ base: 6, md: 4 }} justify="center" width="100%">
<Button {...commonButtonStyles} paddingX={{ base: 10, md: 8 }} paddingY={{ base: 8, md: 6 }}>
learn
</Button>
<Button {...commonButtonStyles}>
<Button {...commonButtonStyles} paddingX={{ base: 10, md: 8 }} paddingY={{ base: 8, md: 6 }}>
collab
</Button>
<Button {...commonButtonStyles} paddingX={{ base: 10, md: 8 }} paddingY={{ base: 8, md: 6 }}>
pay with bitcoin
</Button>
</HStack>
</VStack>

{/* DID Login Section */}
<VStack spacing={4} align="center" width="100%" mt={8}>
<Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="bold" color="orange.400">
your DID has been generated! 🎉
</Text>
<Text fontSize="sm" color="gray.300">
DID: {did}
</Text>
<Button {...commonButtonStyles} onClick={onCopy}>
{hasCopied ? 'copied!' : 'copy DID to clipboard'}
</Button>
<Text fontSize="sm" color="gray.400" mt={2}>
save your DID for future logins using your username.
</Text>
</VStack>
</VStack>
</Container>

Expand All @@ -135,10 +199,10 @@ const AppContent = () => {
>
<Text mb={2}>we use cookies for a based experience. continue to use this site and we'll assume you think it's kino.</Text>
<HStack spacing={2} justify="center">
<Button {...commonButtonStyles} size="sm" colorScheme="gray" onClick={handleGdprAccept}>
<Button {...commonButtonStyles} size="sm" bg="gray.600" onClick={handleGdprAccept}>
accept
</Button>
<Button {...commonButtonStyles} size="sm" colorScheme="gray" variant="outline" onClick={() => setIsPrivacyPolicyOpen(true)}>
<Button {...commonButtonStyles} size="sm" bg="gray.600" variant="outline" onClick={() => setIsPrivacyPolicyOpen(true)}>
dismiss
</Button>
</HStack>
Expand All @@ -151,7 +215,10 @@ const AppContent = () => {
<ModalHeader>Privacy Policy</ModalHeader>
<ModalCloseButton />
<ModalBody>
{/* Privacy policy content here */}
<Text>
This is where your privacy policy content will be displayed. Make sure to
include all necessary details regarding data usage, storage, and user rights.
</Text>
</ModalBody>
<ModalFooter>
<Button {...commonButtonStyles} onClick={() => setIsPrivacyPolicyOpen(false)}>
Expand Down

0 comments on commit 719c7f5

Please sign in to comment.