firefly/sunrise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SR-002: Responsive styling

Browse Source 
Made the services section responsive. Fixed some text as well and changed the border color under each service.
This commit is contained in:
BlackDives
2023-04-30 12:29:40 -05:00
parent 0aacc551d6
commit 5f1cdfda5b
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/index.tsx
View File

@@ -4,6 +4,10 @@ import Web from "../../public/icons/web.svg";
import Mobile from "../../public/icons/mobile.svg"; import Mobile from "../../public/icons/mobile.svg";
// import Design from "../../public/icons/design.svg"; // import Design from "../../public/icons/design.svg";
interface BorderProps {
color: string;
}
const Home: NextPage = () => { const Home: NextPage = () => {
return ( return (
<> <>
@@ -43,7 +47,7 @@ const Services = () => {
{ {
id: 1, id: 1,
icon: "web.svg", icon: "web.svg",
borderColor: "#F4A261", borderColor: "border-[#F4A261]",
title: "Websites", title: "Websites",
description: description:
"Fast. Responsive. Accessible. We specialize in building high-performing websites without leaving any users behind. ", "Fast. Responsive. Accessible. We specialize in building high-performing websites without leaving any users behind. ",
@@ -51,7 +55,7 @@ const Services = () => {
{ {
id: 2, id: 2,
icon: "mobile.svg", icon: "mobile.svg",
borderColor: "#2A9D8F", borderColor: "border-[#2A9D8F]",
title: "Mobile Apps", title: "Mobile Apps",
description: description:
"We build cross-platform mobile apps. Lorem ipsum dolor sit amet consectetur adipiscing elit.", "We build cross-platform mobile apps. Lorem ipsum dolor sit amet consectetur adipiscing elit.",
@@ -59,7 +63,7 @@ const Services = () => {
{ {
id: 3, id: 3,
icon: "design.svg", icon: "design.svg",
borderColor: "#E76F51", borderColor: "border-[#E76F51]",
title: "UI/UX Design", title: "UI/UX Design",
description: description:
"First impressions matter. We know how to craft unique and impressive digital experiences.", "First impressions matter. We know how to craft unique and impressive digital experiences.",
@@ -69,18 +73,20 @@ const Services = () => {
return ( return (
<div className="container mx-auto my-10"> <div className="container mx-auto my-10">
<div> <div>
<h2 className="text-[40px] font-extrabold">What we can do for you</h2> <h2 className="text-center text-[32px] font-extrabold sm:text-left sm:text-[40px]">
What we can do for you
</h2>
</div> </div>
<div className="flex flex-col sm:flex-col md:flex-row"> <div className="flex flex-col sm:flex-col md:flex-row">
{Services.map((data) => ( {Services.map((data) => (
<div <div
key={data.id} key={data.id}
className="my-2 flex w-1/3 flex-col items-center justify-start" className="my-2 flex w-full flex-col items-center justify-start sm:w-1/3"
> >
<img src={`icons/${data.icon}`} alt="service-icon" /> <img src={`icons/${data.icon}`} alt="service-icon" />
<h3 className="text-[32px] font-semibold">{data.title}</h3> <h3 className="text-[32px] font-semibold">{data.title}</h3>
<div className={`my-5 w-3/4 border-2 border-[#000]`} /> <div className={`my-5 w-3/4 border-2 ${data.borderColor}`} />
<p className="w-1/2 text-center text-[20px]">{data.description}</p> <p className="w-3/4 text-center text-[20px] ">{data.description}</p>
</div> </div>
))} ))}
</div> </div>
@@ -90,5 +96,3 @@ const Services = () => {
// const Projects = () => {} // const Projects = () => {}
// const About = () => {} // const About = () => {}
// const Contact = () => {} // const Contact = () => {}
// const Service: React.FC = () => {}