chore: added scroll arrows to homepage twitter section

www/components/AuthWidget/AuthComponentExample.tsx

@@ -62,7 +62,7 @@ function AuthComponentExample() {
           initialSlide={0}
           spaceBetween={0}
           slidesPerView={1}
-          speed={400}
+          speed={300}
           autoHeight={true}
           allowTouchMove={false}
         >

www/components/BuiltWithSupabase/index.tsx

@@ -42,34 +42,14 @@ const BuiltExamples = () => {
       <div className="grid grid-cols-12 gap-5 mt-16">
         {Examples.slice(0, 6).map((example, i) => {
           return (
-            <div className="col-span-12 lg:col-span-6 xl:col-span-4">
+            <div
+              className={`col-span-12 lg:col-span-6 xl:col-span-4 ${i > 2 && `sm:hidden lg:block`}`}
+            >
               <ExampleCard {...example} />
             </div>
           )
         })}
       </div>
-
-      {/* <div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
-        {ProjectExamples.map((example: any, idx: number) => (
-          <a href={example.url}>
-            <Card
-              key={`example_${idx}`}
-              hoverable
-              cover={<img src={`${basePath}/${example.imgUrl}`} className="h-64 object-cover" />}
-            >
-              <Space className="justify-between h-40" direction="vertical">
-                <div>
-                  <Typography.Text small type="secondary">
-                    Project example
-                  </Typography.Text>
-                  <Typography.Title level={3}>{example.title}</Typography.Title>
-                </div>
-                <Typography.Text type="default">{example.description}</Typography.Text>
-              </Space>
-            </Card>
-          </a>
-        ))}
-      </div> */}
     </SectionContainer>
   )
 }

www/components/Carousels/ImageCarousel.tsx

@@ -96,7 +96,7 @@ function ImageCarousel(props: ImageCarouselProps) {
               initialSlide={0}
               spaceBetween={0}
               slidesPerView={1}
-              speed={400}
+              speed={300}
               autoHeight={true}
               allowTouchMove={false}
             >
@@ -147,7 +147,7 @@ function ImageCarousel(props: ImageCarouselProps) {
           // @ts-ignore
           onSwiper={setSwiperDetails}
           initialSlide={0}
-          speed={400}
+          speed={300}
           allowTouchMove={false}
           autoHeight={true}
         >

www/components/Carousels/SplitCodeBlockCarousel.tsx

@@ -83,7 +83,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
           initialSlide={apiSwiperActiveIndex}
           spaceBetween={0}
           slidesPerView={1}
-          speed={400}
+          speed={300}
           autoHeight={true}
           allowTouchMove={false}
         >
@@ -108,7 +108,7 @@ function SplitCodeBlockCarousel(props: SplitCodeBlockCarousel) {
             slidesPerView={1}
             direction="horizontal"
             // style={{ overflow: 'hidden' }}
-            speed={400}
+            speed={300}
             allowTouchMove={false}
           >
             {props.content.map((extension, i) => {

www/components/MadeForDevelopers/index.tsx

@@ -11,6 +11,8 @@ const MadeForDevelopers = () => {
   return (
     <SectionContainer className="pb-0">
       <APISection
+        autoHeight={true}
+        size="large"
         title={[
           <span>
             Instant APIs
@@ -25,7 +27,6 @@ const MadeForDevelopers = () => {
         ]}
         // @ts-ignore
         content={CodeExamples}
-        size="small"
         footer={[
           <dl className="grid grid-cols-12 gap-8">
             {DeveloperFeatures.map((feature: any, idx: number) => {

www/components/Sections/APISection.tsx

@@ -16,6 +16,7 @@ interface Props {
   title: string | React.ReactNode
   footer?: React.ReactNode
   text?: React.ReactNode
+  autoHeight?: boolean
 }
 
 function APISection(props: Props) {
@@ -60,8 +61,9 @@ function APISection(props: Props) {
             initialSlide={apiSwiperActiveIndex}
             spaceBetween={0}
             slidesPerView={1}
-            speed={400}
+            speed={300}
             allowTouchMove={false}
+            autoHeight={props.autoHeight ? props.autoHeight : false}
           >
             {props.content &&
               props.content.map((content: Example, i) => (

www/components/Sections/TwitterSocialProof.tsx

@@ -1,13 +1,39 @@
+import { useRef } from 'react'
+
 import { useRouter } from 'next/router'
+
 import { Swiper, SwiperSlide } from 'swiper/react'
-import { Button, Typography, IconMessageCircle, Space } from '@supabase/ui'
+// import Swiper core and required modules
+import SwiperCore, { Navigation, Pagination } from 'swiper'
+
+import {
+  Button,
+  Typography,
+  IconMessageCircle,
+  Space,
+  IconAlignLeft,
+  IconArrowLeft,
+  IconArrowRight,
+} from '@supabase/ui'
 
 import Examples from '../../data/tweets/Tweets.json'
 import TweetCard from '../TweetCard'
 
+// Import Swiper styles
+import 'swiper/swiper.min.css'
+import 'swiper/components/navigation/navigation.min.css'
+import 'swiper/components/pagination/pagination.min.css'
+
+// install Swiper modules
+SwiperCore.use([Navigation, Pagination])
+
 function TwitterSocialProof() {
   // base path for images
   const { basePath } = useRouter()
+
+  const prevRef = useRef(null)
+  const nextRef = useRef(null)
+
   return (
     <>
       <div className="grid grid-cols-12">
@@ -28,24 +54,37 @@ function TwitterSocialProof() {
           </Typography.Text>
         </div>
       </div>
-
       <div className="mt-6">
-        <div className={'-mr-32 -ml-32'}>
+        <div className={'lg:-mr-32 lg:-ml-32'}>
           <Swiper
             style={{ overflow: 'visible' }}
             initialSlide={3}
             spaceBetween={0}
             slidesPerView={4}
-            autoplay={{
-              delay: 2400,
+            speed={300}
+            loop
+            navigation={{
+              prevEl: prevRef.current ? prevRef.current : undefined,
+              nextEl: nextRef.current ? nextRef.current : undefined,
+            }}
+            onInit={(swiper: any) => {
+              swiper.params.navigation.prevEl = prevRef.current
+              swiper.params.navigation.nextEl = nextRef.current
+              swiper.navigation.update()
+            }}
+            breakpoints={{
+              320: {
+                slidesPerView: 1,
+              },
+              991: {
+                slidesPerView: 3,
+              },
             }}
-            loop={true}
-            speed={2400}
           >
             {Examples.map((tweet: any, i: number) => {
               return (
                 <SwiperSlide>
-                  <div className="mr-3 ml-3 my-8 ">
+                  <div className="mr-3 ml-3 cursor-move">
                     <TweetCard
                       key={i}
                       handle={`@${tweet.handle}`}
@@ -56,6 +95,18 @@ function TwitterSocialProof() {
                 </SwiperSlide>
               )
             })}
+            <div className="container mx-auto hidden md:flex flex-row justify-between mt-3">
+              <div ref={prevRef} className="cursor-pointer">
+                <Typography.Text>
+                  <IconArrowLeft />
+                </Typography.Text>
+              </div>
+              <div ref={nextRef} className="cursor-pointer">
+                <Typography.Text>
+                  <IconArrowRight />
+                </Typography.Text>
+              </div>
+            </div>
           </Swiper>
         </div>
       </div>

www/data/home/api-examples.js

@@ -41,7 +41,7 @@ const realtime = supabase
     lang: 'js',
     title: 'Read a record',
     description: 'Get all public rooms and their messages',
-    code: `m '@supabase/supabase-js'
+    code: `import '@supabase/supabase-js'
 
 // Initialize 
 const supabaseUrl = 'https://chat-room.supabase.co'

www/pages/database/Database.tsx

@@ -180,7 +180,7 @@ function Database() {
         initialSlide={0}
         spaceBetween={0}
         slidesPerView={1}
-        speed={400}
+        speed={300}
         allowTouchMove={false}
       >
         <div className="grid grid-cols-12">