Skip to content

Commit eb36438

Browse files
vadim-vozmitsel-cascaidevadim-vozmitsel-cascaide
committed
7-15-25: minor fixes across landing page. corrected sizing and padding settings and modified look of a number of components.
1 parent 071c3bd commit eb36438

File tree

7 files changed

+47
-51
lines changed

7 files changed

+47
-51
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@
2222

2323
### 🏠 Landing Page
2424

25-
![Landing Page](docs/images/landing-page.png)
25+
![Landing Page](public/assets/images/landing-page.png)
2626
*Beautiful, responsive landing page with dark/light mode support*
2727

2828
### 📱 Mobile Experience
2929

30-
![Mobile View](docs/images/mobile-view.png)
30+
![Mobile View](public/assets/images/mobile-view.png)
3131
*Fully responsive design optimized for all devices*
3232

3333
### 🎨 Component Showcase
3434

35-
![Components](docs/images/components-showcase.png)
35+
![Components](public/assets/images/components-showcase.png)
3636
*Rich component library with smooth animations*
3737

3838
</div>

‎src/components/HeroEmailCapture.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export function HeroEmailCapture() {
134134
</motion.p>
135135
)}
136136

137-
<p className="text-center text-xs text-gray-500 dark:text-gray-400 mb-10">
137+
<p className="text-center text-xs text-gray-500 dark:text-gray-400">
138138
Get instant access to 5 exclusive automation templates + course preview
139139
</p>
140140
</form>

‎src/components/HeroOptimized.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -148,14 +148,16 @@ Get Started Now
148148
</div>
149149
</ContainerScroll>
150150

151-
{/* Email capture below video frame */}
151+
{/* Email capture overlapping video frame */}
152152
<motion.div
153153
initial={{ opacity: 0, y: 20 }}
154154
animate={{ opacity: 1, y: 0 }}
155155
transition={{ duration: 0.5, delay: 0.5 }}
156-
className="relative z-10 mt-2 flex justify-center px-4 pb-4"
156+
className="relative z-20 -mt-14 flex justify-center px-4 pb-12"
157157
>
158-
<HeroEmailCapture />
158+
<div className="bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border border-gray-200/50 dark:border-gray-700/50 rounded-2xl shadow-lg shadow-black/5 dark:shadow-black/20 p-6 max-w-2xl w-full">
159+
<HeroEmailCapture />
160+
</div>
159161
</motion.div>
160162

161163
</section>

‎src/components/Navigation.tsx‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export function Navigation() {
5555
<div className="w-full px-6">
5656
<div className="flex h-16 items-center sm:h-20">
5757
{/* Left Side: Logo, Theme Toggle, and GitHub Button */}
58-
<div className="flex items-center gap-6">
58+
<div className="flex items-center gap-2 sm:gap-4">
5959
<motion.div
6060
initial={{ opacity: 0, x: -20 }}
6161
animate={{ opacity: 1, x: 0 }}
@@ -64,10 +64,10 @@ export function Navigation() {
6464
<Link href="/" aria-label="Your Company homepage">
6565
{/* Logo Text */}
6666
<div className="flex items-center">
67-
<div className="h-10 w-10 rounded-lg bg-gradient-to-r from-brand-primary to-brand-accent flex items-center justify-center mr-3">
68-
<span className="text-white font-bold text-lg">T</span>
67+
<div className="h-8 w-8 sm:h-10 sm:w-10 rounded-lg bg-gradient-to-r from-brand-primary to-brand-accent flex items-center justify-center mr-2 sm:mr-3">
68+
<span className="text-white font-bold text-sm sm:text-lg">T</span>
6969
</div>
70-
<span className="hidden sm:block text-xl font-bold text-gray-900 dark:text-gray-100">
70+
<span className="hidden md:block text-lg xl:text-xl font-bold text-gray-900 dark:text-gray-100">
7171
Your Brand
7272
</span>
7373
</div>
@@ -78,7 +78,7 @@ export function Navigation() {
7878
<button
7979
type="button"
8080
onClick={toggleTheme}
81-
className="inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-300 bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
81+
className="inline-flex items-center justify-center rounded-md px-2 sm:px-3 py-2 text-sm font-medium transition-all duration-300 bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white border border-gray-200/50 dark:border-gray-700/50 shadow-sm"
8282
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
8383
>
8484
{theme === 'dark' ? (
@@ -88,32 +88,34 @@ export function Navigation() {
8888
)}
8989
</button>
9090

91-
{/* GitHub Button */}
92-
<GitHubButton />
91+
{/* GitHub Button - hide on smallest screens */}
92+
<div className="hidden sm:block">
93+
<GitHubButton />
94+
</div>
9395
</div>
9496

9597
{/* Spacer */}
9698
<div className="flex-1"></div>
9799

98100
{/* Right Side: Navigation Links and Actions */}
99-
<div className="flex items-center gap-6">
101+
<div className="flex items-center gap-2 sm:gap-4">
100102
{/* Navigation Links */}
101-
<nav className="hidden lg:flex items-center gap-6" role="navigation">
103+
<nav className="hidden lg:flex items-center gap-4" role="navigation">
102104
{navItems.map((item) => (
103105
<motion.a
104106
key={item.label}
105107
href={item.href}
106108
initial={{ opacity: 0, y: -10 }}
107109
animate={{ opacity: 1, y: 0 }}
108-
className="text-gray-900 transition-colors hover:text-brand-accent dark:text-gray-100 font-medium text-sm"
110+
className="text-gray-900 transition-colors hover:text-brand-accent dark:text-gray-100 font-medium text-sm whitespace-nowrap"
109111
>
110112
{item.label}
111113
</motion.a>
112114
))}
113115
</nav>
114116

115117
{/* External Link Buttons - hide on smaller screens */}
116-
<div className="hidden xl:flex items-center gap-3">
118+
<div className="hidden xl:flex items-center gap-2">
117119
{externalLinks.map((link) => (
118120
<motion.a
119121
key={link.label}
@@ -123,34 +125,37 @@ export function Navigation() {
123125
initial={{ opacity: 0, y: -10 }}
124126
animate={{ opacity: 1, y: 0 }}
125127
className={cn(
126-
"inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-300 w-24",
128+
"inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-all duration-300 min-w-[4rem] whitespace-nowrap",
127129
"bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md",
128-
"dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
130+
"dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white",
131+
"border border-gray-200/50 dark:border-gray-700/50 shadow-sm"
129132
)}
130133
>
131134
{link.label}
132135
</motion.a>
133136
))}
134137
</div>
135138

136-
{/* Get Started Button - always visible */}
139+
{/* Get Started Button - responsive sizing */}
137140
<a
138141
href="#pricing"
139142
className={cn(
140-
"inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all duration-300",
143+
"inline-flex items-center justify-center rounded-md px-3 sm:px-4 py-2 text-sm font-medium transition-all duration-300 whitespace-nowrap",
141144
"bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white hover:shadow-md",
142-
"dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
145+
"dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white",
146+
"border border-gray-200/50 dark:border-gray-700/50 shadow-sm"
143147
)}
144148
>
145-
Get Started
149+
<span className="hidden sm:inline">Get Started</span>
150+
<span className="sm:hidden">Start</span>
146151
</a>
147152
</div>
148153

149154
{/* Mobile Menu Button */}
150155
<button
151156
type="button"
152157
onClick={() => setIsOpen(!isOpen)}
153-
className="inline-flex items-center justify-center rounded-md p-2 md:hidden transition-all duration-300 bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white"
158+
className="inline-flex items-center justify-center rounded-md p-2 lg:hidden transition-all duration-300 bg-gray-100 text-gray-700 hover:bg-brand-primary hover:text-white dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-brand-primary dark:hover:text-white border border-gray-200/50 dark:border-gray-700/50 shadow-sm ml-2"
154159
aria-label={isOpen ? 'Close navigation menu' : 'Open navigation menu'}
155160
aria-expanded={isOpen}
156161
aria-controls="mobile-menu"
@@ -175,8 +180,8 @@ export function Navigation() {
175180
aria-label="Mobile navigation menu"
176181
>
177182
<div className="space-y-4 px-4 py-6">
178-
{/* GitHub Button in Mobile */}
179-
<div className="pb-2 border-b border-gray-200 dark:border-gray-700">
183+
{/* GitHub Button in Mobile - show only on small screens */}
184+
<div className="pb-2 border-b border-gray-200 dark:border-gray-700 sm:hidden">
180185
<GitHubButton />
181186
</div>
182187

‎src/components/Pricing.tsx‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -116,21 +116,11 @@ export function Pricing() {
116116
aria-describedby={`plan-description-${key} plan-price-${key} plan-features-${key}`}
117117
>
118118
<TesseractLiquidGlass
119-
variant={plan.popular ? 'interactive' : 'card'}
119+
variant="card"
120120
enableShimmer={false}
121121
enableScrollEffects={false}
122-
className={cn(
123-
'relative p-8 transition-all duration-300 flex flex-col w-full',
124-
plan.popular && 'shadow-brand-glow ring-2 ring-brand-accent'
125-
)}
122+
className="relative p-8 transition-all duration-300 flex flex-col w-full"
126123
>
127-
{plan.popular && (
128-
<div className="absolute -top-4 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2">
129-
<div className="rounded-full bg-brand-accent px-4 py-2 text-sm font-medium text-white shadow-lg" role="banner" aria-label="Most popular pricing plan">
130-
<span className="text-white">Most Popular</span>
131-
</div>
132-
</div>
133-
)}
134124

135125
<div className="mb-8">
136126
<h3 id={`plan-title-${key}`} className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">{plan.name}</h3>
@@ -162,10 +152,7 @@ export function Pricing() {
162152

163153
<button
164154
type="button"
165-
className={cn(
166-
'w-full rounded-brand py-4 font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900',
167-
plan.popular ? 'btn-primary' : 'btn-secondary'
168-
)}
155+
className="w-full rounded-brand py-4 font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-brand-accent focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 btn-primary"
169156
onClick={() => {
170157
if (key === 'starter') {
171158
// Handle free plan signup

‎src/components/ScrollEmailModal.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { useState, useEffect } from 'react';
44
import { motion, AnimatePresence } from 'framer-motion';
55
import { X, Mail, Gift, Sparkles } from 'lucide-react';
66
import { cn } from '@/lib/utils';
7-
import { StarBorder } from './ui/star-border';
87

98
interface ScrollEmailModalProps {
109
onEmailSubmit?: (email: string) => Promise<void>;
@@ -155,16 +154,19 @@ export function ScrollEmailModal({ onEmailSubmit }: ScrollEmailModalProps) {
155154
/>
156155
</div>
157156

158-
<StarBorder
159-
as="button"
157+
<button
160158
type="submit"
161159
disabled={isSubmitting}
162-
color="rgb(224, 57, 47)"
163-
speed="6s"
164-
className="w-full py-3 px-6 text-white font-semibold disabled:opacity-50"
160+
className={cn(
161+
"w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300",
162+
"bg-brand-primary text-white",
163+
"hover:bg-brand-secondary hover:shadow-lg hover:shadow-brand-accent/25 hover:-translate-y-0.5",
164+
"active:scale-95",
165+
"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-brand-primary disabled:hover:transform-none"
166+
)}
165167
>
166168
{isSubmitting ? 'Getting Your Resources...' : 'Get Free Resources'}
167-
</StarBorder>
169+
</button>
168170
</form>
169171

170172
{/* Trust Badge */}

‎src/components/VideoPreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const VideoPreview = React.memo(function VideoPreview() {
3838
);
3939

4040
return (
41-
<section className="-mt-40 pt-12 pb-20 bg-white dark:bg-[#060606]">
41+
<section className="pt-12 pb-20 bg-white dark:bg-[#060606]">
4242
<ContainerScroll titleComponent={titleComponent}>
4343
<div className="h-full w-full rounded-lg overflow-hidden">
4444
{!isPlaying ? (

0 commit comments

Comments
 (0)