Skip to content

Commit

Permalink
Fixed styling and added color support for each individual Feature card
Browse files Browse the repository at this point in the history
  • Loading branch information
@StefanMarAntonsson
StefanMarAntonsson committed Nov 22, 2024
1 parent dcb3aea commit 225b59a
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 108 deletions.
67 changes: 8 additions & 59 deletions src/components/Feature.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,66 +29,15 @@ interface Props {
color: FeatureColorsType;
icon: string;
title: string;
desc?: string;
}
const { icon = 'mdi:rocket', title = 'Title', color } = Astro.props;
const { desc, icon = 'mdi:rocket', title = 'Title', color } = Astro.props;
const selectedColor = FeatureColors[color];
---

<div class=`relative p-8 flex flex-col gap-4 before:border-[3px] before:border-[${selectedColor.main}] after:bg-[${selectedColor.dark}]` >
<Icon name={icon} class="relative z-[2]" style=`color: ${selectedColor.main};`/>
<div class="relative z-[2] content">
<h3 class="relative z-[2]">{title}</h3>
<p class="relative z-[2]">
{selectedColor.main}
<slot>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, corporis.</slot>
</p>
<div class="relative p-8 flex flex-col gap-4" style=`border-radius: 1rem;border:4px solid ${selectedColor.main};box-shadow:4px 4px 0 3px var(--background), 12px 12px 0 4px ${selectedColor.dark};`>
<Icon name={icon} class="relative z-[2]" style=`color: ${selectedColor.main};width:4rem;height:auto;`/>
<div>
<h3>{title}</h3>
{desc && <p>{desc}</p>}
</div>
</div>

<!-- <style lang="scss">
@use '../assets/scss/base/breakpoint' as *;
.feature {
width: calc(100% - 0.5rem);
> * {
z-index: 2;
}
@include breakpoint(large) {
width: 100%;
}
&::before,
&::after {
content: '';
position: absolute;
}
&::before {
inset: 0;
background-color: var(--neutral-100);
border-radius: 1rem;
box-shadow: 0 0 0 6px var(--neutral-100);
z-index: 1;
}
&::after {
// background-color: var(--neutral-400);
inset: 1rem -0.85rem -0.85rem 1rem;
border-radius: 1rem;
z-index: 0;
}
}
:global(.feature [data-icon]) {
height: auto;
width: 4rem;
// color: var(--feature-action-color, var(--action-color));
}
:global(.darkmode .feature::before) {
background-color: var(--dark-100);
box-shadow: 0 0 0 6px var(--dark-100);
}
</style> -->
</div>
65 changes: 16 additions & 49 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,55 +17,22 @@ import TestimonialCarousel from '../components/TestimonialCarousel.astro'
</p>
<br />
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
<div>
<Feature icon="ion:call" title="Remote Support" color="blue">
Fast and reliable remote troubleshooting and support to resolve your IT issues without needing a site visit.
</Feature>
</div>
<Feature icon="ion:wrench" title="Device Maintenance" color="blue">
Ensure your devices run smoothly and efficiently with our comprehensive maintenance services. Extend the life
of your devices!
</Feature>
<div>
<Feature icon="mdi:wallet" title="Device Consultancy" color="green">
Expert advice on selecting, setting up, and optimizing devices to meet your specific needs, ensuring seamless
integration and enhanced performance.
</Feature>

</div>
<Feature icon="mdi:virus" title="Virus and Malware Removal" color="yellow">
Is your PC infected with malware or viruses? We can help eliminate threats and secure your system!
</Feature>
<Feature icon="mdi:server" title="Home Server Setup" color="red">
Host your own services at home or decouple from the cloud with our expert home server solutions.
</Feature>
<Feature icon="mdi:cable-data" title="Network Design and Upgrade" color="red">
Upgrade your network with our tailored design and optimization services for better connectivity and
performance.
</Feature>
<Feature icon="mdi:hammer-screwdriver" title="Custom PC Builds" color="red">
Whether you need a high-performance PC or one that fits your budget, we can build it for you!
</Feature>
<Feature icon="mdi:data" title="Data Recovery Services" color="yellow">
Recover lost data from failed or broken devices with our specialized recovery solutions.
</Feature>
<Feature icon="mdi:cctv" title="Home & SMB Surveillance Solutions" color="yellow">
Secure your home or business with our comprehensive security camera systems, providing peace of mind while
you’re away.
</Feature>
<Feature icon="ion:md-cloud-upload" title="Backup Solutions" color="green">
Protect your data with automated onsite or cloud backup services. Ensure your information is safe and easily
recoverable in the event of a disaster.
</Feature>
<Feature icon="ion:ios-settings" title="Software Installation and Configuration" color="blue">
Assistance with installing and configuring software to ensure it runs optimally on your devices.
</Feature>
<Feature icon="ion:hardware-chip" title="Hardware Upgrades" color="blue">
Boost the performance of your existing devices with our hardware upgrade services.
</Feature>
<Feature icon="mdi:printer-wireless" title="Printer Setup and Troubleshooting" color="green">
Ensure your printers are correctly set up and maintained for hassle-free printing.
</Feature>
<Feature icon="ion:call" title="Remote Support" color="blue"
desc="Fast and reliable remote troubleshooting and support to resolve your IT issues without needing a site visit." />
<Feature icon="ion:wrench" title="Device Maintenance" color="blue"
desc="Ensure your devices run smoothly and efficiently with our comprehensive maintenance services. Extend the life of your devices!" />
<Feature icon="mdi:wallet" title="Device Consultancy" color="green" desc="Expert advice on selecting, setting up, and optimizing devices to meet your specific needs, ensuring seamless integration and enhanced performance." />
<Feature icon="mdi:virus" title="Virus and Malware Removal" color="yellow" desc="Is your PC infected with malware or viruses? We can help eliminate threats and secure your system!" />
<Feature icon="mdi:server" title="Home Server Setup" color="red" desc="Host your own services at home or decouple from the cloud with our expert home server solutions." />
<Feature icon="mdi:cable-data" title="Network Design and Upgrade" color="red" desc="Upgrade your network with our tailored design and optimization services for better connectivity and performance." />
<Feature icon="mdi:hammer-screwdriver" title="Custom PC Builds" color="red" desc="Whether you need a high-performance PC or one that fits your budget, we can build it for you!" />
<Feature icon="mdi:data" title="Data Recovery Services" color="yellow" desc="Recover lost data from failed or broken devices with our specialized recovery solutions." />
<Feature icon="mdi:cctv" title="Home & SMB Surveillance Solutions" color="yellow" desc="Secure your home or business with our comprehensive security camera systems, providing peace of mind while you’re away." />
<Feature icon="ion:md-cloud-upload" title="Backup Solutions" color="green" desc="Protect your data with automated onsite or cloud backup services. Ensure your information is safe and easily recoverable in the event of a disaster." />
<Feature icon="ion:ios-settings" title="Software Installation and Configuration" color="blue" desc="Assistance with installing and configuring software to ensure it runs optimally on your devices." />
<Feature icon="ion:hardware-chip" title="Hardware Upgrades" color="blue" desc="Boost the performance of your existing devices with our hardware upgrade services." />
<Feature icon="mdi:printer-wireless" title="Printer Setup and Troubleshooting" color="green" desc="Ensure your printers are correctly set up and maintained for hassle-free printing." />

</div>
</div>
</section>
Expand Down

0 comments on commit 225b59a

Please sign in to comment.