Week 2 tutorial task: side-by-side layout with 1/4 image size, text on right

src/pages/TutorialTasks.tsx

@@ -898,18 +898,43 @@ const TutorialTasks: React.FC = () => {
                       </div>
                     ) : (
                       <>
-                        <p className="text-indigo-900 leading-relaxed text-lg font-source-text mb-4">{task.content}</p>
-                        {task.imageUrl && (
-                          <div className="mt-4">
-                            <img 
-                              src={task.imageUrl} 
-                              alt={task.imageAlt || 'Task image'} 
-                              className="w-full max-w-md mx-auto rounded-lg shadow-md"
-                              onError={(e) => {
-                                e.currentTarget.style.display = 'none';
-                              }}
-                            />
+                        {selectedWeek === 2 && task.imageUrl ? (
+                          // Week 2 side-by-side layout with reduced image size
+                          <div className="flex flex-col md:flex-row gap-6 items-start">
+                            {/* Image on the left - 1/4 of original size */}
+                            <div className="w-full md:w-1/4 flex justify-center">
+                              <img 
+                                src={task.imageUrl} 
+                                alt={task.imageAlt || 'Task image'} 
+                                className="w-full h-auto rounded-lg shadow-md"
+                                style={{ width: '25%', height: 'auto' }}
+                                onError={(e) => {
+                                  e.currentTarget.style.display = 'none';
+                                }}
+                              />
+                            </div>
+                            {/* Text on the right */}
+                            <div className="w-full md:w-3/4">
+                              <p className="text-indigo-900 leading-relaxed text-lg font-source-text">{task.content}</p>
+                            </div>
                           </div>
+                        ) : (
+                          // Default layout for other weeks or no image
+                          <>
+                            <p className="text-indigo-900 leading-relaxed text-lg font-source-text mb-4">{task.content}</p>
+                            {task.imageUrl && (
+                              <div className="mt-4">
+                                <img 
+                                  src={task.imageUrl} 
+                                  alt={task.imageAlt || 'Task image'} 
+                                  className="w-full max-w-md mx-auto rounded-lg shadow-md"
+                                  onError={(e) => {
+                                    e.currentTarget.style.display = 'none';
+                                  }}
+                                />
+                              </div>
+                            )}
+                          </>
                         )}
                       </>
                     )}