Skip to content

Commit a3ffb55

Browse files
AlemTuzlakAlemTuzlak
committed
added metadata exercise and chapter
1 parent 15d58cc commit a3ffb55

File tree

123 files changed

+4149
-8306
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+4149
-8306
lines changed

‎exercises/01.routing/01.problem.routing/app/root.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,8 @@ import {
77
ScrollRestoration,
88
} from 'react-router'
99
import type { Route } from './+types/root'
10-
import './app.css'
1110
import { EpicShop } from './epicshop'
1211

13-
export const links: Route.LinksFunction = () => [
14-
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
15-
{
16-
rel: 'preconnect',
17-
href: 'https://fonts.gstatic.com',
18-
crossOrigin: 'anonymous',
19-
},
20-
{
21-
rel: 'stylesheet',
22-
href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
23-
},
24-
]
25-
2612
export function Layout({ children }: { children: React.ReactNode }) {
2713
return (
2814
<html lang="en">

‎exercises/01.routing/01.problem.routing/app/routes/_landing._index/route.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
1-
import { CategoriesSection } from './categories-section'
2-
import { FeaturedProductsSection } from './featured-products.section'
3-
import { FeaturesSection } from './features-section'
4-
import { HeroSection } from './hero-section'
5-
import { NewsletterSection } from './newsletter-section'
6-
71
export default function HomePage() {
82
return (
93
<div className="bg-stone-50 dark:bg-gray-900">
10-
<HeroSection />
11-
<FeaturesSection />
12-
<CategoriesSection />
13-
<FeaturedProductsSection />
14-
<NewsletterSection />
4+
Landing page!
155
</div>
166
)
177
}

‎exercises/01.routing/01.problem.routing/app/routes/_landing.about.tsx‎

Lines changed: 1 addition & 195 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,7 @@
1-
import { Award, Heart, Compass, Lightbulb } from 'lucide-react'
2-
31
export default function AboutPage() {
4-
const team = [
5-
{
6-
name: 'Marcus Rodriguez',
7-
role: 'Founder & CEO',
8-
image:
9-
'https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=400',
10-
bio: 'Passionate about bringing premium footwear to everyone with 15+ years in fashion retail.',
11-
},
12-
{
13-
name: 'Elena Chen',
14-
role: 'Head of Design',
15-
image:
16-
'https://images.pexels.com/photos/1181686/pexels-photo-1181686.jpeg?auto=compress&cs=tinysrgb&w=400',
17-
bio: 'Former Nike designer with expertise in creating comfortable and stylish footwear.',
18-
},
19-
{
20-
name: 'Sofia Laurent',
21-
role: 'Customer Experience Director',
22-
image:
23-
'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=400',
24-
bio: 'Dedicated to ensuring every customer finds their perfect pair of shoes.',
25-
},
26-
]
27-
28-
const values = [
29-
{
30-
icon: <Lightbulb className="h-8 w-8" />,
31-
title: 'Innovation',
32-
description:
33-
'We constantly seek new materials and technologies to improve comfort and style.',
34-
},
35-
{
36-
icon: <Heart className="h-8 w-8" />,
37-
title: 'Passion',
38-
description:
39-
'Every shoe is selected with genuine care for quality and customer satisfaction.',
40-
},
41-
{
42-
icon: <Award className="h-8 w-8" />,
43-
title: 'Quality',
44-
description:
45-
'We partner only with brands that meet our high standards for craftsmanship.',
46-
},
47-
{
48-
icon: <Compass className="h-8 w-8" />,
49-
title: 'Purpose',
50-
description:
51-
'Helping people step confidently into their daily adventures.',
52-
},
53-
]
54-
552
return (
563
<div className="bg-stone-50 dark:bg-gray-900">
57-
{/* Hero Section */}
58-
<div className="bg-gradient-to-br from-stone-50 via-amber-50/30 to-stone-100 py-32 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
59-
<div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
60-
<h1 className="mb-8 text-5xl font-extralight tracking-tight text-gray-900 sm:text-6xl dark:text-white">
61-
Our Story
62-
</h1>
63-
<p className="mx-auto max-w-4xl text-xl leading-relaxed font-light text-gray-600 dark:text-gray-300">
64-
Born from a passion for exceptional footwear and a vision to make
65-
premium shoes accessible to everyone who values quality, comfort,
66-
and style.
67-
</p>
68-
</div>
69-
</div>
70-
71-
{/* Story Section */}
72-
<div className="bg-white py-32 dark:bg-gray-900">
73-
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
74-
<div className="grid grid-cols-1 items-center gap-20 lg:grid-cols-2">
75-
<div>
76-
<h2 className="mb-8 text-4xl font-extralight tracking-tight text-gray-900 dark:text-white">
77-
Walking Together Since 2020
78-
</h2>
79-
<p className="mb-6 text-lg leading-relaxed font-light text-gray-600 dark:text-gray-300">
80-
EpicStore was founded on the belief that everyone deserves
81-
access to premium footwear that doesn't compromise on comfort,
82-
style, or quality. We started as a small team of shoe
83-
enthusiasts who were frustrated by the lack of truly exceptional
84-
options in the market.
85-
</p>
86-
<p className="mb-6 text-lg leading-relaxed font-light text-gray-600 dark:text-gray-300">
87-
What began as weekend trips to discover hidden gem shoe
88-
manufacturers has evolved into a curated marketplace that
89-
connects customers with the world's finest footwear brands, from
90-
established names to emerging designers.
91-
</p>
92-
<p className="text-lg leading-relaxed font-light text-gray-600 dark:text-gray-300">
93-
Today, we're proud to serve thousands of customers who trust us
94-
to help them find shoes that not only look great but feel
95-
amazing and last for years to come.
96-
</p>
97-
</div>
98-
<div className="group relative">
99-
<img
100-
src="https://images.pexels.com/photos/1598508/pexels-photo-1598508.jpeg?auto=compress&cs=tinysrgb&w=800"
101-
alt="Shoe craftsmanship"
102-
className="group-hover:shadow-3xl shadow-2xl transition-all duration-500 group-hover:scale-105"
103-
/>
104-
<div className="absolute inset-0 bg-gradient-to-t from-amber-600/20 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
105-
</div>
106-
</div>
107-
</div>
108-
</div>
109-
110-
{/* Values Section */}
111-
<div className="bg-stone-50 py-32 dark:bg-gray-800">
112-
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
113-
<div className="mb-20 text-center">
114-
<h2 className="mb-6 text-4xl font-extralight tracking-tight text-gray-900 dark:text-white">
115-
Our Values
116-
</h2>
117-
<p className="mx-auto max-w-3xl text-xl leading-relaxed font-light text-gray-600 dark:text-gray-300">
118-
These principles guide every decision we make and every
119-
relationship we build.
120-
</p>
121-
</div>
122-
123-
<div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4">
124-
{values.map((value, index) => (
125-
<div
126-
key={index}
127-
className="group bg-white p-10 text-center transition-all duration-300 hover:scale-105 hover:transform hover:shadow-lg dark:bg-gray-900"
128-
>
129-
<div className="mb-6 flex justify-center text-amber-600 transition-transform duration-300 group-hover:scale-110 dark:text-amber-500">
130-
{value.icon}
131-
</div>
132-
<h3 className="mb-4 text-xl font-light tracking-wide text-gray-900 dark:text-white">
133-
{value.title}
134-
</h3>
135-
<p className="leading-relaxed font-light text-gray-600 dark:text-gray-300">
136-
{value.description}
137-
</p>
138-
</div>
139-
))}
140-
</div>
141-
</div>
142-
</div>
143-
144-
{/* Team Section */}
145-
<div className="bg-white py-32 dark:bg-gray-900">
146-
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
147-
<div className="mb-20 text-center">
148-
<h2 className="mb-6 text-4xl font-extralight tracking-tight text-gray-900 dark:text-white">
149-
Meet Our Team
150-
</h2>
151-
<p className="mx-auto max-w-3xl text-xl leading-relaxed font-light text-gray-600 dark:text-gray-300">
152-
The passionate individuals who make EpicStore a destination for
153-
shoe lovers everywhere.
154-
</p>
155-
</div>
156-
157-
<div className="grid grid-cols-1 gap-12 md:grid-cols-3">
158-
{team.map((member, index) => (
159-
<div
160-
key={index}
161-
className="group text-center transition-all duration-300 hover:scale-105 hover:transform"
162-
>
163-
<div className="relative mb-8 overflow-hidden">
164-
<img
165-
src={member.image}
166-
alt={member.name}
167-
className="h-80 w-full object-cover transition-transform duration-500 group-hover:scale-110"
168-
/>
169-
<div className="absolute inset-0 bg-gradient-to-t from-amber-600/30 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
170-
</div>
171-
<h3 className="mb-2 text-2xl font-light tracking-wide text-gray-900 dark:text-white">
172-
{member.name}
173-
</h3>
174-
<p className="mb-4 font-light tracking-wide text-amber-600 dark:text-amber-500">
175-
{member.role}
176-
</p>
177-
<p className="leading-relaxed font-light text-gray-600 dark:text-gray-300">
178-
{member.bio}
179-
</p>
180-
</div>
181-
))}
182-
</div>
183-
</div>
184-
</div>
185-
186-
{/* Mission Section */}
187-
<div className="bg-gradient-to-r from-gray-900 to-gray-800 py-24 dark:from-gray-800 dark:to-gray-900">
188-
<div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
189-
<h2 className="mb-8 text-4xl font-extralight tracking-tight text-white">
190-
Our Mission
191-
</h2>
192-
<p className="mx-auto max-w-4xl text-xl leading-relaxed font-light text-gray-300">
193-
To provide exceptional footwear that empowers people to step
194-
confidently into their daily adventures, combining unmatched comfort
195-
with timeless style and sustainable practices.
196-
</p>
197-
</div>
198-
</div>
4+
About page!
1995
</div>
2006
)
2017
}

0 commit comments

Comments
 (0)