Skip to content

Commit

Permalink
asd
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamgiebl
adamgiebl committed Sep 28, 2024
1 parent b2672b1 commit cb7ba3d
Show file tree
Hide file tree
Showing 10 changed files with 72 additions and 71 deletions.
Binary file modified public/android-chrome-192x192.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 modified public/android-chrome-512x512.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 modified public/apple-touch-icon.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 public/favicon-16x16.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 public/favicon-32x32.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 modified public/favicon.ico
View file
Binary file not shown.
66 changes: 6 additions & 60 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,74 +45,20 @@
/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Neumorphism CSS shadow generator</title>
<script
defer
data-domain="neumorphism.io"
src="https://plausible.io/js/script.outbound-links.js"
></script>
</head>

<body>
<div class="mb-16 title">
<h1 class="main-heading">Neumorphism.io</h1>
<h2 class="text-base opacity-60">Experiment and generate CSS code</h2>
<h2 class="text-base opacity-60">Generate CSS code for your project</h2>
</div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- <div>
<script
async
type="text/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CEAIKK3Y&placement=neumorphismio"
id="_carbonads_js"
></script>
</div> -->
<footer>
<!-- <div class="social">
<a
href="https://uiverse.io"
target="_blank"
rel="noopener"
class="link uiverse"
onclick="getOutboundLink('https://uiverse.io'); return true;"
>
Check out <b>uiverse.io</b> for more cool CSS!
</a>
</div> -->
<!-- <div class="tags">
<a
target="_blank"
onclick="getOutboundLink('https://uiverse.io/buttons'); return true;"
href="https://uiverse.io/buttons"
>CSS buttons</a
>
<a
target="_blank"
onclick="getOutboundLink('https://uiverse.io/checkboxes'); return true;"
href="https://uiverse.io/checkboxes"
>CSS checkboxes</a
>
<a
target="_blank"
onclick="getOutboundLink('https://uiverse.io/switches'); return true;"
href="https://uiverse.io/switches"
>CSS toggle switches</a
>
<a
target="_blank"
onclick="getOutboundLink('https://uiverse.io/cards'); return true;"
href="https://uiverse.io/cards"
>CSS cards</a
>
<a
target="_blank"
onclick="getOutboundLink('https://uiverse.io/loaders'); return true;"
href="https://uiverse.io/loaders"
>CSS loaders</a
>
<a
target="_blank"
onclick="getOutboundLink('https://uiverse.io/inputs'); return true;"
href="https://uiverse.io/inputs"
>CSS inputs</a
>
</div> -->
</footer>
<div class="links"></div>
</body>
</html>
59 changes: 57 additions & 2 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,24 +48,79 @@ const App = () => {
<div className="container max-w-screen-lg px-6 mx-auto mt-24">
<section className="mb-24 text-left">
<h2 className="mb-4 text-3xl font-bold">What is Neumorphism?</h2>
<p className="text-lg leading-relaxed">
<p className="text-lg leading-relaxed opacity-80">
Neumorphism, also known as soft UI, is a visual design trend that combines elements of
skeuomorphism and flat design. It creates a soft, extruded plastic look by using
subtle contrasting shadows to create the illusion of depth. This style mimics physical
objects while maintaining a minimal and modern aesthetic, often featuring
monochromatic color schemes with low contrast shadows and highlights.
</p>
</section>
<section className="mb-24 text-left">
<h2 className="relative z-10 mb-2 text-4xl font-bold">More Tools</h2>
<p className="pl-0.5 mb-8 text-lg leading-relaxed opacity-80">
Free frontend resources to help you build your next project.
</p>
<div className="grid grid-cols-1 gap-10 md:grid-cols-2">
<ProjectCard
title="Uiverse.io"
description="The largest library of Open-Source UI elements. Explore a vast collection of beautiful UI elements, including buttons, checkboxes, cards, and more."
link="https://uiverse.io"
image="https://imagedelivery.net/KMb5EadhEKC1gAE0LkjL1g/c802e23e-4d13-44ef-a2fe-46c467571900/public"
/>
<ProjectCard
title="Cssbuttons.io"
description="Collection of 100+ beautiful, customizable buttons for your next project. Get the code you need to enhance your web projects with stylish, functional buttons."
link="https://cssbuttons.io"
image="https://imagedelivery.net/KMb5EadhEKC1gAE0LkjL1g/cb814b9d-45f8-46f5-3108-91e511990200/public"
/>
</div>
</section>
</div>
<Footer />
</div>
</>
)
}

export const ProjectCard = ({ title, description, image, link }) => {
return (
<div className="flex flex-col p-6 soft-shadow rounded-3xl">
<div className="">
<img src={image} alt={title} className="object-cover rounded-xl" />
</div>
<div className="flex flex-col items-start flex-1 mt-6 text-left">
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="block mb-2 text-2xl font-bold hover:underline"
>
{title}
</a>
<p className="flex-1 text-base leading-relaxed opacity-80">{description}</p>
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 mt-6 px-6 py-3 bg-[color:var(--textColor)] text-[color:var(--baseColor)] font-semibold rounded-md hover:opacity-90 transition-opacity"
>
Visit {title.replace('.io', '')}{' '}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className="w-4 h-4">
<path
fill="currentColor"
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
/>
</svg>
</a>
</div>
</div>
)
}

const GitHubStarButton = ({ githubStars }) => {
return (
<button className="fixed items-center justify-center hidden h-10 px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out bg-gray-900 rounded-md md:inline-flex top-6 right-6 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group hover:bg-gray-950 hover:ring-2 hover:ring-offset-2 hover:ring-gray-900">
<button className="fixed z-50 items-center justify-center hidden h-10 px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out bg-gray-900 rounded-md md:inline-flex top-6 right-6 whitespace-nowrap ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group hover:bg-gray-950 hover:ring-2 hover:ring-offset-2 hover:ring-gray-900">
<svg
className="w-5 h-6 mr-2 text-white"
strokeLinejoin="round"
Expand Down
16 changes: 8 additions & 8 deletions src/components/Footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,15 @@ const navigation = {

export default function Footer() {
return (
<footer aria-labelledby="footer-heading" className="bg-[#e0e0e0]">
<footer aria-labelledby="footer-heading" className="text-[var(--textColor)]">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-full px-6 pt-16 pb-8 mx-auto sm:pt-24 lg:px-8 lg:pt-32">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="space-y-8">
<img src="/apple-touch-icon.png" alt="icon" className="w-10 h-10" />
<p className="text-sm leading-6 text-gray-500">
<p className="text-sm leading-6 opacity-70">
Neumorphism.io - Generate neumorphic designs
</p>
<div className="flex space-x-6">
Expand All @@ -70,7 +70,7 @@ export default function Footer() {
key={item.name}
href={item.href}
target="_blank"
className="text-gray-400 hover:text-gray-500"
className="opacity-60 hover:opacity-70"
rel="noreferrer"
>
<span className="sr-only">{item.name}</span>
Expand All @@ -85,14 +85,14 @@ export default function Footer() {
</div>
<div className="grid grid-cols-2 gap-8">
<div>
<h3 className="text-sm font-semibold leading-6 text-slate-950">Resources</h3>
<h3 className="text-sm font-semibold leading-6 opacity-90">Resources</h3>
<ul className="mt-6 space-y-4">
{navigation.resources.map(item => (
<li key={item.name}>
<a
href={item.href}
target="_blank"
className="text-sm leading-6 text-gray-500 hover:text-slate-950"
className="text-sm leading-6 opacity-70 hover:opacity-80"
rel="noreferrer"
>
{item.name}
Expand All @@ -102,14 +102,14 @@ export default function Footer() {
</ul>
</div>
<div className="md:mt-0">
<h3 className="text-sm font-semibold leading-6 text-slate-950">Other Elements</h3>
<h3 className="text-sm font-semibold leading-6 opacity-90">Other Elements</h3>
<ul className="mt-6 space-y-4">
{navigation.elements.map(item => (
<li key={item.name}>
<a
href={item.href}
target="_blank"
className="text-sm leading-6 text-gray-500 hover:text-slate-950"
className="text-sm leading-6 opacity-70 hover:opacity-80"
rel="noreferrer"
>
{item.name}
Expand All @@ -122,7 +122,7 @@ export default function Footer() {
</div>
</div>
<div className="pt-8 mt-16 border-t border-gray-900/10 sm:mt-20 lg:mt-24">
<p className="text-xs leading-5 text-gray-500">
<p className="text-xs leading-5 opacity-70">
&copy; {new Date().getFullYear()} Adam Giebl, All rights reserved.
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/UiverseElements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const UiverseElements = () => {

const fetchUiverseElements = useCallback(async () => {
try {
const response = await fetch('http://localhost:3000/resource/neumorphism-elements')
const response = await fetch('https://uiverse.io/resource/neumorphism-elements')
if (!response.ok) {
setElements([])
return
Expand Down

0 comments on commit cb7ba3d

Please sign in to comment.