Skip to content

Commit

Permalink
UI(footer): redesigned footer + added corner plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@akolt19d
akolt19d committed Apr 21, 2024
1 parent 85a93f6 commit 4495b9d
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 20 deletions.
40 changes: 20 additions & 20 deletions src/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,42 +11,42 @@ import {

const Footer: React.FC = () => {
return (
<footer className="bg-black text-gray-300 border-t border-gray-700 mt-[30vh]">
<footer className="bg-black text-grey-lighter text-center lg:text-left mt-[30vh]">
<div className="w-[80%] mx-auto px-4 py-12 md:py-24 flex justify-center flex-col items-center">
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-10">
<div className="lg:col-span-2">
<h5 className="text-red-600 uppercase font-semibold mb-6 text-lg">
<h5 className="text-[rgba(240,132,97,1.00)] uppercase font-semibold mb-6 text-lg">
About Us
</h5>
<p className="text-gray-400 text-base leading-relaxed">
<p className="text-grey text-base leading-relaxed">
Elevate your online presence with innovative solutions. Our
mission is to empower your digital aspirations with cutting-edge
technologies and creative design.
</p>
<div className="mt-8">
<span className="text-gray-400 text-base">Connect with us:</span>
<div className="flex space-x-4 mt-4">
<span className="text-grey text-base">Connect with us:</span>
<div className="flex justify-center lg:justify-start space-x-4 mt-4">
<a
href="https://www.instagram.com/not_byte/"
className="text-red-600 hover:text-red-500 transition-colors duration-300"
className="text-[rgba(240,132,97,1.00)] hover:brightness-75 transition-[filter] duration-300"
>
<FaInstagram size="24" />
</a>
<a
href="https://www.facebook.com/profile.php?id=61556349384920"
className="text-red-600 hover:text-red-500 transition-colors duration-300"
className="text-[rgba(240,132,97,1.00)] hover:brightness-75 transition-[filter] duration-300"
>
<FaFacebookF size="24" />
</a>
<a
href="https://www.linkedin.com/company/notbyte/"
className="text-red-600 hover:text-red-500 transition-colors duration-300"
className="text-[rgba(240,132,97,1.00)] hover:brightness-75 transition-[filter] duration-300"
>
<FaLinkedinIn size="24" />
</a>
<a
href="https://www.youtube.com/channel/UCNLeJesJFyJ4efbRfTWhwaw"
className="text-red-600 hover:text-red-500 transition-colors duration-300"
className="text-[rgba(240,132,97,1.00)] hover:brightness-75 transition-[filter] duration-300"
>
<FaYoutube size="24" />
</a>
Expand All @@ -55,30 +55,30 @@ const Footer: React.FC = () => {
</div>

<div className="md:col-span-2 lg:col-span-1">
<h5 className="text-red-600 uppercase font-semibold mb-6 text-lg">
<h5 className="text-[rgba(129,81,156,1.00)] uppercase font-semibold mb-6 text-lg">
Recent Posts
</h5>
<ul className="text-base space-y-3">
<li>
<a
href="#"
className="hover:text-red-500 transition-colors duration-300"
className="hover:text-[rgba(129,81,156,1.00)] transition-colors duration-300"
>
Design Trends 2024
</a>
</li>
<li>
<a
href="#"
className="hover:text-red-500 transition-colors duration-300"
className="hover:text-[rgba(129,81,156,1.00)] transition-colors duration-300"
>
UI/UX Best Practices
</a>
</li>
<li>
<a
href="#"
className="hover:text-red-500 transition-colors duration-300"
className="hover:text-[rgba(129,81,156,1.00)] transition-colors duration-300"
>
Web Accessibility Insights
</a>
Expand All @@ -87,10 +87,10 @@ const Footer: React.FC = () => {
</div>

<div className="lg:col-span-1">
<h5 className="text-red-600 uppercase font-semibold mb-6 text-lg">
<h5 className="text-[rgba(234,86,87,1.00)] uppercase font-semibold mb-6 text-lg">
Contact Info
</h5>
<ul className="text-gray-400 text-base space-y-3">
<ul className="text-grey text-base space-y-3">
<li>
<FaPhone className="inline mr-2" />
+123 456 7890
Expand All @@ -107,29 +107,29 @@ const Footer: React.FC = () => {
</div>

<div className="lg:col-span-1">
<h5 className="text-red-600 uppercase font-semibold mb-6 text-lg">
<h5 className="text-[rgba(240,132,97,1.00)] uppercase font-semibold mb-6 text-lg">
Stay Updated
</h5>
<form className="flex flex-col space-y-4">
<input
type="email"
placeholder="Your Email Address"
className="px-4 py-3 bg-gray-700 text-white rounded-md text-base"
className="px-4 py-3 bg-grey-darkest border-grey-darker focus:border-[rgba(240,132,97,1.00)] placeholder:text-grey-dark !text-white !ring-0 text-base"
/>
<button
type="submit"
className="bg-red-600 hover:bg-red-700 text-white px-4 py-3 rounded-md transition-colors duration-300"
className="bg-colors hover:brightness-75 text-white px-4 py-3 transition-[filter] duration-300 corner-br corner-black"
>
Subscribe
</button>
</form>
<p className="text-gray-400 text-sm mt-4">
<p className="text-grey text-sm mt-4">
Subscribe to our newsletter for the latest updates.
</p>
</div>
</div>

<div className="text-center text-gray-400 text-base pt-12 sm:pt-16 font-light">
<div className="text-center text-grey text-base pt-12 sm:pt-16 font-light">
© {new Date().getFullYear()} notByte. Crafted with passion and
precision.
</div>
Expand Down
116 changes: 116 additions & 0 deletions tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,122 @@ const config: Config = {

addUtilities(newUtilities, ["responsive", "hover"]);
}),
plugin(function ({ addComponents, theme }) {
// Creating class names for every position+size variant
let classList: string[] = []
const sizeChart = {
default: 2,
sm: 1,
lg: 4,
xl: 8,
xs: .5,
md: 1.5
}
const sizeList = Object.keys(sizeChart).slice(1)
const positionList = ["br", "bl", "tr", "tl"]

positionList.forEach(position => {
let prefix = ".corner-"
classList.push(prefix+position)
sizeList.forEach(size => {
classList.push(`${prefix}${position}-${size}`)
})
})

const baseAfter = {
content: "''",
position: "absolute",
transform: "rotate(45deg)"
}

function getStyle(after: any) {
return {
position: "relative",
overflow: "hidden",
boxSizing: "border-box",
"&::after": after
}
}

// Processing styling based on class params
function processArgs(position: any, sizing?: any) {
let sides = [ position[0] == 'b' ? "bottom" : "top", position[1] == 'r' ? "right" : "left" ]
let settings = {
width: "",
aspectRatio: "1/1",
}

if(!sizing) // @ts-ignore
settings["width"] = `${sizeChart.default}rem`
else // @ts-ignore
settings["width"] = `${sizeChart[sizing]}rem`

sides.forEach(el => {
if(!sizing) // @ts-ignore
settings[el] = `-${sizeChart.default/2}rem`
else // @ts-ignore
settings[el] = `-${sizeChart[sizing]/2}rem`
})

return settings
}

// Getting arguments from class params
function getArgs(className: any) {
let args: Array<string | null> = className.substring(8).split("-")
if(args.length == 1)
args.push(null)

return args
}

// Creating an object containing every combination of class name and styling
let processedClassList = {}
classList.forEach((className: any) => {
let args = getArgs(className)
let customAfter = processArgs(args[0], args[1])
// @ts-ignore
processedClassList[className] = getStyle({
...baseAfter,
...customAfter
})
})

function getBgColor(value: string) {
return {
"&::after": {
backgroundColor: value
}
}
}

// Creating class names and their values for every established color variant
let processedColorsList = {}
const themeColors = theme('colors')
if(themeColors) {
Object.entries(themeColors).forEach(entry => {
let prefix = ".corner-"
const key = entry[0]
const value = entry[1]
if(typeof themeColors[key] === 'object') {
Object.entries(value).forEach(entry2 => {
// @ts-ignore
processedColorsList[`${prefix}${key}-${entry2[0]}`] = getBgColor(entry2[1])
})
}
else // @ts-ignore
processedColorsList[prefix+key] = getBgColor(value)

processedColorsList
})
}

addComponents({
// Deconstructing class combinations inside this object
...processedClassList,
...processedColorsList,
});
}),
plugin(function ({ addComponents }: { addComponents: any }) {
addComponents({
".chipped-corner": {
Expand Down

0 comments on commit 4495b9d

Please sign in to comment.