Skip to content

Commit

Permalink
Add FontAwesomeIcon import
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxontech
maxontech committed Mar 16, 2024
1 parent 9c7e301 commit d06cd55
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 67 deletions.
1 change: 1 addition & 0 deletions next-site/src/app/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Plus_Jakarta_Sans } from "next/font/google";
import "./globals.css";
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const jakarta = Plus_Jakarta_Sans({
subsets: ["latin"],
Expand Down
157 changes: 90 additions & 67 deletions next-site/src/app/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,12 @@
'use client'
import Image from 'next/image';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

import { faReact } from '@fortawesome/free-brands-svg-icons'
import { faClock } from '@fortawesome/free-regular-svg-icons'
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';

function Card({ item }) {
return (
<div className="flex flex-col justify-center mr-1 ml-1 mt-1 mb-3">
<div className="flex flex-col items-start">
<div className='overflow-hidden rounded-xl w-[350px] h-[400px] transition-transform duration-500 ease-in-out transform lg:hover:scale-105 shadow-md'>
<Image
src={`https://raw.githubusercontent.com/maxontech/landing-page-design-examples/master/docs/${item.screenshotPath}`}
alt={item.title}
width={500}
height={600}
/>
</div>
<span className="flex justify-between items-baseline mt-2 pl-1 pr-1 w-[350px]">
<h2 className=" font-semibold text-base">{item.companyName}</h2>
<div className="flex space-x-2 text-base font-normal" >
<p className="">
{item.stack !== "" && <FontAwesomeIcon className="mx-1" icon={faLayerGroup} />}
{item.stack}
</p>
<p className=""><FontAwesomeIcon className="mx-1" icon={faClock} />{item.timeToPageLoad}ms</p>
</div>
</span>
<span className="flex flex-wrap items-baseline pl-1 pr-1 w-[350px] overflow-auto whitespace-normal">
{item.tags.map((tag, index) => (
<p key={index} className="text-base pr-2 font-normal text-gray-600">{"#" + tag.charAt(0).toUpperCase() + tag.slice(1)}</p>
))}
</span>

</div>
</div>
);
}
import Card from '../components/card';
import Banner from '@/components/banner';

export default function Home() {
const [data, setData] = useState([]);
Expand Down Expand Up @@ -70,40 +39,94 @@ export default function Home() {
}, []);

return (
<main className="flex min-h-screen flex-col">
<div className="h-[600px] bg-gray-200 relative">
<Image
src="/panoramic.png"
layout="fill"
objectFit="cover"
alt="Hero Image"
></Image>
<div className="absolute inset-0 bg-gradient-to-b from-[rgba(0,0,0,0.9)] via-[rgba(0,0,0,0.65)] to-[rgba(0,0,0,0.8)]">
<>
<Banner />

<header>


<nav class="bg-white dark:bg-gray-900 w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
<button data-collapse-toggle="navbar-sticky" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-sticky" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
</div>
<div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
<ul class="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main className="flex min-h-screen flex-col">
<div className="h-[650px] bg-gray-200 relative">
<Image
src="/panoramic.png"
layout="fill"
objectFit="cover"
alt="Hero Image"
/>
<div className="absolute inset-0 bg-gradient-to-b from-[rgba(31,78,158,1)] via-[rgba(31,78,158,0.85)] to-[rgba(31,78,158,0.9)]">
</div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-white pb-1">
<div className="flex justify-center mb-4">
<Image
src="/laurels.png"
width={200}
height={200}
/>
</div>
<h1 className="text-4xl font-bold">Discover the web's best Landing Pages</h1>
<p className="mt-4 text-xl">This Site features the best landing page designs on the web! Learn from the best and get inspiration from real landing page examples.</p>
</div>
</div>
<div className="bg-white dark:bg-gray-900 w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600">
<div className="w-full max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<div className="bg-white py-2 px-3 ">
<nav className="flex flex-wrap gap-4">
{['startup', 'bootstrap', 'vc'].map((tag) => (
<button
key={tag}
onClick={() => handleTagClick(tag)}
className={`inline-flex whitespace-nowrap border-b-2 border-transparent py-2 px-3 text-sm font-medium transition-all duration-200 ease-in-out ${selectedTags.includes(tag) ? 'border-b-purple-600 text-purple-600' : 'text-gray-600 hover:border-b-purple-600 hover:text-purple-600'}`}
>
{tag}
</button>
))}
<button onClick={resetFilters} className="inline-flex whitespace-nowrap border-b-2 border-transparent py-2 px-3 text-sm font-medium text-gray-600 transition-all duration-200 ease-in-out hover:border-b-purple-600 hover:text-purple-600">
Reset Filters
</button>
</nav>
</div>
</div>
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-white">
<h1 className="text-4xl font-bold">Discover the web's best Landing Pages</h1>
<p className="mt-4 text-xl">This Site features the best landing page designs on the web! Learn from the best and get inspiration from real landing page examples.</p>
</div>
</div>
<div className="flex justify-center my-4">
{['startup', 'bootstrap', 'vc'].map((tag) => (
<button
key={tag}
onClick={() => handleTagClick(tag)}
className={`px-4 py-2 m-1 border rounded ${selectedTags.includes(tag) ? 'bg-blue-500 text-white' : ''}`}
>
{tag}
</button>
))}
<button onClick={resetFilters} className="px-4 py-2 m-1 border rounded bg-red-500 text-white">
Reset Filters
</button>
</div>
<div className="items-start z-10 w-full flex-wrap gap-4 justify-center text-sm lg:flex">
{data.filter(item => selectedTags.length === 0 || selectedTags.every(tag => item.tags.includes(tag))).map((item, index) => (
<Card key={index} item={item} />
))}
</div>
</main>
<div className="items-start z-10 w-full flex-wrap gap-4 justify-center text-sm lg:flex">
{data.filter(item => selectedTags.length === 0 || selectedTags.every(tag => item.tags.includes(tag))).map((item, index) => (
<Card key={index} item={item} />
))}
</div>
</main>
</>
);
}
38 changes: 38 additions & 0 deletions next-site/src/components/banner.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { faLayerGroup, faClock } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faYoutube } from '@fortawesome/free-brands-svg-icons';
import { faStar } from '@fortawesome/free-solid-svg-icons';
import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';


export default function Banner() {
return (
<div className="hidden lg:block w-full bg-[#17133A] py-2">
<div className="max-w-7xl mx-auto flex items-center justify-center space-x-6 px-8">

<div className="flex items-center justify-start">
<FontAwesomeIcon icon={faLayerGroup} className="text-blue-300 px-2" />
<span className="text-xs text-gray-300">Over 100+ Landing Pages</span>
</div>

<div className="flex items-center justify-start">
<FontAwesomeIcon icon={faStar} className="text-yellow-500 px-2" />
<span className="text-xs text-gray-200">
<a href="https://github.com/maxontech/landing-page-design-examples" target="_blank" rel="noopener noreferrer">
Open Source on GitHub
</a>
</span>
</div>

<div className="flex items-center justify-start">
<FontAwesomeIcon icon={faPeopleGroup} className="text-pink-500 px-2" />
<span className="text-xs text-gray-300">
<a href="https://www.youtube.com/@maxontech" target="_blank" rel="noopener noreferrer">
Community of 10,000+ Developers
</a>
</span>
</div>
</div>
</div>
);
}
36 changes: 36 additions & 0 deletions next-site/src/components/card.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faLayerGroup, faClock } from '@fortawesome/free-solid-svg-icons'
import Image from 'next/image';

export default function Card({ item }) {
return (
<div className="flex flex-col justify-center mr-1 ml-1 mt-1 mb-3">
<div className="flex flex-col items-start">
<div className='overflow-hidden rounded-xl w-[350px] h-[400px] transition-transform duration-500 ease-in-out transform lg:hover:scale-105 shadow-md'>
<Image
src={`https://raw.githubusercontent.com/maxontech/landing-page-design-examples/master/docs/${item.screenshotPath}`}
alt={item.title}
width={500}
height={600}
/>
</div>
<span className="flex justify-between items-baseline mt-2 pl-1 pr-1 w-[350px]">
<h2 className=" font-semibold text-base">{item.companyName}</h2>
<div className="flex space-x-2 text-base font-normal" >
<p className="">
{item.stack !== "" && <FontAwesomeIcon className="mx-1" icon={faLayerGroup} />}
{item.stack}
</p>
<p className=""><FontAwesomeIcon className="mx-1" icon={faClock} />{item.timeToPageLoad}ms</p>
</div>
</span>
<span className="flex flex-wrap items-baseline pl-1 pr-1 w-[350px] overflow-auto whitespace-normal">
{item.tags.map((tag, index) => (
<p key={index} className="text-base pr-2 font-normal text-gray-600">{"#" + tag.charAt(0).toUpperCase() + tag.slice(1)}</p>
))}
</span>

</div>
</div>
);
}

0 comments on commit d06cd55

Please sign in to comment.