Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin

adrianhajdin/constants

Created August 8, 2022 14:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adrianhajdin/8a04faf5e52419ec93cd5329ffcb011e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adrianhajdin/8a04faf5e52419ec93cd5329ffcb011e to your computer and use it in GitHub Desktop.
Download ZIP
project_hoobank
Raw
constants
import { people01, people02, people03, facebook, instagram, linkedin, twitter, airbnb, binance, coinbase, dropbox, send, shield, star } from "../assets";
export const navLinks = [
{
id: "home",
title: "Home",
},
{
id: "features",
title: "Features",
},
{
id: "product",
title: "Product",
},
{
id: "clients",
title: "Clients",
},
];
export const features = [
{
id: "feature-1",
icon: star,
title: "Rewards",
content:
"The best credit cards offer some tantalizing combinations of promotions and prizes",
},
{
id: "feature-2",
icon: shield,
title: "100% Secured",
content:
"We take proactive steps make sure your information and transactions are secure.",
},
{
id: "feature-3",
icon: send,
title: "Balance Transfer",
content:
"A balance transfer credit card can save you a lot of money in interest charges.",
},
];
export const feedback = [
{
id: "feedback-1",
content:
"Money is only a tool. It will take you wherever you wish, but it will not replace you as the driver.",
name: "Herman Jensen",
title: "Founder & Leader",
img: people01,
},
{
id: "feedback-2",
content:
"Money makes your life easier. If you're lucky to have it, you're lucky.",
name: "Steve Mark",
title: "Founder & Leader",
img: people02,
},
{
id: "feedback-3",
content:
"It is usually people in the money business, finance, and international trade that are really rich.",
name: "Kenn Gallagher",
title: "Founder & Leader",
img: people03,
},
];
export const stats = [
{
id: "stats-1",
title: "User Active",
value: "3800+",
},
{
id: "stats-2",
title: "Trusted by Company",
value: "230+",
},
{
id: "stats-3",
title: "Transaction",
value: "$230M+",
},
];
export const footerLinks = [
{
title: "Useful Links",
links: [
{
name: "Content",
link: "https://www.hoobank.com/content/",
},
{
name: "How it Works",
link: "https://www.hoobank.com/how-it-works/",
},
{
name: "Create",
link: "https://www.hoobank.com/create/",
},
{
name: "Explore",
link: "https://www.hoobank.com/explore/",
},
{
name: "Terms & Services",
link: "https://www.hoobank.com/terms-and-services/",
},
],
},
{
title: "Community",
links: [
{
name: "Help Center",
link: "https://www.hoobank.com/help-center/",
},
{
name: "Partners",
link: "https://www.hoobank.com/partners/",
},
{
name: "Suggestions",
link: "https://www.hoobank.com/suggestions/",
},
{
name: "Blog",
link: "https://www.hoobank.com/blog/",
},
{
name: "Newsletters",
link: "https://www.hoobank.com/newsletters/",
},
],
},
{
title: "Partner",
links: [
{
name: "Our Partner",
link: "https://www.hoobank.com/our-partner/",
},
{
name: "Become a Partner",
link: "https://www.hoobank.com/become-a-partner/",
},
],
},
];
export const socialMedia = [
{
id: "social-media-1",
icon: instagram,
link: "https://www.instagram.com/",
},
{
id: "social-media-2",
icon: facebook,
link: "https://www.facebook.com/",
},
{
id: "social-media-3",
icon: twitter,
link: "https://www.twitter.com/",
},
{
id: "social-media-4",
icon: linkedin,
link: "https://www.linkedin.com/",
},
];
export const clients = [
{
id: "client-1",
logo: airbnb,
},
{
id: "client-2",
logo: binance,
},
{
id: "client-3",
logo: coinbase,
},
{
id: "client-4",
logo: dropbox,
},
];
Raw
index.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--black-gradient: linear-gradient(
144.39deg,
#ffffff -278.56%,
#6d6d6d -78.47%,
#11101d 91.61%
);
--card-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
}
* {
scroll-behavior: smooth;
}
.text-gradient {
background: radial-gradient(
64.18% 64.18% at 71.16% 35.69%,
#def9fa 0.89%,
#bef3f5 17.23%,
#9dedf0 42.04%,
#7de7eb 55.12%,
#5ce1e6 71.54%,
#33bbcf 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.bg-blue-gradient {
background: linear-gradient(
157.81deg,
#def9fa -43.27%,
#bef3f5 -21.24%,
#9dedf0 12.19%,
#7de7eb 29.82%,
#5ce1e6 51.94%,
#33bbcf 90.29%
);
}
.bg-black-gradient {
background: linear-gradient(
144.39deg,
#ffffff -278.56%,
#6d6d6d -78.47%,
#11101d 91.61%
);
}
.bg-black-gradient-2 {
background: linear-gradient(
-168.39deg,
#ffffff -278.56%,
#6d6d6d -78.47%,
#11101d 91.61%
);
}
.bg-gray-gradient {
background: linear-gradient(
153.47deg,
rgba(255, 255, 255, 0) -341.94%,
#14101d 95.11%
);
}
.bg-discount-gradient {
background: linear-gradient(125.17deg, #272727 0%, #11101d 100%);
}
.box-shadow {
box-shadow: 0px 20px 100px -10px rgba(66, 71, 91, 0.1);
}
.sidebar {
-webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slide-top {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.feature-card:hover {
background: var(--black-gradient);
box-shadow: var(--card-shadow);
}
.feedback-container .feedback-card:last-child {
margin-right: 0px;
}
.feedback-card {
background: transparent;
}
.feedback-card:hover {
background: var(--black-gradient);
}
.blue__gradient {
background: linear-gradient(180deg, rgba(188, 165, 255, 0) 0%, #214d76 100%);
filter: blur(123px);
}
.pink__gradient {
background: linear-gradient(90deg, #f4c4f3 0%, #fc67fa 100%);
filter: blur(900px);
}
.white__gradient {
background: rgba(255, 255, 255, 0.6);
filter: blur(750px);
}
Raw
index.js
import Navbar from "./Navbar";
import Billing from "./Billing";
import CardDeal from "./CardDeal";
import Business from "./Business";
import Clients from "./Clients";
import CTA from "./CTA";
import Stats from "./Stats";
import Footer from "./Footer";
import Testimonials from "./Testimonials";
import Hero from "./Hero";
export {
Navbar,
Billing,
CardDeal,
Business,
Clients,
CTA,
Stats,
Footer,
Testimonials,
Hero,
};
Raw
style.js
const styles = {
boxWidth: "xl:max-w-[1280px] w-full",
heading2: "font-poppins font-semibold xs:text-[48px] text-[40px] text-white xs:leading-[76.8px] leading-[66.8px] w-full",
paragraph: "font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px]",
flexCenter: "flex justify-center items-center",
flexStart: "flex justify-center items-start",
paddingX: "sm:px-16 px-6",
paddingY: "sm:py-16 py-6",
padding: "sm:px-16 px-6 sm:py-12 py-4",
marginX: "sm:mx-16 mx-6",
marginY: "sm:my-16 my-6",
};
export const layout = {
section: `flex md:flex-row flex-col ${styles.paddingY}`,
sectionReverse: `flex md:flex-row flex-col-reverse ${styles.paddingY}`,
sectionImgReverse: `flex-1 flex ${styles.flexCenter} md:mr-10 mr-0 md:mt-0 mt-10 relative`,
sectionImg: `flex-1 flex ${styles.flexCenter} md:ml-10 ml-0 md:mt-0 mt-10 relative`,
sectionInfo: `flex-1 ${styles.flexStart} flex-col`,
};
export default styles;
Raw
tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx}"],
mode: "jit",
theme: {
extend: {
colors: {
primary: "#00040f",
secondary: "#00f6ff",
dimWhite: "rgba(255, 255, 255, 0.7)",
dimBlue: "rgba(9, 151, 124, 0.1)",
},
fontFamily: {
poppins: ["Poppins", "sans-serif"],
},
},
screens: {
xs: "480px",
ss: "620px",
sm: "768px",
md: "1060px",
lg: "1200px",
xl: "1700px",
},
},
plugins: [],
};
@AfejukuOtsemaye
Copy link

AfejukuOtsemaye commented Sep 20, 2024

How do i download the assets folder, i'm having difficulty in accessing, someone please help!

@IsaacLiraa
Copy link

IsaacLiraa commented Jan 30, 2025

Hey @AfejukuOtsemaye. Install the repository to your pc. The extract the assets folder in it and place it inside the /src directory of your project. Does that help?

@IsaacLiraa
Copy link

IsaacLiraa commented Jan 30, 2025

If you're still having issues with Tailwind, we recommend trying the following steps:
@tailwind base; @tailwind components; @tailwind utilities;
chage flowing:
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
ps.
text-fill-color:transparent; => -webkit-text-fill-color:transparent;
Good luck!

Not working for me

Tailwind has updated their versoin to v4. You may try installing it with npm install tailwindcss @tailwindcss/vite if you're using Vite. See their documentation here: https://tailwindcss.com/docs/installation/using-vite .

After installing you need to place @import "tailwindcss"; into your index.css file. And delete the following lines:


@tailwind base;
@tailwind components;
@tailwind utilities;

Hope that helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment