components/guide.py

from fasthtml.common import *
from monsterui.all import *

def stepItem(step_title,step_description):
	
	return LiStep(
		Div(
			# Ensured text is dark for readability on light backgrounds
			H1(step_title, cls='text-gray-800'),
			# Ensured text is dark for readability on light backgrounds
			P(step_description, cls='text-gray-800'),
		)
	)
	

def guide():
	return Section(
		Div(
			# Ensured text is dark for readability on light backgrounds
			H2('Fraims is super easy to use!',cls=('text-4xl md:text-5xl font-md text-gray-800')),
			DivCentered(
			Steps(
				LiStep(
					Card(
						DivVStacked(
							# Ensured text is dark for readability on light backgrounds
							H1('Choose a subject',cls='text-lg text-gray-800'),
							# Ensured text is dark for readability on light backgrounds
							P('''This selection guides our AI engine in fetching the most suitable tools and resources for your AoI.''', cls='text-gray-800'),
							cls =' md:size-48 justify-center'
						),

						cls =('bg-purple-300 rounded-xl')
					),
					cls =(StepT.primary)
				),
				LiStep(
					Card(
						DivVStacked(
							# Ensured text is dark for readability on light backgrounds
							H1('Choose a specific topic',cls='text-lg text-gray-800'),
							# Ensured text is dark for readability on light backgrounds
							P('''This crucial step allows our platform to pinpoint the desired learning outcomes and ensures that the generated Activities of Integration are precisely aligned with the educational objectives.''', cls='text-gray-800'),
							cls =' md:size-80 justify-center'
						),
						cls =('bg-purple-300 rounded-xl')
					),
					cls =(StepT.primary)
				),
				LiStep(
					Card(
						DivVStacked(
							# Ensured text is dark for readability on light backgrounds
							H1('Click Generate',cls='text-lg text-gray-800'),
							# Ensured text is dark for readability on light backgrounds
							P('''Click the "Generate" button to let Fraims create your AoIs''', cls='text-gray-800'),
							cls =' md:size-86 justify-center'
						),

						cls =('bg-purple-300 rounded-xl ')
					),
					cls =(StepT.primary)
					
				),
				cls =(StepsT.vertical,'bg-stone-200 ')
			),
			cls ='bg-stone-200 ' # This div also has a light background
			),
		),
		# The section itself also has a light background, so text inside it needs to be dark
		cls ='px-4 pt-8 antialiased mt-4 bg-stone-200 h-auto'
	)