Merge pull request #130 from ubc-biztech/wrapped-banner

Add Wrapped banner to Companion home page
ubc-biztech · Feb 10, 2025 · eae36d2 · eae36d2
2 parents 354618c + 3fdb358
commit eae36d2
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 13 deletions.
diff --git a/public/videos/wrapped-bg.mp4 b/public/videos/wrapped-bg.mp4
diff --git a/src/components/companion/CompanionHome.tsx b/src/components/companion/CompanionHome.tsx
@@ -7,6 +7,8 @@ import { Connection, ConnectionsList } from './connections/connections-list';
 import { Badge } from '@/pages/companion/badges';
 import NavBarContainer from './navigation/NavBarContainer';
 import { CompanionButton } from '../../../src/components/ui/companion-button';
+import { AnimatedBorder } from '@/components/ui/animated-border';
+import Link from 'next/link';
 
 interface CompanionHomeProps {
   isPartner: boolean | undefined,
@@ -48,6 +50,45 @@ const Counter = ({ value }: { value: number }) => {
   );
 };
 
+const WrappedBanner = () => {
+  return (
+    <Link href="/companion/wrapped" className="block w-full">
+      <AnimatedBorder className="w-full" padding="0px">
+        <div className="relative w-full h-[300px] rounded-[11px] overflow-hidden bg-gradient-to-br from-[#030B13] to-[#1E3A8A] cursor-pointer transform transition-transform hover:scale-[1.02]">
+          {/* Video Background */}
+          <div className="absolute inset-0">
+            <video
+              autoPlay
+              loop
+              muted
+              playsInline
+              className="w-full h-full object-cover opacity-60"
+            >
+              <source
+                src="/videos/wrapped-bg.mp4"
+                type="video/mp4"
+              />
+            </video>
+            <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
+          </div>
+
+          {/* Content */}
+          <div className="relative z-10 h-full flex flex-col justify-between items-center text-center p-8">
+            <div /> {/* Empty div for spacing */}
+            <div className="space-y-2">
+              <div className="text-lg font-bold text-white">Your <span className="text-[#ADCAF5]">Blue</span>Print Wrapped</div>
+              <p className="text-white/80">Check out how you got your start.</p>
+            </div>
+            <button className="bg-[#4B9CFF] hover:bg-[#3B7FFF] text-white w-fit px-8 py-3 rounded-full font-medium transition-colors">
+              Let&apos;s go
+            </button>
+          </div>
+        </div>
+      </AnimatedBorder>
+    </Link>
+  );
+};
+
 const CompanionHome: React.FC<CompanionHomeProps> = ({
   isPartner,
   userName,
@@ -73,19 +114,6 @@ const CompanionHome: React.FC<CompanionHomeProps> = ({
     <NavBarContainer isPartner={isPartner}>
       {/* Welcome Section */}
       <motion.div className="font-[500] p-5 rounded-3xl" variants={itemVariants}>
-        {!isPartner && (
-          <div className="w-full flex justify-center">
-            <div className="p-8 bg-[#030B13] rounded-2xl w-fit">
-              <div className="flex justify-between items-center mb-4">
-                <CompanionButton href="/companion/wrapped">
-                  <span className="text-[12px] translate-y-[1px]">🚀 VIEW WRAPPED</span>
-                  <span className="text-lg translate-y-[-3px]">↗</span>
-                </CompanionButton>
-              </div>
-              <div className="h-[1px] bg-white/10 mb-4" />
-            </div>
-          </div>
-        )}
         <div className="text-[28px] font-medium mb-3 text-white">
           Welcome, <GradientText>{userName}</GradientText>
         </div>
@@ -115,6 +143,14 @@ const CompanionHome: React.FC<CompanionHomeProps> = ({
         </div>
       </motion.div>
 
+      {!isPartner && (
+        <motion.div variants={itemVariants}>
+          <div className="w-full">
+            <WrappedBanner />
+          </div>
+        </motion.div>
+      )}
+
 
       {/* Badges Section – rendered only if not partner */}
       {badges &&