scroll removed

src/app/globals.css

@@ -177,7 +177,7 @@ h4 {
 
 @media (min-width: 768px) {
   .main-container {
-    padding: 80px 48px;
+    padding: 40px 48px;
   }
 }
 
@@ -191,14 +191,14 @@ h4 {
 
 .hero-section {
   text-align: center;
-  margin-bottom: 80px;
+  margin-bottom: 30px;
 }
 
 .locations-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 48px;
-  margin-top: 60px;
+  margin-top: 10px;
 }
 
 @media (min-width: 860px) {
@@ -209,7 +209,7 @@ h4 {
 
 .card-image-container {
   position: relative;
-  height: 440px;
+  height: 320px;
   overflow: hidden;
 }
 
@@ -274,9 +274,9 @@ h4 {
 }
 
 .footer-copyright {
-  margin-top: 120px;
+  margin-top: 40px;
   text-align: center;
-  padding: 60px 0;
+  padding: 40px 0 0;
   border-top: 1px solid rgba(210, 136, 57, 0.1);
   color: rgba(255, 255, 255, 0.4);
   font-size: 0.85rem;

src/app/page.tsx

@@ -106,11 +106,11 @@ export default function Home() {
             <div style={{ height: '1px', width: '60px', background: 'linear-gradient(to left, transparent, var(--color-gold))' }} />
           </motion.div>
 
-          <motion.div
+          {/* <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.4 }}
-            style={{ marginBottom: '32px', display: 'flex', justifyContent: 'center' }}
+            style={{ display: 'flex', justifyContent: 'center' }}
           >
             <Image
               src="/images/logo.png"
@@ -120,16 +120,16 @@ export default function Home() {
               style={{ objectFit: 'contain', filter: 'drop-shadow(0 0 20px rgba(210, 136, 57, 0.3))' }}
               priority
             />
-          </motion.div>
+          </motion.div> */}
 
           <motion.h1
             variants={container}
             initial="hidden"
             animate="visible"
             style={{
-              fontSize: 'clamp(3.5rem, 15vw, 10rem)',
+              fontSize: 'clamp(3.5rem, 15vw, 4rem)',
               lineHeight: 1.2,
-              marginBottom: '32px',
+              // marginBottom: '32px',
               display: 'flex',
               justifyContent: 'center',
               gap: '0.02em',
@@ -149,7 +149,7 @@ export default function Home() {
             style={{
               color: 'var(--color-paragraph)',
               fontSize: 'clamp(1rem, 2.5vw, 1.35rem)',
-              maxWidth: '700px',
+              maxWidth: '840px',
               margin: '0 auto',
               fontWeight: 300,
               lineHeight: 1.8,
@@ -193,13 +193,17 @@ export default function Home() {
                     style={{
                       backgroundColor: 'rgba(0,0,0,0.6)',
                       backdropFilter: 'blur(12px)',
-                      padding: '14px',
+                      width: '52px',
+                      height: '52px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
                       borderRadius: '50%',
                       border: '1px solid rgba(210, 136, 57, 0.4)',
                       boxShadow: '0 0 20px rgba(0,0,0,0.4)'
                     }}
                   >
-                    <ExternalLink size={20} style={{ color: 'var(--color-gold)' }} />
+                    <ExternalLink size={24} style={{ color: 'var(--color-gold)', flexShrink: 0 }} />
                   </motion.div>
                 </div>
 
@@ -210,18 +214,22 @@ export default function Home() {
                   right: '48px',
                   zIndex: 20,
                 }}>
-                  <h2 style={{ fontSize: 'clamp(2.5rem, 5vw, 3.5rem)', fontWeight: 700, marginBottom: '20px', color: '#fff', textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>
+                  <h2 style={{ fontSize: 'clamp(2.5rem, 5vw, 2.5rem)', fontWeight: 700, marginBottom: '20px', color: '#fff', textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>
                     {loc.name}
                   </h2>
 
                   <div style={{ display: 'flex', alignItems: 'center', gap: '10px', color: 'rgba(255,255,255,0.7)', fontSize: '0.9rem', fontFamily: 'var(--font-accent)' }}>
-                    <MapPin size={16} style={{ color: 'var(--color-gold)' }} />
+                    <MapPin size={20} style={{ color: 'var(--color-gold)', flexShrink: 0 }} />
                     <span style={{ fontWeight: 400, letterSpacing: '0.05em' }}>{loc.address}</span>
                   </div>
+                  <div className="explore-btn" style={{ marginTop: '20px' }}>
+                    <span>Visit Restaurant</span>
+                    <ArrowRight size={22} style={{ flexShrink: 0 }} />
+                  </div>
                 </div>
               </div>
 
-              <div className="card-content">
+              {/* <div className="card-content">
                 <p style={{ fontSize: '1.05rem', color: 'rgba(245, 230, 211, 0.7)', marginBottom: '40px', fontWeight: 300, lineHeight: 1.8 }}>
                   {loc.description}
                 </p>
@@ -229,7 +237,7 @@ export default function Home() {
                   <span>Visit Restaurant</span>
                   <ArrowRight size={18} />
                 </div>
-              </div>
+              </div> */}
             </motion.div>
           ))}
         </motion.div>