Skip to content

Commit 3f503d1

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Fix: Improve UI and styling
- Improve font weight and spacing in the navigation menu. - Fix the hero title display. - Adjust the price ticker section. - Remove the background from the explore spaces section.
1 parent ebf984a commit 3f503d1

File tree

7 files changed

+44
-43
lines changed

7 files changed

+44
-43
lines changed

‎src/components/ExploreSpacesSection.tsx‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
12
import React from 'react';
23
import { motion } from 'framer-motion';
34
import { GraduationCap, Clover, Network } from 'lucide-react';
45
import { Link } from 'react-router-dom';
56
import { Button } from './ui/button';
7+
68
const spaces = [{
79
id: 'academy',
810
title: 'Academy',
@@ -22,37 +24,34 @@ const spaces = [{
2224
icon: <Network className="h-10 w-10 text-alien-green" />,
2325
link: '/conetworking'
2426
}];
27+
2528
const ExploreSpacesSection = () => {
26-
return <section className="py-24 bg-alien-space-light/20 relative overflow-hidden">
29+
return (
30+
<section className="py-24 relative overflow-hidden">
2731
<div className="container mx-auto px-4">
28-
<motion.div initial={{
29-
opacity: 0
30-
}} whileInView={{
31-
opacity: 1
32-
}} transition={{
33-
duration: 0.8
34-
}} viewport={{
35-
once: true
36-
}} className="text-center mb-16">
32+
<motion.div
33+
initial={{ opacity: 0 }}
34+
whileInView={{ opacity: 1 }}
35+
transition={{ duration: 0.8 }}
36+
viewport={{ once: true }}
37+
className="text-center mb-16"
38+
>
3739
<h2 className="text-4xl font-bold mb-4 text-alien-gold text-glow font-[Atomic Age]">Explore Spaces</h2>
3840
<p className="text-xl text-gray-300 max-w-3xl mx-auto">
3941
Discover specialized environments designed to enhance your journey through the cosmos
4042
</p>
4143
</motion.div>
4244

4345
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
44-
{spaces.map((space, index) => <motion.div key={space.id} initial={{
45-
opacity: 0,
46-
y: 20
47-
}} whileInView={{
48-
opacity: 1,
49-
y: 0
50-
}} transition={{
51-
duration: 0.5,
52-
delay: index * 0.2
53-
}} viewport={{
54-
once: true
55-
}} className="card-border p-8 flex flex-col items-center text-center h-full">
46+
{spaces.map((space, index) => (
47+
<motion.div
48+
key={space.id}
49+
initial={{ opacity: 0, y: 20 }}
50+
whileInView={{ opacity: 1, y: 0 }}
51+
transition={{ duration: 0.5, delay: index * 0.2 }}
52+
viewport={{ once: true }}
53+
className="card-border p-8 flex flex-col items-center text-center h-full"
54+
>
5655
<div className="mb-6 p-4 bg-alien-space-dark rounded-full">
5756
{space.icon}
5857
</div>
@@ -63,13 +62,16 @@ const ExploreSpacesSection = () => {
6362
Enter {space.title}
6463
</Button>
6564
</Link>
66-
</motion.div>)}
65+
</motion.div>
66+
))}
6767
</div>
6868
</div>
6969

7070
{/* Background decorations */}
7171
<div className="absolute -bottom-20 -right-20 w-80 h-80 bg-alien-green opacity-5 rounded-full blur-3xl"></div>
7272
<div className="absolute -top-20 -left-20 w-60 h-60 bg-alien-gold opacity-5 rounded-full blur-2xl"></div>
73-
</section>;
73+
</section>
74+
);
7475
};
75-
export default ExploreSpacesSection;
76+
77+
export default ExploreSpacesSection;

‎src/components/Header/DesktopNav.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@ const DesktopNav = () => {
1414
return (
1515
<nav className="hidden md:flex items-center gap-6">
1616
<div className="hidden md:flex space-x-4">
17-
<Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
17+
<Link to="/" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic font-semibold">
1818
Home
1919
</Link>
20-
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
20+
<Link to="/about" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic font-semibold">
2121
About
2222
</Link>
23-
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
23+
<Link to="/alien-trip" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic font-semibold">
2424
AlienTrip
2525
</Link>
26-
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic">
26+
<Link to="/contact" className="text-alien-gold hover:text-alien-green px-2 py-2 font-atomic font-semibold">
2727
Contact
2828
</Link>
2929

@@ -32,7 +32,7 @@ const DesktopNav = () => {
3232
<DropdownMenuTrigger asChild>
3333
<Button
3434
variant="ghost"
35-
className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/30 px-2 py-2 rounded flex items-center group font-atomic"
35+
className="text-alien-gold hover:text-alien-green bg-transparent hover:bg-alien-space-light/30 px-2 py-2 rounded flex items-center group font-atomic font-semibold"
3636
>
3737
Explore Spaces
3838
<ChevronDown

‎src/components/Header/MobileNav.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import React, { useState } from 'react';
32
import { motion } from 'framer-motion';
43
import { Link } from 'react-router-dom';
@@ -27,28 +26,28 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
2726
<nav className="flex flex-col space-y-4">
2827
<Link
2928
to="/"
30-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
29+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic font-semibold"
3130
onClick={() => setIsMenuOpen(false)}
3231
>
3332
Home
3433
</Link>
3534
<Link
3635
to="/about"
37-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
36+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic font-semibold"
3837
onClick={() => setIsMenuOpen(false)}
3938
>
4039
About
4140
</Link>
4241
<Link
4342
to="/alien-trip"
44-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
43+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic font-semibold"
4544
onClick={() => setIsMenuOpen(false)}
4645
>
4746
AlienTrip
4847
</Link>
4948
<Link
5049
to="/contact"
51-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic"
50+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md font-atomic font-semibold"
5251
onClick={() => setIsMenuOpen(false)}
5352
>
5453
Contact
@@ -58,7 +57,7 @@ const MobileNav = ({ isMenuOpen, setIsMenuOpen }: MobileNavProps) => {
5857
<div className="flex flex-col">
5958
<button
6059
onClick={() => setSpacesExpanded(!spacesExpanded)}
61-
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md flex justify-between items-center font-atomic"
60+
className="text-alien-gold py-2 px-4 hover:text-alien-green hover:bg-alien-space-light rounded-md flex justify-between items-center font-atomic font-semibold"
6261
>
6362
<span>Explore Spaces</span>
6463
{spacesExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}

‎src/components/Header/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const Header = () => {
2222
return (
2323
<header
2424
className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
25-
isScrolled ? "py-2 bg-alien-space-dark shadow-md" : "py-3 bg-alien-space-dark/80 backdrop-blur-lg"
25+
isScrolled ? "py-2 bg-transparent shadow-md backdrop-blur-md" : "py-3 bg-transparent backdrop-blur-sm"
2626
}`}
2727
>
2828
<div className="container mx-auto px-4 flex justify-between items-center relative">
@@ -49,7 +49,7 @@ const Header = () => {
4949
<MobileNav isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />
5050
)}
5151
</AnimatePresence>
52-
<div className="w-full mt-2 border-t border-alien-gold/20 border-b border-alien-gold/20">
52+
<div className="w-full mt-1 border-t border-alien-gold/20 border-b border-alien-gold/20">
5353
<PriceTicker />
5454
</div>
5555
</header>

‎src/components/Hero.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ const Hero = () => {
4444
>
4545
<span className="text-alien-green">Δlieπ</span>
4646
<span className="text-alien-gold">FlΦw</span>
47-
<span className="text-alien-green">$pac€</span>
48-
<span className="text-alien-gold">DAO</span>
47+
<span className="text-alien-green"> $pac€</span>
48+
<span className="text-alien-gold"> DAO</span>
4949
</h1>
5050
<motion.p
5151
className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-8 font-[Exo] text-center"

‎src/components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const Layout: React.FC = () => {
88
return (
99
<div className="flex flex-col min-h-screen bg-alien-space">
1010
<Header />
11-
<main className="flex-1 relative z-10 pt-16">
11+
<main className="flex-1 relative z-10 pt-20">
1212
<div className="container mx-auto px-4">
1313
<Outlet />
1414
</div>

‎src/components/StatsSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const stats = [
3232

3333
const StatsSection = () => {
3434
return (
35-
<section className="py-16 bg-alien-space-light relative overflow-hidden">
35+
<section className="py-16 relative overflow-hidden">
3636
<div className="container mx-auto px-4">
3737
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
3838
{stats.map((stat, index) => (
@@ -62,7 +62,7 @@ const StatsSection = () => {
6262
</div>
6363
</div>
6464

65-
{/* Subtle animated background grid */}
65+
{/* Subtle background grid */}
6666
<div className="absolute inset-0 cosmic-grid opacity-30"></div>
6767
</section>
6868
);

0 commit comments

Comments
 (0)