diff --git a/src/components/SQLCourse/ReviewsSection.tsx b/src/components/SQLCourse/ReviewsSection.tsx new file mode 100644 index 000000000..a86ece8be --- /dev/null +++ b/src/components/SQLCourse/ReviewsSection.tsx @@ -0,0 +1,118 @@ +import { StarIcon, User2Icon } from 'lucide-react'; + +type Review = { + name: string; + role: string; + rating: number; + text: string; + avatarUrl?: string; +}; + +export function ReviewsSection() { + const reviews: Review[] = [ + { + name: 'Tomáš Janků', + role: 'Software Engineer', + rating: 5, + text: "The course and it's interactivity is excellent and I'd honestly say it's one of the best on the SQL theme I've seen out there.", + avatarUrl: 'https://github.com/jankudev.png', + }, + { + name: 'Gourav Khunger', + role: 'Software Engineer', + rating: 5, + text: 'This course was absolutely brilliant! The integrated database environment to practice what I learned was the best part.', + avatarUrl: 'https://github.com/gouravkhunger.png', + }, + { + name: 'Meabed', + role: 'CTO', + rating: 5, + text: 'Kamran has clearly put a lot of thought into this course. The content, structure and exercises were all great.', + avatarUrl: 'https://github.com/meabed.png', + }, + { + name: 'Mohsin Aheer', + role: 'Software Engineer', + rating: 5, + text: 'I already knew SQL but this course taught me a bunch of new things. Practical examples and challenges were great. Highly recommended!', + avatarUrl: 'https://github.com/aheermohsinse.png', + }, + { + name: 'Reeve Tee', + role: 'Software Engineer', + rating: 5, + text: 'I found the course highly comprehensive and incredibly valuable. I would love to see more courses like this!', + avatarUrl: '', + }, + { + name: 'Zeeshan', + role: 'Software Engineer', + rating: 5, + text: 'Loved the teaching style and the way the course was structured. The AI tutor was a great help when I got stuck.', + avatarUrl: 'https://github.com/ziishaned.png', + }, + { + name: 'Adnan Ahmed', + role: 'Engineering Manager', + rating: 5, + text: 'Having the integrated IDE made a huge difference. Being able to immediately practice what I learned was invaluable.', + avatarUrl: 'https://github.com/idnan.png', + }, + { + name: 'Faisal Ahsan', + role: 'Software Engineer', + rating: 5, + text: 'The course and the learning experience was great. What I really liked was the no-fluff explanations and practical examples.', + avatarUrl: 'https://github.com/faisalahsan.png', + }, + { + name: 'Mian Asif', + role: 'Software Engineering Lead', + rating: 5, + text: "Best SQL course I've taken. The progression from basic to advanced concepts is well thought out, and the challenges are excellent.", + avatarUrl: 'https://github.com/mian.png', + }, + ]; + + return ( + <> +
+ {reviews.map((review, index) => ( +
+
+ {review.avatarUrl && ( + {review.name} + )} + {!review.avatarUrl && ( +
+ +
+ )} +
+

{review.name}

+

{review.role}

+
+
+
+ {Array.from({ length: review.rating }).map((_, i) => ( + + ))} +
+

{review.text}

+
+ ))} +
+ + ); +} diff --git a/src/components/SQLCourse/SQLCoursePage.tsx b/src/components/SQLCourse/SQLCoursePage.tsx index ed85f82bb..c83fce43d 100644 --- a/src/components/SQLCourse/SQLCoursePage.tsx +++ b/src/components/SQLCourse/SQLCoursePage.tsx @@ -14,6 +14,7 @@ import { LayersIcon, TableIcon, WrenchIcon, + StarIcon, } from 'lucide-react'; import { ChapterRow } from './ChapterRow'; import { CourseFeature } from './CourseFeature'; @@ -27,6 +28,7 @@ import { AccountButton } from './AccountButton'; import { RoadmapLogoIcon } from '../ReactIcons/RoadmapLogo'; import { PlatformDemo } from './PlatformDemo'; import { AuthorQuoteMessage } from './AuthorQuoteMessage'; +import { ReviewsSection } from './ReviewsSection'; type ChapterData = { icon: React.ReactNode; title: string; @@ -256,6 +258,7 @@ export function SQLCoursePage() {
+
Complete Course to Master Practical SQL @@ -299,6 +302,8 @@ export function SQLCoursePage() {
+ + @@ -412,6 +417,8 @@ export function SQLCoursePage() { + + diff --git a/src/styles/global.css b/src/styles/global.css index 0a0fcc262..63cd31dad 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -149,3 +149,13 @@ a > code:before { background-position: 100% 100%; } } + +/* Hide scrollbars */ +.scrollbar-none { + scrollbar-width: none; + -ms-overflow-style: none; +} + +.scrollbar-none::-webkit-scrollbar { + display: none; +}