Skip to content

Refactor footer, feature, and workflow modules to remove duplicate code and apply DRY principle #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refactor footer, feature, and workflow modules to remove duplicate code and apply DRY principle #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 14 additions & 128 deletions components/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Image from "next/image";
import BlurredShapeGray from "@/public/images/blurred-shape-gray.svg";
import BlurredShape from "@/public/images/blurred-shape.svg";
import FeaturesImage from "@/public/images/features.png";
import { featuresData } from "./featuresData";

export default function Features() {
return (
Expand Down Expand Up @@ -59,134 +60,19 @@ export default function Features() {
</div>
{/* Items */}
<div className="mx-auto grid max-w-sm gap-12 sm:max-w-none sm:grid-cols-2 md:gap-x-14 md:gap-y-16 lg:grid-cols-3">
<article>
<svg
className="mb-3 fill-indigo-500"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
>
<path d="M0 0h14v17H0V0Zm2 2v13h10V2H2Z" />
<path
fillOpacity=".48"
d="m16.295 5.393 7.528 2.034-4.436 16.412L5.87 20.185l.522-1.93 11.585 3.132 3.392-12.55-5.597-1.514.522-1.93Z"
/>
</svg>
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
Project Milestones
</h3>
<p className="text-indigo-200/65">
Track progress across custom flows for your team. Find the right
balance for the user, privacy and security.
</p>
</article>
<article>
<svg
className="mb-3 fill-indigo-500"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
>
<path fillOpacity=".48" d="M7 8V0H5v8h2Zm12 16v-4h-2v4h2Z" />
<path d="M19 6H0v2h17v8H7v-6H5v8h19v-2h-5V6Z" />
</svg>
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
Team Views
</h3>
<p className="text-indigo-200/65">
Track progress across custom flows for your team. Find the right
balance for the user, privacy and security.
</p>
</article>
<article>
<svg
className="mb-3 fill-indigo-500"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
>
<path d="M23.414 6 18 .586 16.586 2l3 3H7a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4h12.586l-3 3L18 11.414 23.414 6Z" />
<path
fillOpacity=".48"
d="M13.01 12.508a2.5 2.5 0 0 0-3.502.482L1.797 23.16.203 21.952l7.71-10.17a4.5 4.5 0 1 1 7.172 5.437l-4.84 6.386-1.594-1.209 4.841-6.385a2.5 2.5 0 0 0-.482-3.503Z"
/>
</svg>
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
Advanced Search
</h3>
<p className="text-indigo-200/65">
Track progress across custom flows for your team. Find the right
balance for the user, privacy and security.
</p>
</article>
<article>
<svg
className="mb-3 fill-indigo-500"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
>
<path
fillOpacity=".48"
d="m3.031 9.05-.593-.805 1.609-1.187.594.804a6.966 6.966 0 0 1 0 8.276l-.594.805-1.61-1.188.594-.805a4.966 4.966 0 0 0 0-5.9Z"
/>
<path d="m7.456 6.676-.535-.845 1.69-1.07.534.844a11.944 11.944 0 0 1 0 12.789l-.535.845-1.69-1.071.536-.845a9.944 9.944 0 0 0 0-10.647Z" />
<path
d="m11.888 4.35-.514-.858 1.717-1.027.513.858a16.9 16.9 0 0 1 2.4 8.677 16.9 16.9 0 0 1-2.4 8.676l-.513.859-1.717-1.028.514-.858A14.9 14.9 0 0 0 14.003 12a14.9 14.9 0 0 0-2.115-7.65Z"
opacity=".48"
/>
<path d="m16.321 2-.5-.866 1.733-1 .5.866A22 22 0 0 1 21 12c0 3.852-1.017 7.636-2.948 10.97l-.502.865-1.73-1.003.501-.865A19.878 19.878 0 0 0 19 12a20 20 0 0 0-2.679-10Z" />
</svg>
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
Strategic Initiatives
</h3>
<p className="text-indigo-200/65">
Track progress across custom flows for your team. Find the right
balance for the user, privacy and security.
</p>
</article>
<article>
<svg
className="mb-3 fill-indigo-500"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
>
<path
fillOpacity=".48"
d="M12 8.8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z"
/>
<path d="m7.454 2.891.891-.454L7.437.655l-.891.454a12 12 0 0 0 0 21.382l.89.454.91-1.781-.892-.455a10 10 0 0 1 0-17.818ZM17.456 1.11l-.891-.454-.909 1.782.891.454a10 10 0 0 1 0 17.819l-.89.454.908 1.781.89-.454a12 12 0 0 0 0-21.382Z" />
</svg>
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
Flexible Workflows
</h3>
<p className="text-indigo-200/65">
Track progress across custom flows for your team. Find the right
balance for the user, privacy and security.
</p>
</article>
<article>
<svg
className="mb-3 fill-indigo-500"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
>
<path
fillOpacity=".48"
d="M19 8h5v2h-5V8Zm-4 5h9v2h-9v-2Zm9 5H11v2h13v-2Z"
/>
<path d="M19.406 3.844 6.083 20.497.586 15 2 13.586l3.917 3.917L17.844 2.595l1.562 1.25Z" />
</svg>
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
Unified Timeline
</h3>
<p className="text-indigo-200/65">
Track progress across custom flows for your team. Find the right
balance for the user, privacy and security.
</p>
</article>
{
featuresData.map((feature, index) => (
<article key={index}>
{feature.icon}
<h3 className="mb-1 font-nacelle text-[1rem] font-semibold text-gray-200">
{feature.title}
</h3>
<p className="text-indigo-200/65">
{feature.description}
</p>
</article>
))
}
</div>
</div>
</div>
Expand Down
64 changes: 64 additions & 0 deletions components/featuresData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
export const featuresData = [
{
icon: (
<svg className="mb-3 fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<path d="M0 0h14v17H0V0Zm2 2v13h10V2H2Z" />
<path fillOpacity=".48" d="m16.295 5.393 7.528 2.034-4.436 16.412L5.87 20.185l.522-1.93 11.585 3.132 3.392-12.55-5.597-1.514.522-1.93Z" />
</svg>
),
title: "Project Milestones",
description: "Track progress across custom flows for your team. Find the right balance for the user, privacy and security."
},
{
icon: (
<svg className="mb-3 fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<path fillOpacity=".48" d="M7 8V0H5v8h2Zm12 16v-4h-2v4h2Z" />
<path d="M19 6H0v2h17v8H7v-6H5v8h19v-2h-5V6Z" />
</svg>
),
title: "Team Views",
description: "Track progress across custom flows for your team. Find the right balance for the user, privacy and security."
},
{
icon: (
<svg className="mb-3 fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<path d="M23.414 6 18 .586 16.586 2l3 3H7a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4h12.586l-3 3L18 11.414 23.414 6Z" />
<path fillOpacity=".48" d="M13.01 12.508a2.5 2.5 0 0 0-3.502.482L1.797 23.16.203 21.952l7.71-10.17a4.5 4.5 0 1 1 7.172 5.437l-4.84 6.386-1.594-1.209 4.841-6.385a2.5 2.5 0 0 0-.482-3.503Z" />
</svg>
),
title: "Advanced Search",
description: "Track progress across custom flows for your team. Find the right balance for the user, privacy and security."
},
{
icon: (
<svg className="mb-3 fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<path fillOpacity=".48" d="m3.031 9.05-.593-.805 1.609-1.187.594.804a6.966 6.966 0 0 1 0 8.276l-.594.805-1.61-1.188.594-.805a4.966 4.966 0 0 0 0-5.9Z" />
<path d="m7.456 6.676-.535-.845 1.69-1.07.534.844a11.944 11.944 0 0 1 0 12.789l-.535.845-1.69-1.071.536-.845a9.944 9.944 0 0 0 0-10.647Z" />
<path d="m11.888 4.35-.514-.858 1.717-1.027.513.858a16.9 16.9 0 0 1 2.4 8.677 16.9 16.9 0 0 1-2.4 8.676l-.513.859-1.717-1.028.514-.858A14.9 14.9 0 0 0 14.003 12a14.9 14.9 0 0 0-2.115-7.65Z" opacity=".48" />
<path d="m16.321 2-.5-.866 1.733-1 .5.866A22 22 0 0 1 21 12c0 3.852-1.017 7.636-2.948 10.97l-.502.865-1.73-1.003.501-.865A19.878 19.878 0 0 0 19 12a20 20 0 0 0-2.679-10Z" />
</svg>
),
title: "Strategic Initiatives",
description: "Track progress across custom flows for your team. Find the right balance for the user, privacy and security."
},
{
icon: (
<svg className="mb-3 fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<path fillOpacity=".48" d="M12 8.8a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z" />
<path d="m7.454 2.891.891-.454L7.437.655l-.891.454a12 12 0 0 0 0 21.382l.89.454.91-1.781-.892-.455a10 10 0 0 1 0-17.818ZM17.456 1.11l-.891-.454-.909 1.782.891.454a10 10 0 0 1 0 17.819l-.89.454.908 1.781.89-.454a12 12 0 0 0 0-21.382Z" />
</svg>
),
title: "Flexible Workflows",
description: "Track progress across custom flows for your team. Find the right balance for the user, privacy and security."
},
{
icon: (
<svg className="mb-3 fill-indigo-500" xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
<path fillOpacity=".48" d="M19 8h5v2h-5V8Zm-4 5h9v2h-9v-2Zm9 5H11v2h13v-2Z" />
<path d="M19.406 3.844 6.083 20.497.586 15 2 13.586l3.917 3.917L17.844 2.595l1.562 1.25Z" />
</svg>
),
title: "Unified Timeline",
description: "Track progress across custom flows for your team. Find the right balance for the user, privacy and security."
}
]
Loading