Skip to content

Commit

Permalink
Delete laurels.png and update tailwind.config.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxontech
maxontech committed Mar 17, 2024
1 parent d06cd55 commit 4ae5c1c
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 75 deletions.
Binary file added next-site/public/landing-hero.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added next-site/public/laurels-color.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed next-site/public/laurels.png
View file
Binary file not shown.
100 changes: 25 additions & 75 deletions next-site/src/app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ import { useEffect, useState } from 'react';
import { faReact } from '@fortawesome/free-brands-svg-icons'
import { faClock } from '@fortawesome/free-regular-svg-icons'
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
import Card from '../components/card';
import Card from '@/components/card';
import Banner from '@/components/banner';
import Navbar from '@/components/navbar';
import Hero from '@/components/hero';

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

return (
<>
<>
<Banner />

<header>
<Navbar />


<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>
<Hero />


<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}
<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-xs sm: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-xs sm: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>
))}
<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>
</nav>
</div>
</div>
</div>
</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} />
Expand Down
37 changes: 37 additions & 0 deletions next-site/src/components/hero.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import Image from 'next/image'

export default function Hero() {
return(
<>
<div className="h-[400px] sm:h-[600px] 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="w-full sm:w-auto absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-white mt-7 ">
<div className="flex justify-center mb-2 sm:hidden">
<Image
src="/laurels-color.png"
width={150}
height={200}
/>
</div>
<div className="justify-center mb-8 hidden sm:flex">
<Image
src="/laurels-color.png"
width={220}
height={200}
/>
</div>
<h1 className="text-2xl sm:text-4xl font-bold pb-3">Discover the Best Landing Pages</h1>
<p className="mt-4 text-sm sm:text-xl font-medium "> Your One-Stop for High Conversion Landing Designs & Inspiration! Hand-picked to ensure Highest Quality.</p>
</div>
</div>

</>
)
}
40 changes: 40 additions & 0 deletions next-site/src/components/navbar.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import Image from 'next/image';


export default function Navbar() {

return (
<header>
<nav 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="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-3">
<div className="flex items-center space-x-3 rtl:space-x-reverse">

<Image
src="/landing-hero.png"
alt="Panda"
className=" rounded-full"
width={50}
height={50}
/>

<span className="self-center sm:block hidden text-xl font-semibold whitespace-nowrap dark:text-white">
LandingHero

</span>

</div>
<div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button type="button" className="text-white bg-github hover:bg-blue-500 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">
<FontAwesomeIcon icon={faGithub} className='pr-2' />
View on GitHub
</button>
</div>
<div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-sticky">
</div>
</div>
</nav>
</header>
);
}
3 changes: 3 additions & 0 deletions next-site/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ module.exports = {
],
theme: {
extend: {
colors: {
github: '#2b3137',
},
backgroundImage: {
'gradient-custom': 'linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%)',
"gradient-conic":
Expand Down

0 comments on commit 4ae5c1c

Please sign in to comment.