Fixed #136 -- [BUG] Learn More is not working

Implemented functionality for the 'Learn More' button to open a dialog box
when the 'Learn More' button is clicked. The dialog displays relevant content,
improving user interaction and addressing the bug
where the button previously had no action.

frontend/src/containers/LearnMoreDialog/LearnMoreDialog.tsx

@@ -0,0 +1,87 @@
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components'
+import { DialogTriggerProps } from '@radix-ui/react-dialog'
+import React from 'react'
+
+const LearnMoreDialog = ({
+    onClose,
+}: {
+    onClose?: DialogTriggerProps['onClick']
+}) => {
+    return (
+    <Dialog>
+
+        <DialogTrigger asChild onClick={onClose}>
+        <Button className='text-xs md:text-base'>Learn More</Button>
+        </DialogTrigger>
+
+        <DialogContent className='sm:max-w-[730px]'>
+
+        <DialogHeader>
+            <DialogTitle className='text-2xl'>More on Django India</DialogTitle>
+            <DialogDescription>
+            For the Community by the Community
+            </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+            <div>
+                <h6 className='font-bold text-base inline-flex items-center gap-2'>
+                Exclusive Project Updates
+                </h6>
+                <p className='text-sm'>
+                Dive deep into the most exciting Django projects happening around!
+                Stay informed about initiatives, cutting-edge features, and key updates.
+                Discover how you can get involved, contribute your skills,
+                and be part of building something remarkable with the Django community.
+                </p>
+            </div>
+            <div>
+                <h6 className='font-bold text-base inline-flex items-center gap-2'>
+                Newsletters
+                </h6>
+                <p className='text-sm'>
+                Never miss an update on the latest trends, tools, and features
+                in the Django ecosystem. Our newsletters keep you informed about
+                what is happening in the Django world.whether it’s a major release,
+                noteworthy developments in India,
+                or international innovations shaping the future of web development.
+                </p>
+            </div>
+            <div>
+                <h6 className='font-bold text-base inline-flex items-center gap-2'>
+                Community Events
+                </h6>
+                <p className='text-sm'>
+                Join a vibrant community of Django developers through our meetups, webinars, and virtual hangouts.
+                Learn from experts, share your experiences, and connect with like-minded enthusiasts
+                across India and beyond. Be the first to hear about our upcoming events,
+                where you can network, learn, and grow your Django skills.
+                </p>
+            </div>
+            <div>
+                <h6 className='font-bold text-base inline-flex items-center gap-2'>
+                Spotlight on Contributions
+                </h6>
+                <p className='text-sm'>
+                Celebrate the amazing work being done by Indian developers in the Django community!
+                We’ll regularly highlight contributions that are making an impact,
+                offering inspiration and recognition to developers pushing boundaries.
+                Who knows, your next pull request might be the one that gets featured!
+                </p>
+            </div>
+        </div>
+
+        </DialogContent>
+    </Dialog>
+    )
+}
+
+export default LearnMoreDialog

frontend/src/containers/LearnMoreDialog/index.ts

@@ -0,0 +1 @@
+export { default as LearnMoreDialog } from './LearnMoreDialog'

frontend/src/sections/WhatIsDjango/WhatIsDjango.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import Image from 'next/image'
-import { Button, DataCard } from '@components'
+import { DataCard } from '@components'
 import useWidth from '@/hooks/useWidth'
+import { LearnMoreDialog } from '@/containers/LearnMoreDialog'
 
 
 const WhatIsDjango = () => {
@@ -38,13 +39,13 @@ const WhatIsDjango = () => {
                 </div>
               </div>
               <p className='w-full md:max-w-[600px] text-sm  md:text-2xl pl-8  text-black font-medium'>
-              A vibrant community of Django developers, primarily from India. 
-              It unites passionate individuals who are eager to learn, share knowledge, and collaborate 
-              on innovative projects. Through our meetups, workshops, and online events, members actively 
+              A vibrant community of Django developers, primarily from India.
+              It unites passionate individuals who are eager to learn, share knowledge, and collaborate
+              on innovative projects. Through our meetups, workshops, and online events, members actively
               contribute to the growth of the Django ecosystem in India.
               </p>
               <div className='z-20 pl-8'>
-                <Button>Learn More</Button>
+                <LearnMoreDialog/>
               </div>
             </div>
           </div>
@@ -76,4 +77,4 @@ const WhatIsDjango = () => {
   )
 }
 
-export default WhatIsDjango
+export default WhatIsDjango