Design website inspired by Apple
Implement a minimalist, intuitive website design reflecting the philosophies of Steve Jobs, Jony Ive, and Dieter Rams. Focus on simplicity, clarity, and user experience while applying a refined color palette. Ensure high-quality aesthetics, function over form, and attention to detail. Incorporate responsive design elements, glassmorphism, and ensure proper padding and margin throughout components for a polished look.
This commit is contained in:
Hanzo Dev
@@ -0,0 +1,46 @@
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { LineChart, DollarSign, Shield } from "lucide-react";
|
||||
|
||||
const Features = () => {
|
||||
const features = [
|
||||
{
|
||||
icon: <LineChart className="w-6 h-6" />,
|
||||
title: "Track Progress",
|
||||
description: "Monitor your financial growth with intuitive charts and analytics"
|
||||
},
|
||||
{
|
||||
icon: <DollarSign className="w-6 h-6" />,
|
||||
title: "Secure Transactions",
|
||||
description: "Every transaction is encrypted and protected"
|
||||
},
|
||||
{
|
||||
icon: <Shield className="w-6 h-6" />,
|
||||
title: "Bank-Grade Security",
|
||||
description: "Your data is protected with military-grade encryption"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="py-20 px-4">
|
||||
<h2 className="text-4xl font-bold text-center mb-4">
|
||||
Meet our most popular features to establish smooth transaction
|
||||
</h2>
|
||||
<p className="text-xl text-secondary-foreground text-center mb-12">
|
||||
Monie is a secrate and trusted platform to save your money
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{features.map((feature, index) => (
|
||||
<Card key={index} className="p-6 hover-lift">
|
||||
<div className="w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center mb-4">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
|
||||
<p className="text-secondary-foreground">{feature.description}</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Features;
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center px-4 pt-20">
|
||||
<h1 className="text-6xl font-bold text-center max-w-4xl leading-tight mb-6">
|
||||
Manage your secrete finance system with safety
|
||||
</h1>
|
||||
<p className="text-xl text-secondary-foreground text-center max-w-2xl mb-12">
|
||||
Monie is a secrate and trusted platform to save your money. We make clear
|
||||
transaction and keep your finance safe.
|
||||
</p>
|
||||
<div className="flex flex-col items-center gap-8">
|
||||
<Button className="px-8 py-6 text-lg">
|
||||
Get Started
|
||||
</Button>
|
||||
<div className="flex items-center -space-x-3">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<Avatar key={i} className="border-2 border-white">
|
||||
<AvatarImage src={`https://i.pravatar.cc/150?img=${i}`} />
|
||||
<AvatarFallback>U{i}</AvatarFallback>
|
||||
</Avatar>
|
||||
))}
|
||||
<div className="w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white">
|
||||
<Plus className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { LogIn } from "lucide-react";
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 px-6 py-4">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div className="text-2xl font-bold">BLUEPEAK</div>
|
||||
<div className="flex items-center space-x-8">
|
||||
<a href="#" className="hover:text-accent">Home</a>
|
||||
<a href="#" className="hover:text-accent">Product</a>
|
||||
<a href="#" className="hover:text-accent">Feature</a>
|
||||
<a href="#" className="hover:text-accent">Pricing</a>
|
||||
<Button variant="outline" className="flex items-center gap-2">
|
||||
<LogIn className="w-4 h-4" />
|
||||
Log In
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
+12
-61
@@ -1,68 +1,12 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--foreground: 20 14.3% 4.1%;
|
||||
--radius: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,8 +14,15 @@
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
@apply bg-white bg-opacity-10 backdrop-blur-lg border border-white border-opacity-20;
|
||||
}
|
||||
|
||||
.hover-lift {
|
||||
@apply transition-transform duration-300 hover:-translate-y-1;
|
||||
}
|
||||
+8
-7
@@ -1,14 +1,15 @@
|
||||
// Update this page (the content is just a fallback if you fail to update the page)
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Hero from "@/components/Hero";
|
||||
import Features from "@/components/Features";
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
||||
<p className="text-xl text-gray-600">Start building your amazing project here!</p>
|
||||
</div>
|
||||
<div className="min-h-screen">
|
||||
<Navbar />
|
||||
<Hero />
|
||||
<Features />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
export default Index;
|
||||
+17
-20
@@ -25,32 +25,24 @@ export default {
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
DEFAULT: "#141413",
|
||||
foreground: "#FAFAF8",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
DEFAULT: "#828179",
|
||||
foreground: "#FAFAF8",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
DEFAULT: "#8989DE",
|
||||
foreground: "#FAFAF8",
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover))",
|
||||
foreground: "hsl(var(--popover-foreground))",
|
||||
muted: {
|
||||
DEFAULT: "#E6E4DD",
|
||||
foreground: "#605F5B",
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card))",
|
||||
foreground: "hsl(var(--card-foreground))",
|
||||
DEFAULT: "#FFFFFF",
|
||||
foreground: "#141413",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
@@ -67,12 +59,17 @@ export default {
|
||||
from: { height: "var(--radix-accordion-content-height)" },
|
||||
to: { height: "0" },
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
"float": "float 6s ease-in-out infinite",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
} satisfies Config;
|
||||
} satisfies Config;
|
||||
Reference in New Issue
Block a user