diff --git a/config/content/TickerData.js b/config/content/TickerData.js
new file mode 100644
index 0000000..0e70ce5
--- /dev/null
+++ b/config/content/TickerData.js
@@ -0,0 +1,32 @@
+export const tickerData = [
+ { id: 1, type: 'text', content: 'Technical Events' },
+ {
+ id: 2,
+ type: 'image',
+ content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png',
+ },
+ { id: 3, type: 'text', content: 'Exhibitions' },
+ {
+ id: 4,
+ type: 'image',
+ content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_2_tuocil.png',
+ },
+ { id: 5, type: 'text', content: 'Fun Events' },
+ {
+ id: 6,
+ type: 'image',
+ content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_1_mlxhs3.png',
+ },
+ { id: 7, type: 'text', content: 'Workshops' },
+ {
+ id: 8,
+ type: 'image',
+ content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_2_1_ddiagd.png',
+ },
+ { id: 9, type: 'text', content: 'Lectures' },
+ {
+ id: 10,
+ type: 'image',
+ content: 'https://res.cloudinary.com/dhnkuonev/image/upload/v1695746152/Group_3_x0pceh.png',
+ },
+];
diff --git a/src/components/Ticker/Ticker.jsx b/src/components/Ticker/Ticker.jsx
new file mode 100644
index 0000000..21fcc05
--- /dev/null
+++ b/src/components/Ticker/Ticker.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { tickerData } from '../../../config/content/TickerData';
+import { TickerContainer, TickerMover, ItemContainer, TickerIcon } from './styles';
+import { Heading1 } from '../shared';
+
+const TickerItem = ({ item, index }) => {
+ let key;
+ if (item.type === 'text') {
+ key = `text-${item.content}`;
+ } else {
+ key = `image-${index}`;
+ }
+
+ return (
+
+ {item.type === 'text' ? (
+ {item.content}
+ ) : (
+
+ )}
+
+ );
+};
+
+const GenerateTickerItems = () =>
+ tickerData.map((item, index) => );
+
+function Ticker() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Ticker;
diff --git a/src/components/Ticker/styles.jsx b/src/components/Ticker/styles.jsx
new file mode 100644
index 0000000..0015685
--- /dev/null
+++ b/src/components/Ticker/styles.jsx
@@ -0,0 +1,60 @@
+import styled, { keyframes } from 'styled-components';
+import tw from 'twin.macro';
+
+export const TickerContainer = styled.div`
+ ${tw`
+ w-full
+ overflow-hidden
+ py-1
+ `}
+`;
+
+export const ItemContainer = styled.div`
+ ${tw`
+ inline-block
+ mx-12
+ h-16
+ mb-4
+ `}
+ @media (max-width: 768px) {
+ margin: 0.5rem 0.5rem;
+ height: 2.5rem;
+ }
+`;
+
+export const TickerIcon = styled.img`
+ ${tw`
+ my-auto
+`}
+ @media (max-width: 720px) {
+ width: 30px;
+ }
+`;
+const ticker = keyframes`
+ 0% {
+ transform: translate(0, 0);
+ }
+ 100% {
+ transform: translate(-200%, 0);
+ }
+`;
+const reverseTicker = keyframes`
+ 0% {
+ transform: translate(-100%, 0);
+ }
+ 100% {
+ transform: translate(200%, 0);
+ }
+`;
+
+export const TickerMover = styled.div`
+ ${tw`
+ inline-block
+ whitespace-nowrap
+ `}
+ animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 160s linear infinite;
+
+ @media (max-width: 720px) {
+ animation: ${({ reverse }) => (reverse ? reverseTicker : ticker)} 110s linear infinite;
+ }
+`;
diff --git a/src/pages/playground.js b/src/pages/playground.js
index 45bf690..72e9e0e 100644
--- a/src/pages/playground.js
+++ b/src/pages/playground.js
@@ -1,7 +1,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react';
import { Helmet } from 'react-helmet';
-import FAQSection from '../components/FAQSection/FAQSection';
+import Ticker from '../components/Ticker/Ticker';
const Playground = () => (
<>
@@ -10,7 +10,7 @@ const Playground = () => (
Playground
-
+
>
);