File: /var/www/quadcode.com/src/components/blocks/marketing-guide/Media.svelte
<script lang="ts">
import img1 from '../../../assets/images/marketing-guide/inst.svg';
import img2 from '../../../assets/images/marketing-guide/facebook.svg';
import img3 from '../../../assets/images/marketing-guide/x.svg';
import img4 from '../../../assets/images/marketing-guide/linkedIn.svg';
import img5 from '../../../assets/images/marketing-guide/tiktok.svg';
import img6 from '../../../assets/images/marketing-guide/youtube.svg';
export let className = '';
</script>
<div class="block-media {className}">
<h2>Social Media</h2>
<p>
It’s hard to imagine any company without social media profiles nowadays. Making an online presence of your brand and
being active on social media is crucial.
</p>
<div class="block-media__grid">
<div class="block-media__gridItem">
<img src={img1} alt="" loading="lazy" />
</div>
<div class="block-media__gridItem">
<img src={img2} alt="" loading="lazy" />
</div>
<div class="block-media__gridItem">
<img src={img3} alt="" loading="lazy" />
</div>
<div class="block-media__gridItem">
<img src={img4} alt="" loading="lazy" />
</div>
<div class="block-media__gridItem">
<img src={img5} alt="" loading="lazy" />
</div>
<div class="block-media__gridItem">
<img src={img6} alt="" loading="lazy" />
</div>
</div>
<div class="{className}Wrap">
<h3>Why should you be on social media?</h3>
<ul>
<li>You can build your own community</li>
<li>Increase trust and reputation</li>
<li>Provide customer support and address inquiries</li>
<li>Increase your exposure and cover broader audience</li>
<li>Drive traffic to your website or other online channels</li>
</ul>
</div>
<div class="{className}Wrap">
<h3>Tips to follow</h3>
<div class="{className}Grid">
<div>
<p>1</p>
<span>Develop your brand positioning</span>
</div>
<div>
<p>2</p>
<span>Create detailed social media profiles</span>
</div>
<div>
<p>3</p>
<span>Post useful and engaging content</span>
</div>
<div>
<p>4</p>
<span>Interact with your audience</span>
</div>
<div>
<p>5</p>
<span>Post regularly and stay consistent</span>
</div>
</div>
</div>
<div class="{className}Wrap">
<h3>Content types for social media</h3>
<div class="{className}Table block-media__table">
<table>
<tbody>
<tr>
<td>Market Analysis</td>
<td>Share insights, charts, and predictions about currency pairs and market trends</td>
</tr>
<tr>
<td>Educational Content</td>
<td
>Provide tutorials, webinars, and guides on forex trading strategies, risk management, and market analysis</td
>
</tr>
<tr>
<td>Trading Tips</td>
<td>Offer quick tips, tricks, and best practices for successful trading</td>
</tr>
<tr>
<td>Client Testimonials</td>
<td>Showcase success stories and testimonials from satisfied clients</td>
</tr>
<tr>
<td>Company Updates</td>
<td>Share news, announcements, and updates about your brokerage and its services</td>
</tr>
<tr>
<td>Infographics</td>
<td>Present complex trading concepts and data in visually appealing and easy-to-understand formats</td>
</tr>
<tr>
<td>Interactive Content</td>
<td>Host polls, quizzes, and Q&A sessions to engage with your audience and gather feedback</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="{className}Wrap">
<h3>Content types for social media</h3>
<div class="{className}Table block-media__table block-media__table--social">
<table>
<tbody>
<tr>
<td>
<img src={img6} alt="" loading="lazy" />
</td>
<td>
<ul>
<li>
Channel Cover Picture: 2560x1440 pixels (for desktop), 1855x423 pixels (for tablets), 1546×423 pixels
(for smartphones), 2560×1440 pixels (for TV)
</li>
<li>Video Uploads: 1280×760 pixels</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src={img3} alt="" loading="lazy" />
</td>
<td>
<ul>
<li>Profile Photo: 400×400 pixels (a maximum 100 KB file size)</li>
<li>Header Photo: 1500×500 pixels (a maximum 10 MB file size)</li>
<li>In-Stream Photo: 440×220 pixels (a maximum 5 MB file size for photos)</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src={img4} alt="" loading="lazy" />
</td>
<td>
<ul>
<li>Background image: 1536x768px Maximum 4MB. Appears as 1400x425 pixels.</li>
<li>Image types include: PNG, JPG or GIF.</li>
<li>Standard Logo: 400×400px|</li>
<li>Image Guidelines</li>
<li>400×400 pixels recommended (300×300 minimum,resized to fit).</li>
<li>Maximum 4 MB (Square layout).</li>
<li>PNG, JPG or GIF</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src={img2} alt="" loading="lazy" />
</td>
<td>
<ul>
<li>Profile Photo: 820×462 pixels (a preferred max file size of 100 KB)</li>
<li>In-Stream Photo: 180×180 pixels</li>
</ul>
</td>
</tr>
<tr>
<td>
<img src={img1} alt="" loading="lazy" />
</td>
<td>
<ul>
<li>Profile Photo: 110×110 pixels</li>
<li>Header Photo: 1080×1080 pixels</li>
<li>In-Stream Photo: 750x1334 pixels</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<style lang="scss">
@import '/src/scss/media';
@import '/src/scss/mixins';
@import '/src/scss/variables';
.block-media {
&__grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
&__gridItem {
padding: 12px 0;
width: calc((100% - 24px * 5) / 6);
@include breakpoint-down('tabM') {
width: calc((100% - 24px * 2) / 3);
}
img {
width: 56px;
height: 56px;
margin-inline: auto;
}
}
&__table {
margin-bottom: 10px;
padding: 0 0 40px 0;
&::-webkit-scrollbar {
width: 0;
opacity: 0;
display: none;
}
> table {
width: 100%;
table-layout: fixed;
border: none;
border-collapse: collapse;
tr {
@include smallDefault;
width: 30%;
&:nth-child(2n + 0) {
background-color: $techBlue2 !important;
}
&:nth-child(2n + 1) {
background-color: transparent !important;
}
}
td {
border: none;
vertical-align: top;
padding: 16px 0 16px 24px;
&:first-of-type {
@include smallCTA;
width: 25%;
@include breakpoint-down('deskL') {
width: 33%;
}
}
&:last-of-type {
width: 75%;
@include breakpoint-down('deskL') {
width: 67%;
}
}
img {
width: 56px;
}
}
}
&--social {
> table {
td {
&:first-of-type {
width: 11%;
@include breakpoint-down('deskL') {
width: 14%;
}
@include breakpoint-down('deskS') {
width: 23%;
}
}
&:last-of-type {
width: 89%;
@include breakpoint-down('deskL') {
width: 86%;
}
@include breakpoint-down('deskS') {
width: 77%;
}
}
}
}
}
}
}
</style>