Add base interactive layout "rive" whit animation

motula_translate_app/lib/screens/home/components/course_card.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class CourseCard extends StatelessWidget {
+  const CourseCard({
+    Key? key,
+    required this.title,
+    this.color = const Color(0xFF7553F6),
+    this.iconSrc = "assets/icons/ios.svg",
+  }) : super(key: key);
+
+  final String title, iconSrc;
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
+      height: 280,
+      width: 260,
+      decoration: BoxDecoration(
+        color: color,
+        borderRadius: const BorderRadius.all(Radius.circular(30)),
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.only(top: 6, right: 8),
+              child: Column(
+                children: [
+                  Text(
+                    title,
+                    style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                        color: Colors.white, fontWeight: FontWeight.w600),
+                  ),
+                  const Padding(
+                    padding: EdgeInsets.only(top: 12, bottom: 8),
+                    child: Text(
+                      "Build and animate an iOS app from scratch",
+                      style: TextStyle(
+                        color: Colors.white38,
+                      ),
+                    ),
+                  ),
+                  const Text(
+                    "61 SECTIONS - 11 HOURS",
+                    style: TextStyle(
+                      color: Colors.white38,
+                    ),
+                  ),
+                  const Spacer(),
+                  Row(
+                    children: List.generate(
+                      3,
+                      (index) => Transform.translate(
+                        offset: Offset((-10 * index).toDouble(), 0),
+                        child: CircleAvatar(
+                          radius: 20,
+                          backgroundImage: AssetImage(
+                            "assets/avaters/Avatar ${index + 1}.jpg",
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          SvgPicture.asset(iconSrc),
+        ],
+      ),
+    );
+  }
+}

motula_translate_app/lib/screens/home/components/secondary_course_card.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+class SecondaryCourseCard extends StatelessWidget {
+  const SecondaryCourseCard({
+    Key? key,
+    required this.title,
+    this.iconsSrc = "assets/icons/ios.svg",
+    this.colorl = const Color(0xFF7553F6),
+  }) : super(key: key);
+
+  final String title, iconsSrc;
+  final Color colorl;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
+      decoration: BoxDecoration(
+          color: colorl,
+          borderRadius: const BorderRadius.all(Radius.circular(20))),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  title,
+                  style: Theme.of(context).textTheme.headlineSmall!.copyWith(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w600,
+                      ),
+                ),
+                const SizedBox(height: 4),
+                const Text(
+                  "Watch video - 15 mins",
+                  style: TextStyle(
+                    color: Colors.white60,
+                    fontSize: 16,
+                  ),
+                )
+              ],
+            ),
+          ),
+          const SizedBox(
+            height: 40,
+            child: VerticalDivider(
+              // thickness: 5,
+              color: Colors.white70,
+            ),
+          ),
+          const SizedBox(width: 8),
+          SvgPicture.asset(iconsSrc)
+        ],
+      ),
+    );
+  }
+}